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?

Esto es obligatorio para los clientes del Espacio Económico Europeo (EEE) con el fin de cumplir con el requisito de autenticación fuerte del cliente (SCA) de la PSD2. Si está intentando realizar compras únicas o iniciales de EEE a EEE a través de su proceso de pago y esta opción no está activada, es probable que el banco de su cliente no autorice la transacción.

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.  Seleccione la casilla situada junto a "Activar elementos de Stripe".
   
   
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.  Seleccione la casilla de verificación situada junto a "Activar 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

Dado que los campos 3D Secure se incrustan en la página de pago a través de iFrame del proveedor de pagos elegido, los estilos CSS del sitio (fuente, altura y anchura del campo, etc.) no se aplicarán a estos campos. En su lugar, cualquier estilo debe aplicarse a los contenedores (divs) en los que se carga cada campo.  

MemberMouse ha aplicado algunas CSS para que el estilo de los campos sea lo más compatible posible con múltiples temas y navegadores, pero habrá diferencias. Por lo tanto, le sugerimos que revise los formularios de pago de su sitio y ajuste los estilos que considere necesarios.  

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. En la ventana de su navegador, haga clic con el botón derecho del ratón en el elemento de la página de pago para el que desea localizar el estilo y haga clic en "Inspeccionar" en la parte inferior del menú para abrir el Inspector. El campo de correo electrónico funciona bien para los estilos de campo de texto.

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. Esta sección muestra los estilos computados. Es muy detallada, por lo que puede resultar difícil extraer lo que se busca. Pero, si no puedes encontrar el estilo aplicado en la primera sección, esta es otra forma de localizar el estilo activo para un elemento.

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 ha incluido CSS para que la altura y la anchura coincidan lo más posible con el tamaño del campo en la mayoría de los temas, pero si el tamaño no se ajusta a su tema, puede ajustarlo mediante las reglas que se indican a continuación.

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.

Esto fijará la altura de los campos en 2,5 veces el tamaño de la fuente de la página, que se utiliza como unidad básica de medida en CSS. Puede establecer el valor más alto o más bajo para que el campo sea más alto o más bajo, o puede cambiar el tipo de medida utilizada.

.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 para obtener información sobre más opciones. Añadir 'inset' después del conjunto de colores hará que la sombra aparezca dentro de la caja en lugar de fuera.

.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

Por su naturaleza, los estilos de fuente no pueden aplicarse a los contenedores div, lo que significa que la familia de fuentes, el tamaño y otras características no pueden alterarse en los campos Stripe/Braintree. Tanto los campos de Stripe como los de Braintree extraen los valores de las propiedades del navegador en el que se están mostrando, y estas propiedades tienden a ser bastante consistentes. Si la fuente de su tema es muy diferente, para que la fuente de su página de pago coincida con la de todas las demás, puede considerar añadir reglas personalizadas para cambiar la fuente de su tema en esa página para que coincida mejor con los campos incrustados.

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

Esto hará coincidir la fuente de su página MemberMouse Checkout con las propiedades promedio del navegador. El primer valor es el peso, números mayores harán la fuente más gruesa. El segundo es el tamaño, y el tercero es la familia de fuentes.:

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