Home

Descripción general

Pago JavaScript con autenticación 3DS 2.0

Descripcción General#

La integración de la interfaz de pago JavaScript con autenticación 3DS 2.0 proporciona una manera eficiente de recopilar los datos de la tarjeta del comprador y realizar la autenticación y autorización de pago a través de Carat, directamente en la página del comerciante. Este enfoque libera a la tienda de la manipulación de datos sensibles, simplificando el proceso de autenticación, autorización y transfiriendo esa responsabilidad al entorno certificado PCI DSS de Carat.

Esta interfaz es altamente recomendada para los comerciantes que buscan tener su propio proceso de pago con autenticación 3DS, garantizando simultáneamente un alto estándar de seguridad.

Esta solución está integrada con la interfaz de pago REST. Obtenga más información sobre Pago REST.

Y para obtener más información sobre estas denominaciones (Bin, Software Express, Carat, e-Sitef) Más información

Propósito de la autenticación 3DS 2.0#

La implementación del 3DS 2.0 tiene como objetivo principal fortalecer la seguridad de las transacciones en línea, especialmente aquellas que involucran tarjetas de crédito y débito. Al incorporar el 3DS 2.0 en la interfaz de pago JavaScript, el proceso de autenticación se vuelve más fácil de implementar en la página del comerciante.

Ventajas de la autenticación con 3DS 2.0#

La principal ventaja es el cambio de responsabilidad (Liability Shift) de reembolsos fraudulentos. Si la transacción se autentica, la responsabilidad se traslada del Establecimiento al Banco Emisor, es decir, en transacciones autenticadas, el Establecimiento no recibe contracargos por razones de fraude, lo que mitiga las pérdidas financieras. Además, hay varios otros beneficios como:

  • Amplio soporte para dispositivos y autenticaciones;
  • Optimización en el flujo de pago;
  • Toma de decisiones más inteligente basada en análisis de riesgos;
  • Tasas de autorización más altas y menos falsos positivos;

JavaScript (JS), Hojas de Estilo en Cascada (CSS) y Etiqueta HTML (Hypertext Markup Language)#

En la integración del pago JavaScript con autenticación 3DS 2.0, es crucial incluir dos archivos en la página de pago: un script JS y una hoja de estilo CSS. Estos dos archivos son esenciales para garantizar que el pago con autenticación 3DS 2.0 funcione correctamente. Además de estos archivos, es necesario agregar una etiqueta HTML a la página de pago, donde el comprador ingresa la información de la tarjeta. Esta etiqueta HTML se utilizará en caso de que se produzca el flujo del método 3DS.

Script JS#

A continuación, se encuentran las URL de prueba y producción para descargar:

URL para el entorno de producción:

https://esitef.softwareexpress.com.br/js/esitefauthenticatepayment-1.0.min.js

URL para el entorno de Homologación:

https://esitef-homologacao.softwareexpress.com.br/js/esitefauthenticatepayment-1.0.min.js

Hoja de estilo CSS#

A continuación se encuentran las URL de prueba y producción para descargar:

URL para el entorno de producción:

https://esitef.softwareexpress.com.br/css/v2/threeds.css

URL para el entorno de Homologación:

https://esitef-homologacao.softwareexpress.com.br/css/v2/threeds.css

Tag div#

A continuación se encuentra la etiqueta div obligatoria para el funcionamiento del método 3DS.

<div id="divThreeDsMethodData"></div>

Flujo#

Descripción del flujo:

  • 1. El cliente envía los datos de su compra y continúa hacia la pantalla de pago.
    • 1.1. La tienda virtual crea una transacción de pago en Carat, enviando adicionalmente el parámetro payment_js con el valor true. Más información.
    • 1.2. Carat devuelve a la tienda un NIT y un Pay Token.
    • 1.3. La tienda muestra al comprador su página de pago que contiene el script de Carat y los campos de datos de la tarjeta con las clases especificadas en Campos com dados de cartão.
  • 2. El cliente completa los datos de su tarjeta. Después de completar la tarjeta, es necesario crear un evento para llamar a la función startThreeDs del script de Carat, pasando como parámetros el NIT, el Pay Token, el código de la tienda, el código del autorizador en Carat y las funciones de callback (procedimientos del comerciante que se llamarán después de la función startThreeDs de Carat).
    • 2.1. Carat devuelve el resultado de la función startThreeDs.
    • 2.2. El retorno de la función startThreeDs puede o no incluir una solicitud para el método 3DS, permitiendo que el ACS (Access Control Server) recolecte automáticamente la información del dispositivo del titular de la tarjeta. Es importante destacar que este proceso ocurre automáticamente en el navegador del cliente, simplificando la integración.
  • 3. Se activa el callback del comerciante, que puede contener la función onSuccess en caso de éxito en la ejecución de la función startThreeDs. onFailure se activa en caso de que la tarjeta del cliente no esté dentro del alcance de las tarjetas para autenticación 3DS 2.0, y onInvalid se activa ante cualquier error ocurrido en la solicitud de Carat durante la ejecución de la función startThreeDs.
  • 4. Después de completar los datos restantes relacionados con la compra y hacer clic en "pagar", este clic deberá activar la función esitefDoPayment del script de Carat. Los parámetros a pasar incluyen el NIT, el Pay Token, el código de la tienda, el tipo de autenticación en 3DS 2.0 y las funciones de callback (procedimientos específicos del comerciante que se llamarán después de la conclusión del pago por Carat).
    • 4.1. O Carat devuelve el resultado de la función esitefDoPayment.
    • 4.2. El resultado de la función esitefDoPayment puede o no involucrar un desafío, que representa una forma de autenticación 3D-Secure. En este escenario, el titular de la tarjeta es redirigido a una página o aplicación para proporcionar información adicional o ingresar un código de seguridad para confirmar la transacción. Es importante destacar que este proceso ocurre automáticamente en el navegador del cliente, simplificando la integración.
  • 5. El callback del comerciante se activa, pudiendo contener la función onSuccess, la cual se activa en caso de éxito en el pago, permitiendo redirigir al comprador a una página de éxito. La función onFailure se activa cuando el pago es rechazado, permitiendo redirigir al comprador a una página de fracaso. La función onProcessing se activa después de un desafío, pudiendo redirigir al comprador a una página de procesamiento, mientras que onInvalid se activa en caso de cualquier error durante la solicitud de Carat durante la ejecución de la función esitefDoPayment.