Activación del proceso de pago 3D Secure para la autenticación fuerte de clientes (SCA)

Para MM 2.4.0+ , 3D Secure 2.0 está activado para Stripe y Braintree por defecto.

Para los comerciantes situados en el Espacio Económico Europeo (EEE) y que venden a clientes situados también en el EEE, esto le permite cumplir la autenticación fuerte de clientes (SCA) establecido por la Directiva revisada sobre servicios de pago (DSP2). Esto entrará 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.

¿Por qué habilitar un sistema de pago 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.

Cuando está activada, se pedirá al cliente que complete un paso adicional en el proceso de pago en el que su banco le pedirá que proporcione información adicional (como un código de un solo uso enviado a su teléfono) antes de que se procese el pago. Los campos de tarjeta de crédito para introducir la información de pago aparecen en la página de pago, pero están incrustados desde Stripe o Braintree (a través de iFrame). Como resultado, los comerciantes pueden optar a un PCI-DSS SAQ menos riguroso activando la comprobación 3D Secure (SAQ A-EP/A frente a SAQ D).

Para los comerciantes situados fuera del EEE, también les beneficiará activar esta función 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 activando la comprobación 3D Secure (SAQ A-EP/A frente a SAQ D).

Cabe señalar que las suscripciones y transacciones periódicas fijas están exentas de la normativa SCA. Mientras el importe del pago siga siendo el mismo, las transacciones futuras no necesitarán SCA. Si el importe del pago cambia, entonces será necesaria la autenticación SCA adicional. Esto también se aplica retroactivamente a cualquier suscripción recurrente que se haya creado antes del 14 de septiembre de 2019.

Otras exenciones destacables son : Transacciones iniciadas por el comerciante (pagos realizados con tarjetas guardadas) y Transacciones inferiores a 30 euros

IMPORTANTE: Stripe.js y Stripe Elements sólo se pueden utilizar en el proceso de pago. Cualquier transacción de API no se contabiliza y esta práctica da lugar a mayores requisitos SAQ de cumplimiento de PCI. Consulte el Llamada a la API CreateMember para más información.

Activación de los elementos de Stripe (Raya)

Siga este proceso si ya tiene Stripe configurado en su sitio y simplemente desea habilitar los elementos de Stripe. 

Si necesita configurar Stripe, consulte este artículo para obtener instrucciones completas de configuración.

1. En el panel de control de WordPress, vaya a MemberMouse > Configuración de pagos y haga clic en el botón Formas de pago pestaña. En Forma de pago in situseleccione Raya. Esto mostrará las opciones de configuración de Stripe.
   
   
2.  Select the checkbox next to ‘Enable Stripe Elements’.
   
   
3. Haga clic en el botón Guardar formas de pago botón.

Activación de 3D Secure 2.0 (Braintree)

Siga este proceso si ya tiene Braintree configurado en su sitio y simplemente desea activar 3D Secure 2. 

Si necesita configurar Braintree, consulte este artículo sobre la configuración de Braintree.

1. En el panel de control de WordPress, vaya a MemberMouse > Configuración de pagos y haga clic en el botón Formas de pago ficha.
   
   
2. En Forma de pago in situseleccione Braintree. Aparecerán las opciones de configuración de Braintree.
   
   
3.  Select the checkbox next to ‘Enable Hosted Fields / 3D Secure 2’.
   
   
   
   
4. Haga clic en el botón Guardar formas de pago botón

Probar el sistema de pago 3D Secure

Tanto Stripe como Braintree han creado datos de prueba específicos para probar pagos en los que se requiere autenticación fuerte de cliente. Puede encontrar esa información, así como detalles generales sobre el proceso de prueba para cada proveedor de pago, en los siguientes artículos.

Pruebas con Stripe

Pruebas con Braintree

Formatear la caja

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.  

Hemos incluido algunas instrucciones básicas para ayudarle a ajustar aquellos estilos que pueden ajustarse y que serán diferentes en todas las cajas. Si necesita ayuda con otros ajustes y no dispone de un diseñador o desarrollador, tenemos una lista de Contratistas cualificados que tengan experiencia trabajando con MemberMouse.

Localización de estilos

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

I. El código HTML del elemento sobre el que ha hecho clic con el botón derecho aparecerá resaltado en el inspector.

II. Los estilos que estén activos en ese elemento se mostrarán en colores brillantes.

Las reglas CSS se dividen en tres secciones.

selector {style:value}

Cada regla comienza con el selector al que se aplica. Para más información, consulte este artículo sobre Selectores CSS.

- Los tipos de elementos como input, p, button aparecerán en texto plano. Los estilos aplicados a un tipo de elemento se aplicarán a cualquier elemento coincidente de la página.

- Las clases irán precedidas de un punto (.). Los estilos aplicados a las clases también se aplicarán a cualquier elemento que tenga esa clase añadida.

- Los ID irán precedidos de una almohadilla (#). El ID de cada elemento debe ser único, por lo que los estilos aplicados a un ID sólo se aplicarán a esa instancia de ese elemento.

A continuación, entre llaves, verá el tipo de estilo seguido de dos puntos y el valor del estilo.

Por ejemplo, todos los elementos de entrada de esta página tendrán un borde de 2 píxeles de ancho, sólido, con un color hexadecimal de #d4d0ba.

En la parte superior derecha de esta sección, verá el archivo o la ubicación desde la que se cargó el CSS.

III. Los estilos pueden ser anulados por reglas CSS cargadas posteriormente en la página. Los estilos que se hubieran aplicado, pero que han sido anulados, aparecerán tachados.

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.

Cambio de estilos

Una vez localizado, puede añadir 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ón cubrirán la mayoría de las diferencias de estilo que podría ver entre los campos alojados y los demás campos de su página 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ás estilos de su página. 

Tamaño del 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 la altura de un elemento. Puede aparecer en varios tipos de medidas. Consulte el artículo enlazado para obtener más informació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.

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

Anchura - Determina la anchura de un elemento. Puede aparecer en varios tipos de medidas. Consulte el artículo enlazado para obtener más información. Dado que los campos de entrada contienen diferentes tipos de información, es posible que desee que tengan diferentes anchuras, por lo que las reglas para la anchura se dirigen a cada tipo de campo individualmente.

Esto establecerá el ancho de los campos de tarjeta de crédito como un porcentaje del elemento padre (contenedor de Detalles de Facturación). Puede establecer el valor más alto o más bajo para que el campo sea más ancho o más estrecho, o puede cambiar el tipo de medida utilizada.

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

Esta regla establece la anchura de los campos de texto CVV y Caducidad como porcentaje del elemento padre (contenedor Detalles de facturación).

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

Esto establecerá el con para los selectores desplegables de mes y año de caducidad de la tarjeta de crédito en Braintree como un porcentaje del elemento padre (contenedor Detalles de facturación).

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

Frontera

MemberMouse incluye un borde básico 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.

Frontera - 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 única regla para aplicarlas a los campos alojados.

Esta regla aplicará un borde punteado de 2 píxeles con un valor de color de #d55c9f.

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

Estilismo de cajas

La hoja de estilos del navegador para las propiedades border-radius y box-shadow tienden a cambiar entre dispositivos de escritorio y móviles. Es posible que desee ver su página en diferentes navegadores y dispositivos para decidir si desea establecer estos estilos explícitamente para que coincida con su tema (si está presente), o uno de los tipos de navegador.

Puede utilizar el siguiente CSS en el cuadro CSS adicional de su tema (WordPress > Apariencia > Personalizar > CSS adicional) para establecer estas características 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.

Radio del borde - establece la curva de las esquinas del campo. Sólo se aplica a campos con bordes establecidos.

Para bordes redondeados. Aumente el tamaño de píxel para curvas más grandes, disminuya para esquinas más puntiagudas.:

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

Para eliminar el elemento de borde en todos los campos:

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

Caja Sombra - Añade una sombra a un elemento. Puede establecerse en cualquier dirección, dentro o fuera.

Esto creará una ligera sombra gris oscura en la parte inferior y ligeramente a la derecha.  

El primer número es la alineación vertical. Haga el número más alto para mover el más lejos a la derecha, o negativo a la izquierda.  

El segundo número es la alineación horizontal. Los números más altos lo mueven más abajo, los números negativos lo mueven por encima de la caja.  

El tercer número es el desenfoque. Los números más altos harán que la sombra parezca menos nítida.  

El último conjunto es el color. Puede utilizar el Colores 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);}

Esto eliminará la sombra de todos los campos

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

Fuentes

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.

Fuente - Establece propiedades como el peso, el tamaño y la familia de la fuente.

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;}