{"id":8316,"date":"2023-08-16T06:18:37","date_gmt":"2023-08-16T13:18:37","guid":{"rendered":"https:\/\/membermouse.com\/?post_type=ht_kb&amp;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\/documentos-3-2\/ativacao-do-processo-de-checkout-seguro-3d-para-autenticacao-forte-do-cliente-sca\/","title":{"rendered":"Ativa\u00e7\u00e3o do processo de checkout do 3D Secure para autentica\u00e7\u00e3o forte do cliente (SCA)"},"content":{"rendered":"<p><strong><em>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<p>Para os comerciantes que est\u00e3o localizados no Espa\u00e7o Econ\u00f4mico Europeu (<a href=\"https:\/\/en.wikipedia.org\/wiki\/European_Economic_Area\" target=\"_blank\" rel=\"noreferrer noopener\">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 (<a href=\"https:\/\/stripe.com\/guides\/strong-customer-authentication\" target=\"_blank\" rel=\"noreferrer noopener\">SCA<\/a>) estabelecido pela Diretiva Revisada de Servi\u00e7os de Pagamento (<a href=\"https:\/\/en.wikipedia.org\/wiki\/Payment_Services_Directive#Revised_Directive_on_Payment_Services_(PSD2\" target=\"_blank\" rel=\"noreferrer noopener\">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 style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Por que ativar um checkout 3D Secure?<\/strong><br><\/h5>\n\n\n\n<p>Isso \u00e9 obrigat\u00f3rio para os clientes do Espa\u00e7o Econ\u00f4mico Europeu (EEE), a fim de estar em conformidade com o requisito de autentica\u00e7\u00e3o forte do cliente (SCA) da PSD2. Se voc\u00ea estiver tentando fazer compras \u00fanicas ou iniciais de EEE para EEE por meio do checkout e isso n\u00e3o estiver ativado, a transa\u00e7\u00e3o provavelmente n\u00e3o ser\u00e1 autorizada pelo banco do cliente. <\/p>\n\n\n\n<p>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\u00a0<a rel=\"noreferrer noopener\" href=\"https:\/\/www.pcicomplianceguide.org\/pci-saq-3-1-e-commerce-options-explained\/\" target=\"_blank\">SAQ PCI-DSS menos rigoroso<\/a>\u00a0ativando o checkout do 3D Secure (SAQ A-EP\/A vs. SAQ D).<\/p>\n\n\n\n<p>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&nbsp;<a href=\"https:\/\/www.pcicomplianceguide.org\/pci-saq-3-1-e-commerce-options-explained\/\" target=\"_blank\" rel=\"noreferrer noopener\">SAQ PCI-DSS menos rigoroso<\/a>&nbsp;ativando o checkout do 3D Secure (SAQ A-EP\/A vs. SAQ D).<\/p>\n\n\n\n<p>Vale a pena observar que&nbsp;<strong>as assinaturas e transa\u00e7\u00f5es recorrentes fixas est\u00e3o isentas<\/strong>&nbsp;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<p>Algumas outras isen\u00e7\u00f5es not\u00e1veis s\u00e3o :&nbsp;<strong>Transa\u00e7\u00f5es iniciadas pelo comerciante<\/strong>&nbsp;(pagamentos feitos com cart\u00f5es salvos) e&nbsp;<strong>Transa\u00e7\u00f5es abaixo de \u20ac 30<\/strong><\/p>\n\n\n\n<p><strong>IMPORTANTE:&nbsp;<\/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<a href=\"https:\/\/membermouse.com\/pt\/documentos-3-2\/chamada-de-api-de-createmember\/\" target=\"_blank\" rel=\"noreferrer noopener\">&nbsp;Chamada de API CreateMember<\/a>&nbsp;para obter mais informa\u00e7\u00f5es.<\/p>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Ativa\u00e7\u00e3o de elementos Stripe<em>&nbsp;(Listra)<\/em><\/strong><\/h5>\n\n\n\n<p><em>Siga este processo se voc\u00ea j\u00e1 tiver o Stripe configurado em seu site e quiser apenas ativar os elementos do Stripe.&nbsp;<\/em><\/p>\n\n\n\n<p><em>Se voc\u00ea precisar configurar o Stripe, consulte&nbsp;<\/em><em><a href=\"https:\/\/membermouse.com\/pt\/documentos-3-2\/configurando-a-faixa\/\">este artigo para obter instru\u00e7\u00f5es completas de configura\u00e7\u00e3o.<\/a><\/em><\/p>\n\n\n\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ol class=\"wp-block-list\">\n<li>No painel do WordPress, v\u00e1 para\u00a0<em>MemberMouse &gt; Configura\u00e7\u00f5es de pagamento<\/em>\u00a0e clique no \u00edcone\u00a0<em>M\u00e9todos de pagamento<\/em>\u00a0guia. Em\u00a0<em>M\u00e9todo de pagamento no local<\/em>, selecione\u00a0<em>Listrado<\/em>. Isso exibir\u00e1 as op\u00e7\u00f5es de configura\u00e7\u00e3o do Stripe.<br><br><\/li>\n\n\n\n<li>\u00a0Marque a caixa de sele\u00e7\u00e3o ao lado de \"Enable Stripe Elements\" (Ativar elementos de tarja).<br><br><\/li>\n\n\n\n<li>Clique no bot\u00e3o&nbsp;<em>Salvar m\u00e9todos de pagamento&nbsp;<\/em>bot\u00e3o.<\/li>\n<\/ol>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Ativa\u00e7\u00e3o do 3D Secure 2.0&nbsp;<em>(Braintree)<\/em><\/strong><\/h5>\n\n\n\n<p><em>Siga este processo se voc\u00ea j\u00e1 tiver o Braintree configurado em seu site e quiser apenas ativar o 3D Secure 2.&nbsp;<\/em><\/p>\n\n\n\n<p><em>Se voc\u00ea precisar configurar o Braintree, consulte&nbsp;<\/em><em><a href=\"https:\/\/membermouse.com\/pt\/documentos-3-2\/configuracao-do-braintree\/\">este artigo sobre a configura\u00e7\u00e3o do Braintree.<\/a><\/em><\/p>\n\n\n\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ol class=\"wp-block-list\">\n<li>No painel do WordPress, v\u00e1 para\u00a0<em>MemberMouse &gt; Configura\u00e7\u00f5es de pagamento<\/em>\u00a0e clique no \u00edcone\u00a0<em>M\u00e9todos de pagamento<\/em>\u00a0guia.<br><br><\/li>\n\n\n\n<li>Abaixo de\u00a0<em>M\u00e9todo de pagamento no local<\/em>, selecione\u00a0<em>Braintree<\/em>. Isso exibir\u00e1 as op\u00e7\u00f5es de configura\u00e7\u00e3o do Braintree.<br><br><\/li>\n\n\n\n<li>\u00a0Marque a caixa de sele\u00e7\u00e3o ao lado de \"Enable Hosted Fields \/ 3D Secure 2\" (Ativar campos hospedados \/ 3D Secure 2).<br><br><img decoding=\"async\" class=\"wp-image-10646\" style=\"width: 600px;\" src=\"https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/09\/59b37a23-tzxbvbwq6qosq262wqcr1ib9psws6kgkoa.png\" alt=\"\"><br><br><\/li>\n\n\n\n<li>Clique no bot\u00e3o&nbsp;<em>Salvar m\u00e9todos de pagamento&nbsp;<\/em>bot\u00e3o<\/li>\n<\/ol>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"format\"><strong>Testando o checkout seguro 3D<\/strong><\/h5>\n\n\n\n<p>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<p><a href=\"https:\/\/membermouse.com\/pt\/documentos-3-2\/teste-com-faixa\/\">Testes com o Stripe<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/membermouse.com\/pt\/documentos-3-2\/testes-com-o-braintree\/\">Testes com o Braintree<\/a><\/p>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"format\"><strong>Formata\u00e7\u00e3o do checkout<\/strong><\/h5>\n\n\n\n<p>Como os campos do 3D Secure s\u00e3o incorporados \u00e0 sua p\u00e1gina de checkout via iFrame do fornecedor de pagamento escolhido, os estilos CSS do seu site (fonte, altura e largura do campo etc.) n\u00e3o se aplicar\u00e3o a esses campos.  Em vez disso, qualquer estilo deve ser aplicado aos cont\u00eaineres (divs) em que cada campo \u00e9 carregado. \u00a0<\/p>\n\n\n\n<p>O MemberMouse aplicou algumas CSS para tornar o estilo do campo o mais compat\u00edvel poss\u00edvel com v\u00e1rios temas e navegadores, mas haver\u00e1 diferen\u00e7as. Portanto, sugerimos que voc\u00ea revise os formul\u00e1rios de checkout do seu site e ajuste os estilos que achar necess\u00e1rios. \u00a0<\/p>\n\n\n\n<p>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\u00a0<a href=\"http:\/\/activating%20the%203d%20secure%20checkout%20process%20for%20strong%20customer%20authentication%20%28sca%29\/\">Empreiteiros qualificados<\/a>\u00a0que tenham experi\u00eancia de trabalho com o MemberMouse.<\/p>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h6 class=\"wp-block-heading\">Localiza\u00e7\u00e3o de estilos<\/h6>\n\n\n\n<p>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 style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>1. Na janela do navegador, clique com o bot\u00e3o direito do mouse no elemento da p\u00e1gina 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.<br><br><img decoding=\"async\" class=\"wp-image-10647\" style=\"width: 350px;\" src=\"https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/09\/b44b1ae2-myg8bj7nzewstkoiyzmj0p4h0gbyobmvvw.png\" alt=\"\"><br><br><\/p>\n\n\n\n<p>2. Quando o inspetor abrir, voc\u00ea ver\u00e1 v\u00e1rias se\u00e7\u00f5es (seu layout pode ser diferente).<br><br><img decoding=\"async\" class=\"wp-image-10648\" style=\"width: 550px;\" src=\"https:\/\/storage.googleapis.com\/wpgcbucket\/wp\/2023\/09\/3a485884-rbsfnkfdec_pd0cju1yoq99vdzh1xib2wq.png\" alt=\"\"><br><br><\/p>\n\n\n\n<p><strong>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.<br><\/p>\n\n\n\n<p><strong>II.<\/strong>\u00a0Os estilos que est\u00e3o ativos nesse elemento ser\u00e3o exibidos em cores vivas.<\/p>\n\n\n\n<p>H\u00e1 tr\u00eas se\u00e7\u00f5es nas regras CSS.<\/p>\n\n\n\n<p>seletor {style:value}<\/p>\n\n\n\n<p>Cada regra come\u00e7a com o seletor ao qual a regra se aplica. Para obter mais informa\u00e7\u00f5es, consulte este artigo sobre&nbsp;<a href=\"https:\/\/www.w3schools.com\/css\/css_selectors.asp\" target=\"_blank\" rel=\"noreferrer noopener\">Seletores CSS<\/a>.<\/p>\n\n\n\n<p>- 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<p>- 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<p>- 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<p>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<p>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<p>No canto superior direito dessa se\u00e7\u00e3o, voc\u00ea ver\u00e1 o arquivo ou o local de onde o CSS foi carregado.<br><br><\/p>\n\n\n\n<p><strong>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.<br><br><\/p>\n\n\n\n<p><strong>IV.<\/strong>&nbsp;Esta se\u00e7\u00e3o mostra os estilos computados. Ela \u00e9 muito detalhada, portanto, pode ser dif\u00edcil extrair o que voc\u00ea est\u00e1 procurando. Mas, se n\u00e3o conseguir encontrar o estilo aplicado na primeira se\u00e7\u00e3o, esta \u00e9 outra maneira de localizar o estilo ativo de um elemento.<\/p>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h6 class=\"wp-block-heading\">Mudan\u00e7a de estilo<\/h6>\n\n\n\n<p>Uma vez localizado, voc\u00ea pode adicionar quaisquer regras de estilo CSS \u00e0 caixa CSS adicional do seu tema, localizada em WordPress &gt; Apar\u00eancia &gt; Personalizar &gt; 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.&nbsp;<\/p>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h6 class=\"wp-block-heading\"><strong>Tamanho do campo<\/strong><\/h6>\n\n\n\n<p>O MemberMouse incluiu CSS para que a altura e a largura correspondam o mais pr\u00f3ximo poss\u00edvel do tamanho do campo na maioria dos temas, mas se voc\u00ea achar que o tamanho n\u00e3o funciona para o seu tema, poder\u00e1 ajust\u00e1-los usando as regras abaixo para melhor adequa\u00e7\u00e3o.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.w3schools.com\/cssref\/pr_dim_height.asp\" target=\"_blank\" rel=\"noreferrer noopener\">Altura<\/a>&nbsp;- 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<p>Isso definir\u00e1 a altura dos campos como 2,5 vezes o tamanho da fonte da p\u00e1gina, que \u00e9 usada como a unidade b\u00e1sica de medida no CSS. Voc\u00ea 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.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><code>.StripeElement, .mm-braintree-hosted-field {height: 2.5em;}<\/code><\/code><\/pre>\n\n\n\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><a href=\"https:\/\/www.w3schools.com\/cssref\/pr_dim_width.asp\" target=\"_blank\" rel=\"noreferrer noopener\">Largura<\/a>&nbsp;- 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<p>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<pre class=\"wp-block-code\"><code><code>##mm_braintree_cc_number, #mm_field_cc_number_div {width: 50%;}<\/code><\/code><\/pre>\n\n\n\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>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<pre class=\"wp-block-code\"><code><code>#mm_braintree_cc_cvv, #mm_field_cc_cvv_div, #mm_field_cc_exp_div {width: 25%;}<\/code><\/code><\/pre>\n\n\n\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>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<pre class=\"wp-block-code\"><code><code>#mm_braintree_cc_exp_month, #mm_braintree_cc_exp_year {width: 25%;}<\/code><\/code><\/pre>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h6 class=\"wp-block-heading\"><strong>Fronteira<\/strong><\/h6>\n\n\n\n<p>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<p><a href=\"https:\/\/www.w3schools.com\/cssref\/pr_border.asp\" target=\"_blank\" rel=\"noreferrer noopener\">Fronteira<\/a>&nbsp;- 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<p>Essa regra aplicar\u00e1 uma borda pontilhada de 2 pixels com um valor de cor de #d55c9f.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><code>.StripeElement, #mm_braintree_cc_number, #mm_braintree_cc_cvv {border: 2px dotted #d55c9f;}<\/code><\/code><\/pre>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h6 class=\"wp-block-heading\"><strong>Estilo de caixa<\/strong><\/h6>\n\n\n\n<p>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<p>Voc\u00ea pode usar o CSS a seguir na caixa CSS adicional do seu tema (WordPress &gt; Apar\u00eancia &gt; Personalizar &gt; 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<p><a href=\"https:\/\/www.w3schools.com\/cssref\/css3_pr_border-radius.asp\" target=\"_blank\" rel=\"noreferrer noopener\">Raio da borda<\/a>&nbsp;- define a curva dos cantos do campo. Aplica-se somente a campos com bordas definidas.<\/p>\n\n\n\n<p>Para bordas arredondadas.  Aumente o tamanho do pixel para curvas maiores, diminua para cantos mais pontiagudos..:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><code>.StripeElement, mm-braintree-hosted-field, .mm-textField, .mm-selectList {border-radius: 5px;}<\/code><\/code><\/pre>\n\n\n\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Para remover o elemento de borda em todos os campos:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><code>.StripeElement, mm-braintree-hosted-field, .mm-textField, .mm-selectList {border-radius: none;}<\/code><\/code><\/pre>\n\n\n\n<div style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><a href=\"https:\/\/www.w3schools.com\/cssref\/css3_pr_box-shadow.asp\" target=\"_blank\" rel=\"noreferrer noopener\">Box Shadow<\/a>&nbsp;- Adiciona uma sombra a um elemento.  Pode ser definida para qualquer dire\u00e7\u00e3o, interna ou externa.<\/p>\n\n\n\n<p>Isso definir\u00e1 uma leve sombra cinza-escura na parte inferior e ligeiramente \u00e0 direita. \u00a0<\/p>\n\n\n\n<p>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<p>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<p>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<p>O \u00faltimo conjunto \u00e9 a cor.  Voc\u00ea pode usar o\u00a0<a rel=\"noreferrer noopener\" href=\"https:\/\/www.w3schools.com\/html\/html_colors.asp\" target=\"_blank\">Cores HTML<\/a>\u00a0para obter informa\u00e7\u00f5es sobre mais op\u00e7\u00f5es.  Adicionar \"inset\" ap\u00f3s o conjunto de cores far\u00e1 com que a sombra apare\u00e7a dentro da caixa em vez de fora.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><code>.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 style=\"height:5px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Isso remover\u00e1 a sombra de todos os campos<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><code>.StripeElement, mm-braintree-hosted-field, .mm-textField, .mm-selectList {none;}<\/code><\/code><\/pre>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h6 class=\"wp-block-heading\"><strong>Fontes<\/strong><\/h6>\n\n\n\n<p>Por sua natureza, os estilos de fonte n\u00e3o podem ser aplicados aos cont\u00eaineres div, o que significa que a fam\u00edlia da fonte, o tamanho e outras caracter\u00edsticas n\u00e3o podem ser alterados nos campos Stripe\/Braintree.  Os campos do Stripe e do Braintree extraem os valores de propriedade do navegador em que est\u00e3o 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\u00e1gina de checkout corresponda a todas as outras, voc\u00ea pode considerar a adi\u00e7\u00e3o de regras personalizadas para alterar a fonte do seu tema nessa p\u00e1gina para corresponder melhor aos campos incorporados.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.w3schools.com\/cssref\/pr_font_font.asp\" target=\"_blank\" rel=\"noreferrer noopener\">Fonte<\/a>&nbsp;- Define propriedades como peso da fonte, tamanho da fonte e fam\u00edlia da fonte.<\/p>\n\n\n\n<p>Isso far\u00e1 com que a fonte da p\u00e1gina de checkout do MemberMouse corresponda \u00e0s propriedades m\u00e9dias do navegador.  O primeiro valor \u00e9 o peso; n\u00fameros maiores tornar\u00e3o a fonte mais espessa.  O segundo \u00e9 o tamanho e o terceiro \u00e9 a fam\u00edlia da fonte:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><code>.mm-textField, .mm-selectList {font: 400 13px sans-serif;}<\/code><\/code><\/pre>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>","protected":false},"excerpt":{"rendered":"<p>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":9645,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_strive_editorial_status":"not-started","_strive_copy_of":0,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"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":[],"_links":{"self":[{"href":"https:\/\/membermouse.com\/pt\/wp-json\/wp\/v2\/ht-kb\/8316","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/membermouse.com\/pt\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/membermouse.com\/pt\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/membermouse.com\/pt\/wp-json\/wp\/v2\/users\/9645"}],"replies":[{"embeddable":true,"href":"https:\/\/membermouse.com\/pt\/wp-json\/wp\/v2\/comments?post=8316"}],"version-history":[{"count":0,"href":"https:\/\/membermouse.com\/pt\/wp-json\/wp\/v2\/ht-kb\/8316\/revisions"}],"wp:attachment":[{"href":"https:\/\/membermouse.com\/pt\/wp-json\/wp\/v2\/media?parent=8316"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/membermouse.com\/pt\/wp-json\/wp\/v2\/ht-kb-category?post=8316"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/membermouse.com\/pt\/wp-json\/wp\/v2\/ht-kb-tag?post=8316"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}