{"id":8316,"date":"2023-08-16T06:18:37","date_gmt":"2023-08-16T13:18:37","guid":{"rendered":"https:\/\/membermouse.com\/?post_type=ht_kb&p=8316"},"modified":"2023-08-16T06:18:37","modified_gmt":"2023-08-16T13:18:37","slug":"ativacao-do-processo-de-checkout-seguro-3d-para-autenticacao-forte-do-cliente-sca","status":"publish","type":"ht_kb","link":"https:\/\/membermouse.com\/pt\/docs\/activating-the-3d-secure-checkout-process-for-strong-customer-authentication-sca\/","title":{"rendered":"Ativa\u00e7\u00e3o do processo de checkout do 3D Secure para autentica\u00e7\u00e3o forte do cliente (SCA)"},"content":{"rendered":"

Para o MM 2.4.0+ , o 3D Secure 2.0 est\u00e1 ativado para o Stripe e o Braintree por padr\u00e3o.<\/em><\/strong><\/p>\n\n\n\n

Para os comerciantes que est\u00e3o localizados no Espa\u00e7o Econ\u00f4mico Europeu (EEE<\/a>) e que vendem para clientes tamb\u00e9m localizados no EEE, isso permite que voc\u00ea atenda \u00e0s exig\u00eancias da Strong Customer Authentication (SCA<\/a>) estabelecido pela Diretiva Revisada de Servi\u00e7os de Pagamento (PSD2<\/a>). Isso entrar\u00e1 em vigor em 14 de setembro de 2019. Os processadores de pagamento externos, como o PayPal, levam voc\u00ea para fora do site e fornecem seu pr\u00f3prio processo de conformidade com a SCA.<\/p>\n\n\n\n

<\/div>\n\n\n\n
Por que ativar um checkout 3D Secure?<\/strong>
<\/h5>\n\n\n\n

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. <\/p>\n\n\n\n

Quando ativado, o cliente ser\u00e1 solicitado a concluir uma etapa extra no checkout, na qual o banco solicitar\u00e1 que ele forne\u00e7a informa\u00e7\u00f5es adicionais (por exemplo, um c\u00f3digo \u00fanico enviado ao telefone) antes que o pagamento seja processado. Os campos de cart\u00e3o de cr\u00e9dito para inserir informa\u00e7\u00f5es de pagamento aparecem em sua p\u00e1gina de checkout, mas s\u00e3o incorporados pelo Stripe ou Braintree (via iFrame). Como resultado, os comerciantes podem se qualificar para um\u00a0SAQ PCI-DSS menos rigoroso<\/a>\u00a0ativando o checkout do 3D Secure (SAQ A-EP\/A vs. SAQ D).<\/p>\n\n\n\n

Para os comerciantes localizados fora do EEE, tamb\u00e9m ser\u00e1 vantajoso ativar esse recurso, o que \u00e9 altamente recomend\u00e1vel. Ele pode ajudar a aumentar a seguran\u00e7a de seus clientes, reduzir as cobran\u00e7as fraudulentas e pode qualific\u00e1-lo para um SAQ PCI-DSS menos rigoroso<\/a> ativando o checkout do 3D Secure (SAQ A-EP\/A vs. SAQ D).<\/p>\n\n\n\n

Vale a pena observar que as assinaturas e transa\u00e7\u00f5es recorrentes fixas est\u00e3o isentas<\/strong> do regulamento da SCA. Desde que o valor do pagamento permane\u00e7a o mesmo, as transa\u00e7\u00f5es futuras n\u00e3o precisar\u00e3o de SCA. Se o valor do pagamento for alterado, ser\u00e1 necess\u00e1ria a autentica\u00e7\u00e3o SCA adicional. Isso tamb\u00e9m se aplica retroativamente a todas as assinaturas recorrentes que foram criadas antes de 14 de setembro de 2019.<\/p>\n\n\n\n

Algumas outras isen\u00e7\u00f5es not\u00e1veis s\u00e3o : Transa\u00e7\u00f5es iniciadas pelo comerciante<\/strong> (pagamentos feitos com cart\u00f5es salvos) e Transa\u00e7\u00f5es abaixo de \u20ac 30<\/strong><\/p>\n\n\n\n

IMPORTANTE: <\/strong>O Stripe.js e o Stripe Elements s\u00f3 podem ser usados no checkout. Todas as transa\u00e7\u00f5es de API n\u00e3o s\u00e3o reconhecidas e essa pr\u00e1tica resulta em requisitos SAQ de conformidade com a PCI mais altos. Veja a se\u00e7\u00e3o Chamada de API CreateMember<\/a> para obter mais informa\u00e7\u00f5es.<\/p>\n\n\n\n

<\/div>\n\n\n\n
Ativa\u00e7\u00e3o de elementos Stripe (Listra)<\/em><\/strong><\/h5>\n\n\n\n

Siga este processo se voc\u00ea j\u00e1 tiver o Stripe configurado em seu site e quiser apenas ativar os elementos do Stripe. <\/em><\/p>\n\n\n\n

Se voc\u00ea precisar configurar o Stripe, consulte <\/em>este artigo para obter instru\u00e7\u00f5es completas de configura\u00e7\u00e3o.<\/a><\/em><\/p>\n\n\n\n

<\/div>\n\n\n\n
    \n
  1. No painel do WordPress, v\u00e1 para\u00a0MemberMouse > Configura\u00e7\u00f5es de pagamento<\/em>\u00a0e clique no \u00edcone\u00a0M\u00e9todos de pagamento<\/em>\u00a0guia. Em\u00a0M\u00e9todo de pagamento no local<\/em>, selecione\u00a0Listrado<\/em>. Isso exibir\u00e1 as op\u00e7\u00f5es de configura\u00e7\u00e3o do Stripe.

    <\/li>\n\n\n\n
  2. \u00a0Select the checkbox next to ‘Enable Stripe Elements’.

    <\/li>\n\n\n\n
  3. Clique no bot\u00e3o Salvar m\u00e9todos de pagamento <\/em>bot\u00e3o.<\/li>\n<\/ol>\n\n\n\n
    <\/div>\n\n\n\n
    Ativa\u00e7\u00e3o do 3D Secure 2.0 (Braintree)<\/em><\/strong><\/h5>\n\n\n\n

    Siga este processo se voc\u00ea j\u00e1 tiver o Braintree configurado em seu site e quiser apenas ativar o 3D Secure 2. <\/em><\/p>\n\n\n\n

    Se voc\u00ea precisar configurar o Braintree, consulte <\/em>este artigo sobre a configura\u00e7\u00e3o do Braintree.<\/a><\/em><\/p>\n\n\n\n

    <\/div>\n\n\n\n
      \n
    1. No painel do WordPress, v\u00e1 para\u00a0MemberMouse > Configura\u00e7\u00f5es de pagamento<\/em>\u00a0e clique no \u00edcone\u00a0M\u00e9todos de pagamento<\/em>\u00a0guia.

      <\/li>\n\n\n\n
    2. Abaixo de\u00a0M\u00e9todo de pagamento no local<\/em>, selecione\u00a0Braintree<\/em>. Isso exibir\u00e1 as op\u00e7\u00f5es de configura\u00e7\u00e3o do Braintree.

      <\/li>\n\n\n\n
    3. \u00a0Select the checkbox next to ‘Enable Hosted Fields \/ 3D Secure 2’.

      \"\"

      <\/li>\n\n\n\n
    4. Clique no bot\u00e3o Salvar m\u00e9todos de pagamento <\/em>bot\u00e3o<\/li>\n<\/ol>\n\n\n\n
      <\/div>\n\n\n\n
      Testando o checkout seguro 3D<\/strong><\/h5>\n\n\n\n

      Tanto a Stripe quanto a Braintree criaram dados de teste espec\u00edficos para testar pagamentos em que a autentica\u00e7\u00e3o forte do cliente \u00e9 necess\u00e1ria. Voc\u00ea pode encontrar essas informa\u00e7\u00f5es, bem como detalhes gerais sobre o processo de teste para cada provedor de pagamento nos artigos abaixo.<\/p>\n\n\n\n

      Testes com o Stripe<\/a><\/p>\n\n\n\n

      Testes com o Braintree<\/a><\/p>\n\n\n\n

      <\/div>\n\n\n\n
      Formata\u00e7\u00e3o do checkout<\/strong><\/h5>\n\n\n\n

      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. \u00a0Instead, any styling must be applied to the containers (divs) that each field is loaded into. \u00a0<\/p>\n\n\n\n

      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. \u00a0<\/p>\n\n\n\n

      Inclu\u00edmos algumas instru\u00e7\u00f5es b\u00e1sicas para ajud\u00e1-lo a ajustar os estilos que podem ser ajustados e que ser\u00e3o diferentes em todos os checkouts. Se voc\u00ea precisar de ajuda com outros ajustes e n\u00e3o tiver um designer ou desenvolvedor dispon\u00edvel, temos uma lista de\u00a0Empreiteiros qualificados<\/a>\u00a0que tenham experi\u00eancia de trabalho com o MemberMouse.<\/p>\n\n\n\n

      <\/div>\n\n\n\n
      Localiza\u00e7\u00e3o de estilos<\/h6>\n\n\n\n

      Inclu\u00edmos algumas instru\u00e7\u00f5es b\u00e1sicas sobre como localizar as classes de campo, bem como os estilos j\u00e1 existentes e como adicionar novos estilos pr\u00f3prios. Todas as instru\u00e7\u00f5es aqui s\u00e3o para o navegador de desktop Chrome. A maioria dos outros navegadores principais tem ferramentas semelhantes que podem ser usadas para obter os mesmos resultados.<\/p>\n\n\n\n

      <\/div>\n\n\n\n

      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. \u00a0The email field works well for text field styles.

      \"\"

      <\/p>\n\n\n\n

      2. Quando o inspetor abrir, voc\u00ea ver\u00e1 v\u00e1rias se\u00e7\u00f5es (seu layout pode ser diferente).

      \"\"

      <\/p>\n\n\n\n

      I.<\/strong>\u00a0O c\u00f3digo HTML do elemento em que voc\u00ea clicou com o bot\u00e3o direito do mouse ser\u00e1 destacado no inspetor.
      <\/p>\n\n\n\n

      II.<\/strong>\u00a0Os estilos que est\u00e3o ativos nesse elemento ser\u00e3o exibidos em cores vivas.<\/p>\n\n\n\n

      H\u00e1 tr\u00eas se\u00e7\u00f5es nas regras CSS.<\/p>\n\n\n\n

      seletor {style:value}<\/p>\n\n\n\n

      Cada regra come\u00e7a com o seletor ao qual a regra se aplica. Para obter mais informa\u00e7\u00f5es, consulte este artigo sobre Seletores CSS<\/a>.<\/p>\n\n\n\n

      - Tipos de elementos como input, p, bot\u00e3o ser\u00e3o listados em texto simples. Os estilos aplicados a um tipo de elemento ser\u00e3o aplicados a qualquer elemento correspondente na p\u00e1gina.<\/p>\n\n\n\n

      - As classes ser\u00e3o precedidas por um ponto (.). Os estilos aplicados \u00e0s classes tamb\u00e9m ser\u00e3o aplicados a qualquer elemento que tenha essa classe adicionada a ele.<\/p>\n\n\n\n

      - Os IDs ser\u00e3o precedidos por um hash (#). A ID de cada elemento deve ser exclusiva, portanto, os estilos aplicados a uma ID s\u00f3 ser\u00e3o aplicados a essa inst\u00e2ncia desse elemento.<\/p>\n\n\n\n

      Em seguida, entre colchetes, voc\u00ea ver\u00e1 o tipo de estilo seguido de dois pontos e o valor do estilo.<\/p>\n\n\n\n

      Por exemplo, todos os elementos de entrada nesta p\u00e1gina ter\u00e3o uma borda de 2 pixels de largura, s\u00f3lida, com uma cor hexadecimal de #d4d0ba.<\/p>\n\n\n\n

      No canto superior direito dessa se\u00e7\u00e3o, voc\u00ea ver\u00e1 o arquivo ou o local de onde o CSS foi carregado.

      <\/p>\n\n\n\n

      III.<\/strong>\u00a0Os estilos podem ser substitu\u00eddos por regras CSS carregadas posteriormente na p\u00e1gina. Os estilos que teriam sido aplicados, mas foram substitu\u00eddos, aparecer\u00e3o em texto riscado.

      <\/p>\n\n\n\n

      IV.<\/strong> 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.<\/p>\n\n\n\n

      <\/div>\n\n\n\n
      Mudan\u00e7a de estilo<\/h6>\n\n\n\n

      Uma vez localizado, voc\u00ea pode adicionar quaisquer regras de estilo CSS \u00e0 caixa CSS adicional do seu tema, localizada em WordPress > Apar\u00eancia > Personalizar > CSS adicional. As regras listadas abaixo cobrir\u00e3o a maioria das diferen\u00e7as de estilo que voc\u00ea poder\u00e1 ver entre os campos hospedados e os outros campos na sua p\u00e1gina de checkout. Depois de localizar o valor do estilo para o tipo de elemento que deseja imitar, voc\u00ea poder\u00e1 us\u00e1-lo para ajustar as regras abaixo, de modo que os campos hospedados combinem melhor com os outros estilos da sua p\u00e1gina. <\/p>\n\n\n\n

      <\/div>\n\n\n\n
      Tamanho do campo<\/strong><\/h6>\n\n\n\n

      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.<\/p>\n\n\n\n

      Altura<\/a> - Determina a altura de um elemento. Pode ser listado em v\u00e1rios tipos de medidas. Consulte o artigo vinculado para obter mais informa\u00e7\u00f5es.<\/p>\n\n\n\n

      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.<\/p>\n\n\n\n

      .StripeElement, .mm-braintree-hosted-field {height: 2.5em;}<\/code><\/code><\/pre>\n\n\n\n
      <\/div>\n\n\n\n
      Largura<\/a> - Determina a largura de um elemento. Pode ser listado em v\u00e1rios tipos de medidas.  Consulte o artigo vinculado para obter mais informa\u00e7\u00f5es.  Como os campos de entrada cont\u00eam diferentes tipos de informa\u00e7\u00f5es, talvez voc\u00ea queira que eles tenham larguras diferentes, portanto, as regras de largura visam cada tipo de campo individualmente.<\/p>\n\n\n\n
      Isso definir\u00e1 a largura dos campos de cart\u00e3o de cr\u00e9dito como uma porcentagem do elemento pai (cont\u00eainer Billing Details). Voc\u00ea 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.<\/p>\n\n\n\n
      ##mm_braintree_cc_number, #mm_field_cc_number_div {width: 50%;}<\/code><\/code><\/pre>\n\n\n\n
      <\/div>\n\n\n\n
      Essa regra define a largura dos campos de texto CVV e Expira\u00e7\u00e3o como uma porcentagem do elemento pai (cont\u00eainer Billing Details).<\/p>\n\n\n\n
      #mm_braintree_cc_cvv, #mm_field_cc_cvv_div, #mm_field_cc_exp_div {width: 25%;}<\/code><\/code><\/pre>\n\n\n\n
      <\/div>\n\n\n\n
      Isso definir\u00e1 o valor dos seletores suspensos de m\u00eas e ano de vencimento do cart\u00e3o de cr\u00e9dito no Braintree como uma porcentagem do elemento pai (cont\u00eainer Billing Details).<\/p>\n\n\n\n
      #mm_braintree_cc_exp_month, #mm_braintree_cc_exp_year {width: 25%;}<\/code><\/code><\/pre>\n\n\n\n
      <\/div>\n\n\n\n
      Fronteira<\/strong><\/h6>\n\n\n\n
      O MemberMouse inclui uma borda b\u00e1sica para alguns campos. Voc\u00ea 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.<\/p>\n\n\n\n
      Fronteira<\/a> - A propriedade border \u00e9 uma abrevia\u00e7\u00e3o 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\u00ea poder\u00e1 combin\u00e1-las em uma \u00fanica regra para aplic\u00e1-las aos campos hospedados.<\/p>\n\n\n\n
      Essa regra aplicar\u00e1 uma borda pontilhada de 2 pixels com um valor de cor de #d55c9f.<\/p>\n\n\n\n
      .StripeElement, #mm_braintree_cc_number, #mm_braintree_cc_cvv {border: 2px dotted #d55c9f;}<\/code><\/code><\/pre>\n\n\n\n
      <\/div>\n\n\n\n
      Estilo de caixa<\/strong><\/h6>\n\n\n\n
      A folha de estilo do navegador para as propriedades border-radius e box-shadow tende a mudar entre desktops e dispositivos m\u00f3veis.  Talvez voc\u00ea queira visualizar sua p\u00e1gina 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.<\/p>\n\n\n\n
      Voc\u00ea pode usar o CSS a seguir na caixa CSS adicional do seu tema (WordPress > Apar\u00eancia > Personalizar > CSS adicional) para definir essas caracter\u00edsticas na entrada do MemberMouse e nos campos de pagamento incorporados. Para obter instru\u00e7\u00f5es detalhadas sobre qualquer propriedade, clique no nome da propriedade vinculada.<\/p>\n\n\n\n
      Raio da borda<\/a> - define a curva dos cantos do campo. Aplica-se somente a campos com bordas definidas.<\/p>\n\n\n\n
      Para bordas arredondadas.  Aumente o tamanho do pixel para curvas maiores, diminua para cantos mais pontiagudos..:<\/p>\n\n\n\n
      .StripeElement, mm-braintree-hosted-field, .mm-textField, .mm-selectList {border-radius: 5px;}<\/code><\/code><\/pre>\n\n\n\n
      <\/div>\n\n\n\n
      Para remover o elemento de borda em todos os campos:<\/p>\n\n\n\n
      .StripeElement, mm-braintree-hosted-field, .mm-textField, .mm-selectList {border-radius: none;}<\/code><\/code><\/pre>\n\n\n\n
      <\/div>\n\n\n\n
      Box Shadow<\/a> - Adiciona uma sombra a um elemento.  Pode ser definida para qualquer dire\u00e7\u00e3o, interna ou externa.<\/p>\n\n\n\n
      Isso definir\u00e1 uma leve sombra cinza-escura na parte inferior e ligeiramente \u00e0 direita. \u00a0<\/p>\n\n\n\n
      O primeiro n\u00famero \u00e9 o alinhamento vertical.  Aumente o n\u00famero para mover a parte mais \u00e0 direita ou negativa para a esquerda. \u00a0<\/p>\n\n\n\n
      O segundo n\u00famero \u00e9 o alinhamento horizontal. N\u00fameros mais altos o movem mais para baixo, n\u00fameros negativos o movem acima da caixa. \u00a0<\/p>\n\n\n\n
      O terceiro n\u00famero \u00e9 o desfoque. N\u00fameros mais altos far\u00e3o com que a sombra pare\u00e7a menos n\u00edtida. \u00a0<\/p>\n\n\n\n
      O \u00faltimo conjunto \u00e9 a cor.  Voc\u00ea pode usar o\u00a0Cores HTML<\/a>\u00a0page for information on more options. \u00a0Adding ‘inset’ after the color set will make the shadow appear inside the box instead of out.<\/p>\n\n\n\n
      .StripeElement, mm-braintree-hosted-field, .mm-textField, .mm-selectList {box-shadow: 1px 1px 5px rgb(120,120,120);}<\/code><\/code><\/pre>\n\n\n\n
      <\/div>\n\n\n\n
      Isso remover\u00e1 a sombra de todos os campos<\/p>\n\n\n\n
      .StripeElement, mm-braintree-hosted-field, .mm-textField, .mm-selectList {none;}<\/code><\/code><\/pre>\n\n\n\n
      <\/div>\n\n\n\n
      Fontes<\/strong><\/h6>\n\n\n\n
      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.<\/p>\n\n\n\n
      Fonte<\/a> - Define propriedades como peso da fonte, tamanho da fonte e fam\u00edlia da fonte.<\/p>\n\n\n\n
      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.:<\/p>\n\n\n\n
      .mm-textField, .mm-selectList {font: 400 13px sans-serif;}<\/code><\/code><\/pre>\n\n\n\n
      <\/div>","protected":false},"excerpt":{"rendered":"
      Para o MM 2.4.0+, o 3D Secure 2.0 est\u00e1 ativado para o Stripe e o Braintree por padr\u00e3o. Para os comerciantes localizados no Espa\u00e7o Econ\u00f4mico Europeu (EEE) e que vendem...<\/p>","protected":false},"author":20918,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"footnotes":""},"ht-kb-category":[201],"ht-kb-tag":[],"class_list":["post-8316","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-sca"],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t