{"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":"activacion-del-proceso-de-pago-seguro-3d-para-una-autenticacion-solida-del-cliente-sca","status":"publish","type":"ht_kb","link":"https:\/\/membermouse.com\/es\/docs\/activating-the-3d-secure-checkout-process-for-strong-customer-authentication-sca\/","title":{"rendered":"Activaci\u00f3n del proceso de pago 3D Secure para la autenticaci\u00f3n fuerte de clientes (SCA)"},"content":{"rendered":"

Para MM 2.4.0+ , 3D Secure 2.0 est\u00e1 activado para Stripe y Braintree por defecto.<\/em><\/strong><\/p>\n\n\n\n

Para los comerciantes situados en el Espacio Econ\u00f3mico Europeo (EEE<\/a>) y que venden a clientes situados tambi\u00e9n en el EEE, esto le permite cumplir la autenticaci\u00f3n fuerte de clientes (SCA<\/a>) establecido por la Directiva revisada sobre servicios de pago (DSP2<\/a>). Esto entrar\u00e1 en vigor el 14 de septiembre de 2019. Los procesadores de pagos externos, como PayPal, le llevan fuera del sitio y proporcionan su propio proceso para el cumplimiento de SCA.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\u00bfPor qu\u00e9 habilitar un sistema de pago 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

Cuando est\u00e1 activada, se pedir\u00e1 al cliente que complete un paso adicional en el proceso de pago en el que su banco le pedir\u00e1 que proporcione informaci\u00f3n adicional (como un c\u00f3digo de un solo uso enviado a su tel\u00e9fono) antes de que se procese el pago. Los campos de tarjeta de cr\u00e9dito para introducir la informaci\u00f3n de pago aparecen en la p\u00e1gina de pago, pero est\u00e1n incrustados desde Stripe o Braintree (a trav\u00e9s de iFrame). Como resultado, los comerciantes pueden optar a un\u00a0PCI-DSS SAQ menos riguroso<\/a>\u00a0activando la comprobaci\u00f3n 3D Secure (SAQ A-EP\/A frente a SAQ D).<\/p>\n\n\n\n

Para los comerciantes situados fuera del EEE, tambi\u00e9n les beneficiar\u00e1 activar esta funci\u00f3n y se lo recomendamos encarecidamente. Puede ayudar a aumentar la seguridad de sus clientes, reducir los cargos fraudulentos y puede darle derecho a un PCI-DSS SAQ menos riguroso<\/a> activando la comprobaci\u00f3n 3D Secure (SAQ A-EP\/A frente a SAQ D).<\/p>\n\n\n\n

Cabe se\u00f1alar que las suscripciones y transacciones peri\u00f3dicas fijas est\u00e1n exentas<\/strong> de la normativa SCA. Mientras el importe del pago siga siendo el mismo, las transacciones futuras no necesitar\u00e1n SCA. Si el importe del pago cambia, entonces ser\u00e1 necesaria la autenticaci\u00f3n SCA adicional. Esto tambi\u00e9n se aplica retroactivamente a cualquier suscripci\u00f3n recurrente que se haya creado antes del 14 de septiembre de 2019.<\/p>\n\n\n\n

Otras exenciones destacables son : Transacciones iniciadas por el comerciante<\/strong> (pagos realizados con tarjetas guardadas) y Transacciones inferiores a 30 euros<\/strong><\/p>\n\n\n\n

IMPORTANTE: <\/strong>Stripe.js y Stripe Elements s\u00f3lo se pueden utilizar en el proceso de pago. Cualquier transacci\u00f3n de API no se contabiliza y esta pr\u00e1ctica da lugar a mayores requisitos SAQ de cumplimiento de PCI. Consulte el Llamada a la API CreateMember<\/a> para m\u00e1s informaci\u00f3n.<\/p>\n\n\n\n

<\/div>\n\n\n\n
Activaci\u00f3n de los elementos de Stripe (Raya)<\/em><\/strong><\/h5>\n\n\n\n

Siga este proceso si ya tiene Stripe configurado en su sitio y simplemente desea habilitar los elementos de Stripe. <\/em><\/p>\n\n\n\n

Si necesita configurar Stripe, consulte <\/em>este art\u00edculo para obtener instrucciones completas de configuraci\u00f3n.<\/a><\/em><\/p>\n\n\n\n

<\/div>\n\n\n\n
    \n
  1. En el panel de control de WordPress, vaya a\u00a0MemberMouse > Configuraci\u00f3n de pagos<\/em>\u00a0y haga clic en el bot\u00f3n\u00a0Formas de pago<\/em>\u00a0pesta\u00f1a. En\u00a0Forma de pago in situ<\/em>seleccione\u00a0Raya<\/em>. Esto mostrar\u00e1 las opciones de configuraci\u00f3n de Stripe.

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

    <\/li>\n\n\n\n
  3. Haga clic en el bot\u00f3n Guardar formas de pago <\/em>bot\u00f3n.<\/li>\n<\/ol>\n\n\n\n
    <\/div>\n\n\n\n
    Activaci\u00f3n de 3D Secure 2.0 (Braintree)<\/em><\/strong><\/h5>\n\n\n\n

    Siga este proceso si ya tiene Braintree configurado en su sitio y simplemente desea activar 3D Secure 2. <\/em><\/p>\n\n\n\n

    Si necesita configurar Braintree, consulte <\/em>este art\u00edculo sobre la configuraci\u00f3n de Braintree.<\/a><\/em><\/p>\n\n\n\n

    <\/div>\n\n\n\n
      \n
    1. En el panel de control de WordPress, vaya a\u00a0MemberMouse > Configuraci\u00f3n de pagos<\/em>\u00a0y haga clic en el bot\u00f3n\u00a0Formas de pago<\/em>\u00a0ficha.

      <\/li>\n\n\n\n
    2. En\u00a0Forma de pago in situ<\/em>seleccione\u00a0Braintree<\/em>. Aparecer\u00e1n las opciones de configuraci\u00f3n de Braintree.

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

      \"\"

      <\/li>\n\n\n\n
    4. Haga clic en el bot\u00f3n Guardar formas de pago <\/em>bot\u00f3n<\/li>\n<\/ol>\n\n\n\n
      <\/div>\n\n\n\n
      Probar el sistema de pago 3D Secure<\/strong><\/h5>\n\n\n\n

      Tanto Stripe como Braintree han creado datos de prueba espec\u00edficos para probar pagos en los que se requiere autenticaci\u00f3n fuerte de cliente. Puede encontrar esa informaci\u00f3n, as\u00ed como detalles generales sobre el proceso de prueba para cada proveedor de pago, en los siguientes art\u00edculos.<\/p>\n\n\n\n

      Pruebas con Stripe<\/a><\/p>\n\n\n\n

      Pruebas con Braintree<\/a><\/p>\n\n\n\n

      <\/div>\n\n\n\n
      Formatear la caja<\/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

      Hemos incluido algunas instrucciones b\u00e1sicas para ayudarle a ajustar aquellos estilos que pueden ajustarse y que ser\u00e1n diferentes en todas las cajas. Si necesita ayuda con otros ajustes y no dispone de un dise\u00f1ador o desarrollador, tenemos una lista de\u00a0Contratistas cualificados<\/a>\u00a0que tengan experiencia trabajando con MemberMouse.<\/p>\n\n\n\n

      <\/div>\n\n\n\n
      Localizaci\u00f3n de estilos<\/h6>\n\n\n\n

      Incluimos algunas instrucciones b\u00e1sicas para localizar las clases de campo, as\u00ed como los estilos ya existentes y c\u00f3mo a\u00f1adir nuevos estilos propios. Todas las instrucciones aqu\u00ed son para el navegador de escritorio Chrome. La mayor\u00eda de los otros navegadores principales tienen herramientas similares que se pueden utilizar para lograr los mismos 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. Cuando se abra el inspector, ver\u00e1 varias secciones (su dise\u00f1o puede ser diferente).

      \"\"

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

      I.<\/strong>\u00a0El c\u00f3digo HTML del elemento sobre el que ha hecho clic con el bot\u00f3n derecho aparecer\u00e1 resaltado en el inspector.
      <\/p>\n\n\n\n

      II.<\/strong>\u00a0Los estilos que est\u00e9n activos en ese elemento se mostrar\u00e1n en colores brillantes.<\/p>\n\n\n\n

      Las reglas CSS se dividen en tres secciones.<\/p>\n\n\n\n

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

      Cada regla comienza con el selector al que se aplica. Para m\u00e1s informaci\u00f3n, consulte este art\u00edculo sobre Selectores CSS<\/a>.<\/p>\n\n\n\n

      - Los tipos de elementos como input, p, button aparecer\u00e1n en texto plano. Los estilos aplicados a un tipo de elemento se aplicar\u00e1n a cualquier elemento coincidente de la p\u00e1gina.<\/p>\n\n\n\n

      - Las clases ir\u00e1n precedidas de un punto (.). Los estilos aplicados a las clases tambi\u00e9n se aplicar\u00e1n a cualquier elemento que tenga esa clase a\u00f1adida.<\/p>\n\n\n\n

      - Los ID ir\u00e1n precedidos de una almohadilla (#). El ID de cada elemento debe ser \u00fanico, por lo que los estilos aplicados a un ID s\u00f3lo se aplicar\u00e1n a esa instancia de ese elemento.<\/p>\n\n\n\n

      A continuaci\u00f3n, entre llaves, ver\u00e1 el tipo de estilo seguido de dos puntos y el valor del estilo.<\/p>\n\n\n\n

      Por ejemplo, todos los elementos de entrada de esta p\u00e1gina tendr\u00e1n un borde de 2 p\u00edxeles de ancho, s\u00f3lido, con un color hexadecimal de #d4d0ba.<\/p>\n\n\n\n

      En la parte superior derecha de esta secci\u00f3n, ver\u00e1 el archivo o la ubicaci\u00f3n desde la que se carg\u00f3 el CSS.

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

      III.<\/strong>\u00a0Los estilos pueden ser anulados por reglas CSS cargadas posteriormente en la p\u00e1gina. Los estilos que se hubieran aplicado, pero que han sido anulados, aparecer\u00e1n tachados.

      <\/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
      Cambio de estilos<\/h6>\n\n\n\n

      Una vez localizado, puede a\u00f1adir cualquier regla de estilo CSS a la casilla CSS adicional de su tema situada en WordPress > Apariencia > Personalizar > CSS adicional. Las reglas que se enumeran a continuaci\u00f3n cubrir\u00e1n la mayor\u00eda de las diferencias de estilo que podr\u00eda ver entre los campos alojados y los dem\u00e1s campos de su p\u00e1gina de pago. Una vez que haya localizado el valor de estilo para el tipo de elemento que desea imitar, puede utilizarlo para ajustar las reglas siguientes de modo que los campos alojados coincidan mejor con los dem\u00e1s estilos de su p\u00e1gina. <\/p>\n\n\n\n

      <\/div>\n\n\n\n
      Tama\u00f1o del 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 la altura de un elemento. Puede aparecer en varios tipos de medidas. Consulte el art\u00edculo enlazado para obtener m\u00e1s informaci\u00f3n.<\/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
      Anchura<\/a> - Determina la anchura de un elemento. Puede aparecer en varios tipos de medidas.  Consulte el art\u00edculo enlazado para obtener m\u00e1s informaci\u00f3n.  Dado que los campos de entrada contienen diferentes tipos de informaci\u00f3n, es posible que desee que tengan diferentes anchuras, por lo que las reglas para la anchura se dirigen a cada tipo de campo individualmente.<\/p>\n\n\n\n
      Esto establecer\u00e1 el ancho de los campos de tarjeta de cr\u00e9dito como un porcentaje del elemento padre (contenedor de Detalles de Facturaci\u00f3n). Puede establecer el valor m\u00e1s alto o m\u00e1s bajo para que el campo sea m\u00e1s ancho o m\u00e1s estrecho, o puede cambiar el tipo de medida utilizada.<\/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
      Esta regla establece la anchura de los campos de texto CVV y Caducidad como porcentaje del elemento padre (contenedor Detalles de facturaci\u00f3n).<\/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
      Esto establecer\u00e1 el con para los selectores desplegables de mes y a\u00f1o de caducidad de la tarjeta de cr\u00e9dito en Braintree como un porcentaje del elemento padre (contenedor Detalles de facturaci\u00f3n).<\/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
      Frontera<\/strong><\/h6>\n\n\n\n
      MemberMouse incluye un borde b\u00e1sico para algunos campos. Puede modificar la regla siguiente con valores de cualquiera de los campos de entrada de texto de MemberMouse para cambiar los campos alojados y adaptarlos a su tema.<\/p>\n\n\n\n
      Frontera<\/a> - La propiedad border es una abreviatura de las propiedades border-width, border-style y border-color.  Si tu tema las lista por separado, puedes combinarlas en una \u00fanica regla para aplicarlas a los campos alojados.<\/p>\n\n\n\n
      Esta regla aplicar\u00e1 un borde punteado de 2 p\u00edxeles con un valor de color 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
      Estilismo de cajas<\/strong><\/h6>\n\n\n\n
      La hoja de estilos del navegador para las propiedades border-radius y box-shadow tienden a cambiar entre dispositivos de escritorio y m\u00f3viles.  Es posible que desee ver su p\u00e1gina en diferentes navegadores y dispositivos para decidir si desea establecer estos estilos expl\u00edcitamente para que coincida con su tema (si est\u00e1 presente), o uno de los tipos de navegador.<\/p>\n\n\n\n
      Puede utilizar el siguiente CSS en el cuadro CSS adicional de su tema (WordPress > Apariencia > Personalizar > CSS adicional) para establecer estas caracter\u00edsticas en la entrada MemberMouse y en los campos de pago incrustados. Para obtener instrucciones detalladas sobre cualquier propiedad, haga clic en el nombre de la propiedad vinculada.<\/p>\n\n\n\n
      Radio del borde<\/a> - establece la curva de las esquinas del campo. S\u00f3lo se aplica a campos con bordes establecidos.<\/p>\n\n\n\n
      Para bordes redondeados.  Aumente el tama\u00f1o de p\u00edxel para curvas m\u00e1s grandes, disminuya para esquinas m\u00e1s puntiagudas.:<\/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 eliminar el elemento de borde en todos los 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
      Caja Sombra<\/a> - A\u00f1ade una sombra a un elemento.  Puede establecerse en cualquier direcci\u00f3n, dentro o fuera.<\/p>\n\n\n\n
      Esto crear\u00e1 una ligera sombra gris oscura en la parte inferior y ligeramente a la derecha. \u00a0<\/p>\n\n\n\n
      El primer n\u00famero es la alineaci\u00f3n vertical.  Haga el n\u00famero m\u00e1s alto para mover el m\u00e1s lejos a la derecha, o negativo a la izquierda. \u00a0<\/p>\n\n\n\n
      El segundo n\u00famero es la alineaci\u00f3n horizontal. Los n\u00fameros m\u00e1s altos lo mueven m\u00e1s abajo, los n\u00fameros negativos lo mueven por encima de la caja. \u00a0<\/p>\n\n\n\n
      El tercer n\u00famero es el desenfoque. Los n\u00fameros m\u00e1s altos har\u00e1n que la sombra parezca menos n\u00edtida. \u00a0<\/p>\n\n\n\n
      El \u00faltimo conjunto es el color.  Puede utilizar el\u00a0Colores 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
      Esto eliminar\u00e1 la sombra de todos los 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
      Fuentes<\/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
      Fuente<\/a> - Establece propiedades como el peso, el tama\u00f1o y la familia de la fuente.<\/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 MM 2.4.0+ , 3D Secure 2.0 est\u00e1 activado para Stripe y Braintree por defecto. Para aquellos comerciantes que se encuentren en el Espacio Econ\u00f3mico Europeo (EEE) y que vendan...<\/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