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?

Isso é obrigatório para os clientes do Espaço Econômico Europeu (EEE), a fim de estar em conformidade com o requisito de autenticação forte do cliente (SCA) da PSD2. Se você estiver tentando fazer compras únicas ou iniciais de EEE para EEE por meio do checkout e isso não estiver ativado, a transação provavelmente não será autorizada pelo banco do cliente.

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.  Marque a caixa de seleção ao lado de "Enable Stripe Elements" (Ativar elementos de tarja).
   
   
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.  Marque a caixa de seleção ao lado de "Enable Hosted Fields / 3D Secure 2" (Ativar campos hospedados / 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

Como os campos do 3D Secure são incorporados à sua página de checkout via iFrame do fornecedor de pagamento escolhido, os estilos CSS do seu site (fonte, altura e largura do campo etc.) não se aplicarão a esses campos. Em vez disso, qualquer estilo deve ser aplicado aos contêineres (divs) em que cada campo é carregado.  

O MemberMouse aplicou algumas CSS para tornar o estilo do campo o mais compatível possível com vários temas e navegadores, mas haverá diferenças. Portanto, sugerimos que você revise os formulários de checkout do seu site e ajuste os estilos que achar necessários.  

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. Na janela do navegador, clique com o botão direito do mouse no elemento da página de checkout para o qual deseja localizar o estilo e clique em "Inspecionar" na parte inferior do menu para abrir o Inspetor. O campo de e-mail funciona bem para estilos de campo de texto.

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. Esta seção mostra os estilos computados. Ela é muito detalhada, portanto, pode ser difícil extrair o que você está procurando. Mas, se não conseguir encontrar o estilo aplicado na primeira seção, esta é outra maneira de localizar o estilo ativo de um elemento.

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

O MemberMouse incluiu CSS para que a altura e a largura correspondam o mais próximo possível do tamanho do campo na maioria dos temas, mas se você achar que o tamanho não funciona para o seu tema, poderá ajustá-los usando as regras abaixo para melhor adequação.

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.

Isso definirá a altura dos campos como 2,5 vezes o tamanho da fonte da página, que é usada como a unidade básica de medida no CSS. Você pode definir o valor mais alto ou mais baixo para tornar o campo mais alto ou mais baixo, ou pode alterar o tipo de medida usado.

.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 para obter informações sobre mais opções. Adicionar "inset" após o conjunto de cores fará com que a sombra apareça dentro da caixa em vez de fora.

.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

Por sua natureza, os estilos de fonte não podem ser aplicados aos contêineres div, o que significa que a família da fonte, o tamanho e outras características não podem ser alterados nos campos Stripe/Braintree. Os campos do Stripe e do Braintree extraem os valores de propriedade do navegador em que estão sendo exibidos, e essas propriedades tendem a ser bastante consistentes. Se a fonte do seu tema for muito diferente, para que a fonte da sua página de checkout corresponda a todas as outras, você pode considerar a adição de regras personalizadas para alterar a fonte do seu tema nessa página para corresponder melhor aos campos incorporados.

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

Isso fará com que a fonte da página de checkout do MemberMouse corresponda às propriedades médias do navegador. O primeiro valor é o peso; números maiores tornarão a fonte mais espessa. O segundo é o tamanho e o terceiro é a família da fonte:

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