Ativação do processo de checkout do 3D Secure para autenticação forte do cliente (SCA)

Para o MM 2.4.0+ , o 3D Secure 2.0 está ativado para o Stripe e o Braintree por padrão.

Para os comerciantes que estão localizados no Espaço Econômico Europeu (EEE) e que vendem para clientes também localizados no EEE, isso permite que você atenda às exigências da Strong Customer Authentication (SCA) estabelecido pela Diretiva Revisada de Serviços de Pagamento (PSD2). Isso entrará em vigor em 14 de setembro de 2019. Os processadores de pagamento externos, como o PayPal, levam você para fora do site e fornecem seu próprio processo de conformidade com a SCA.

Por que ativar um checkout 3D Secure?

This is mandatory for customers in the European Economic Area (EEA) in order to be compliant with the Strong Customer Authentication (SCA) requirement of the PSD2. If you are attempting EEA to EEA, one-time or initial purchases through your checkout and this is not enabled, the transaction will likely not be authorized by your customer’s bank.

Quando ativado, o cliente será solicitado a concluir uma etapa extra no checkout, na qual o banco solicitará que ele forneça informações adicionais (por exemplo, um código único enviado ao telefone) antes que o pagamento seja processado. Os campos de cartão de crédito para inserir informações de pagamento aparecem em sua página de checkout, mas são incorporados pelo Stripe ou Braintree (via iFrame). Como resultado, os comerciantes podem se qualificar para um SAQ PCI-DSS menos rigoroso ativando o checkout do 3D Secure (SAQ A-EP/A vs. SAQ D).

Para os comerciantes localizados fora do EEE, também será vantajoso ativar esse recurso, o que é altamente recomendável. Ele pode ajudar a aumentar a segurança de seus clientes, reduzir as cobranças fraudulentas e pode qualificá-lo para um SAQ PCI-DSS menos rigoroso ativando o checkout do 3D Secure (SAQ A-EP/A vs. SAQ D).

Vale a pena observar que as assinaturas e transações recorrentes fixas estão isentas do regulamento da SCA. Desde que o valor do pagamento permaneça o mesmo, as transações futuras não precisarão de SCA. Se o valor do pagamento for alterado, será necessária a autenticação SCA adicional. Isso também se aplica retroativamente a todas as assinaturas recorrentes que foram criadas antes de 14 de setembro de 2019.

Algumas outras isenções notáveis são : Transações iniciadas pelo comerciante (pagamentos feitos com cartões salvos) e Transações abaixo de € 30

IMPORTANTE: O Stripe.js e o Stripe Elements só podem ser usados no checkout. Todas as transações de API não são reconhecidas e essa prática resulta em requisitos SAQ de conformidade com a PCI mais altos. Veja a seção Chamada de API CreateMember para obter mais informações.

Ativação de elementos Stripe (Listra)

Siga este processo se você já tiver o Stripe configurado em seu site e quiser apenas ativar os elementos do Stripe. 

Se você precisar configurar o Stripe, consulte este artigo para obter instruções completas de configuração.

1. No painel do WordPress, vá para MemberMouse > Configurações de pagamento e clique no ícone Métodos de pagamento guia. Em Método de pagamento no local, selecione Listrado. Isso exibirá as opções de configuração do Stripe.
   
   
2.  Select the checkbox next to ‘Enable Stripe Elements’.
   
   
3. Clique no botão Salvar métodos de pagamento botão.

Ativação do 3D Secure 2.0 (Braintree)

Siga este processo se você já tiver o Braintree configurado em seu site e quiser apenas ativar o 3D Secure 2. 

Se você precisar configurar o Braintree, consulte este artigo sobre a configuração do Braintree.

1. No painel do WordPress, vá para MemberMouse > Configurações de pagamento e clique no ícone Métodos de pagamento guia.
   
   
2. Abaixo de Método de pagamento no local, selecione Braintree. Isso exibirá as opções de configuração do Braintree.
   
   
3.  Select the checkbox next to ‘Enable Hosted Fields / 3D Secure 2’.
   
   
   
   
4. Clique no botão Salvar métodos de pagamento botão

Testando o checkout seguro 3D

Tanto a Stripe quanto a Braintree criaram dados de teste específicos para testar pagamentos em que a autenticação forte do cliente é necessária. Você pode encontrar essas informações, bem como detalhes gerais sobre o processo de teste para cada provedor de pagamento nos artigos abaixo.

Testes com o Stripe

Testes com o Braintree

Formatação do checkout

Since 3D Secure fields are embedded on your checkout page via iFrame from your chosen payment vendor, your site’s CSS styles (font, field height and width, etc) will not apply to these fields.  Instead, any styling must be applied to the containers (divs) that each field is loaded into.  

MemberMouse has applied some CSS to make the field styling as compatible as possible with multiple themes and browsers, but there will be differences. So, we suggest reviewing your site’s checkout forms, and adjusting any styles you find necessary.  

Incluímos algumas instruções básicas para ajudá-lo a ajustar os estilos que podem ser ajustados e que serão diferentes em todos os checkouts. Se você precisar de ajuda com outros ajustes e não tiver um designer ou desenvolvedor disponível, temos uma lista de Empreiteiros qualificados que tenham experiência de trabalho com o MemberMouse.

Localização de estilos

Incluímos algumas instruções básicas sobre como localizar as classes de campo, bem como os estilos já existentes e como adicionar novos estilos próprios. Todas as instruções aqui são para o navegador de desktop Chrome. A maioria dos outros navegadores principais tem ferramentas semelhantes que podem ser usadas para obter os mesmos resultados.

1. In your browser window, right click the element on the checkout page you want to locate the style for, and cIlick ‘Inspect’ at the bottom of the menu to open the Inspector.  The email field works well for text field styles.

2. Quando o inspetor abrir, você verá várias seções (seu layout pode ser diferente).

I. O código HTML do elemento em que você clicou com o botão direito do mouse será destacado no inspetor.

II. Os estilos que estão ativos nesse elemento serão exibidos em cores vivas.

Há três seções nas regras CSS.

seletor {style:value}

Cada regra começa com o seletor ao qual a regra se aplica. Para obter mais informações, consulte este artigo sobre Seletores CSS.

- Tipos de elementos como input, p, botão serão listados em texto simples. Os estilos aplicados a um tipo de elemento serão aplicados a qualquer elemento correspondente na página.

- As classes serão precedidas por um ponto (.). Os estilos aplicados às classes também serão aplicados a qualquer elemento que tenha essa classe adicionada a ele.

- Os IDs serão precedidos por um hash (#). A ID de cada elemento deve ser exclusiva, portanto, os estilos aplicados a uma ID só serão aplicados a essa instância desse elemento.

Em seguida, entre colchetes, você verá o tipo de estilo seguido de dois pontos e o valor do estilo.

Por exemplo, todos os elementos de entrada nesta página terão uma borda de 2 pixels de largura, sólida, com uma cor hexadecimal de #d4d0ba.

No canto superior direito dessa seção, você verá o arquivo ou o local de onde o CSS foi carregado.

III. Os estilos podem ser substituídos por regras CSS carregadas posteriormente na página. Os estilos que teriam sido aplicados, mas foram substituídos, aparecerão em texto riscado.

IV. This section shows computed styles. It is very detailed, so it can be difficult to extract what you are looking for. But, if you can’t find the applied style in the first section, this is another way to locate the active style for an element.

Mudança de estilo

Uma vez localizado, você pode adicionar quaisquer regras de estilo CSS à caixa CSS adicional do seu tema, localizada em WordPress > Aparência > Personalizar > CSS adicional. As regras listadas abaixo cobrirão a maioria das diferenças de estilo que você poderá ver entre os campos hospedados e os outros campos na sua página de checkout. Depois de localizar o valor do estilo para o tipo de elemento que deseja imitar, você poderá usá-lo para ajustar as regras abaixo, de modo que os campos hospedados combinem melhor com os outros estilos da sua página. 

Tamanho do campo

MemberMouse has included CSS to match the height and width as closely as possible to the field size in most themes, but if you find the size doesn’t work for your theme, you can adjust them using the rules below to better fit.

Altura - Determina a altura de um elemento. Pode ser listado em vários tipos de medidas. Consulte o artigo vinculado para obter mais informações.

This will set the height of the fields to 2.5 times the page’s font size, which is used as the basic unit of measurement in CSS. You can set the value higher or lower to make the field taller or shorter, or you can change the type of measurement used.

.StripeElement, .mm-braintree-hosted-field {height: 2.5em;}

Largura - Determina a largura de um elemento. Pode ser listado em vários tipos de medidas. Consulte o artigo vinculado para obter mais informações. Como os campos de entrada contêm diferentes tipos de informações, talvez você queira que eles tenham larguras diferentes, portanto, as regras de largura visam cada tipo de campo individualmente.

Isso definirá a largura dos campos de cartão de crédito como uma porcentagem do elemento pai (contêiner Billing Details). Você pode definir o valor mais alto ou mais baixo para tornar o campo mais largo ou mais estreito, ou pode alterar o tipo de medida usado.

##mm_braintree_cc_number, #mm_field_cc_number_div {width: 50%;}

Essa regra define a largura dos campos de texto CVV e Expiração como uma porcentagem do elemento pai (contêiner Billing Details).

#mm_braintree_cc_cvv, #mm_field_cc_cvv_div, #mm_field_cc_exp_div {width: 25%;}

Isso definirá o valor dos seletores suspensos de mês e ano de vencimento do cartão de crédito no Braintree como uma porcentagem do elemento pai (contêiner Billing Details).

#mm_braintree_cc_exp_month, #mm_braintree_cc_exp_year {width: 25%;}

Fronteira

O MemberMouse inclui uma borda básica para alguns campos. Você pode modificar a regra abaixo com valores de qualquer um dos campos de entrada de texto do MemberMouse para alterar os campos hospedados para que correspondam ao seu tema.

Fronteira - A propriedade border é uma abreviação das propriedades border-width (largura da borda), border-style (estilo da borda) e border-color (cor da borda). Se o seu tema as tiver listado separadamente, você poderá combiná-las em uma única regra para aplicá-las aos campos hospedados.

Essa regra aplicará uma borda pontilhada de 2 pixels com um valor de cor de #d55c9f.

.StripeElement, #mm_braintree_cc_number, #mm_braintree_cc_cvv {border: 2px dotted #d55c9f;}

Estilo de caixa

A folha de estilo do navegador para as propriedades border-radius e box-shadow tende a mudar entre desktops e dispositivos móveis. Talvez você queira visualizar sua página em diferentes navegadores e dispositivos para decidir se deseja definir esses estilos explicitamente para corresponder ao seu tema (se houver) ou a um dos tipos de navegador.

Você pode usar o CSS a seguir na caixa CSS adicional do seu tema (WordPress > Aparência > Personalizar > CSS adicional) para definir essas características na entrada do MemberMouse e nos campos de pagamento incorporados. Para obter instruções detalhadas sobre qualquer propriedade, clique no nome da propriedade vinculada.

Raio da borda - define a curva dos cantos do campo. Aplica-se somente a campos com bordas definidas.

Para bordas arredondadas. Aumente o tamanho do pixel para curvas maiores, diminua para cantos mais pontiagudos..:

.StripeElement, mm-braintree-hosted-field, .mm-textField, .mm-selectList {border-radius: 5px;}

Para remover o elemento de borda em todos os campos:

.StripeElement, mm-braintree-hosted-field, .mm-textField, .mm-selectList {border-radius: none;}

Box Shadow - Adiciona uma sombra a um elemento. Pode ser definida para qualquer direção, interna ou externa.

Isso definirá uma leve sombra cinza-escura na parte inferior e ligeiramente à direita.  

O primeiro número é o alinhamento vertical. Aumente o número para mover a parte mais à direita ou negativa para a esquerda.  

O segundo número é o alinhamento horizontal. Números mais altos o movem mais para baixo, números negativos o movem acima da caixa.  

O terceiro número é o desfoque. Números mais altos farão com que a sombra pareça menos nítida.  

O último conjunto é a cor. Você pode usar o Cores HTML page for information on more options.  Adding ‘inset’ after the color set will make the shadow appear inside the box instead of out.

.StripeElement, mm-braintree-hosted-field, .mm-textField, .mm-selectList {box-shadow: 1px 1px 5px rgb(120,120,120);}

Isso removerá a sombra de todos os campos

.StripeElement, mm-braintree-hosted-field, .mm-textField, .mm-selectList {none;}

Fontes

By their nature, font styles cannot be applied to the div containers, meaning that the font family, size, and other characteristics cannot be altered in the Stripe/Braintree fields.  Both the Stripe and Braintree fields pull the property values from the browser it is being displayed on, and these properties tend to be fairly consistent. If your theme’s font is very different, in order to get the font on your checkout page to match throughout, you may want to consider adding custom rules to change your theme’s font on that page to better match the embedded fields instead.

Fonte - Define propriedades como peso da fonte, tamanho da fonte e família da fonte.

This will match your MemberMouse Checkout page’s font to the average browser’s properties.  The first value is weight, larger numbers will make the font thicker.  The second is size, and the third is the font family.:

.mm-textField, .mm-selectList {font: 400 13px sans-serif;}