Iniciar la autenticación 3DS

Función startThreeDs en el JavaScript de Carat.#

Esta llamada es esencial para activar la autenticación 3DS 2.0, verificar si el número de tarjeta del titular está dentro del rango de tarjetas admitidas para la autenticación y, cuando sea necesario, iniciar el flujo de 3DS Methods para capturar información adicional del navegador, con el fin de facilitar la toma de decisiones basada en riesgos (RBA-Risk Based Analysis), aumentando así las posibilidades de obtener una autenticación sin desafíos.

Para utilizar la función startThreeDs, simplemente agregue el archivo de pago JavaScript con autenticación 3DS 2.0 y la etiqueta div en la página de pago. Tanto el archivo como la etiqueta div son esenciales para asegurar que la función startThreeDs funcione correctamente.

Script JS#

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

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

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

Campo del número de tarjeta.#

Además de los elementos mencionados anteriormente, es crucial que el campo del número de tarjeta tenga la clase especificada a continuación:

Parámetro	Descripción	Formato	Obligatorio
`esitef-cardnumber`	Número de tarjeta del comprador (PAN).	< 19 N	SÍ

Ejemplo

<input type="number" id="card-number" maxlength="16"  class="esitef-cardnumber">

Llamando a la función startThreeDS de JavaScript de Carat.#

Cuando el comprador ingresa el número de tarjeta en la pantalla, es posible crear un evento JavaScript o un botón que active la función startThreeDS. La implementación del evento o botón no sigue una regla específica, siempre y cuando se active después de ingresar el número de tarjeta. Al llamar a la función startThreeDS, es fundamental proporcionar una solicitud con los siguientes campos como argumento:

Parámetro	Descripción	Formato	Obligatorio
`nit`	Identificador de transacción en Carat. Campo `nit` recibido en la etapa de creación de la transacción.	= 64 AN	SÍ
`payToken`	Campo `pay_token` recibido en la etapa de creación de la transacción.	= 66 AN	SÍ
`merchantId`	Código de tienda en Carat. Los códigos de producción y certificación serán diferentes.	< 15 N	SÍ
`locale`	Lenguaje de los mensajes devueltos en errores de validación (callback "onInvalid"). Puede recibir los siguientes valores: `pt` - Portugués `en` - Inglés `es` - Español En caso de que el locale no sea enviado, se utilizará `pt`.	= 2 A	NO
`authorizerId`	Código de la autorizadora en Carat. Más información.	< 3 N	NO
`onSuccess`	Función de devolución de llamada que se activará después de una llamada exitosa a la función startThreeDS en Carat. Esta función recibe como argumento la respuesta de la función startThreeDS descrita en - Respuesta de las devoluciones de llamada de éxito y fracaso.	F	SÍ
`onFailure`	Función de devolución de llamada que se activará después de una llamada fallida a la función startThreeDS en Carat. Esta función recibe como argumento la respuesta de la función startThreeDS descrita en - Respuesta de las devoluciones de llamada de éxito y fracaso.	F	SÍ
`onInvalid`	Función de devolución de llamada que se activará después de un error de validación en JavaScript. Esta función recibe como argumento la lista de errores descrita en - Respuesta de la devolución de llamada de error de validación.	F	SÍ

Respuesta de las devoluciones de llamada exitosas y fallidas.#

Las funciones de devolución de llamada onSuccess y onFailure reciben como argumento un objeto que contiene información sobre la respuesta de la función startThreeDs. A continuación se describen estos campos:

Parámetro	Descripción	Formato
`code`	Código de respuesta de Carat. Cualquier código diferente de 0 (cero) indica un fallo. Para obtener más información, consulte los Códigos de Respuesta.	< 4 N
`message`	Mensaje de respuesta de Carat.	< 500 AN
`authorizer_id`	Código de la entidad autorizadora en Carat. Más información. `(só em caso de sucesso)`.	< 3 N

Respuesta de la devolución de llamada de error de validación.#

La función de devolución de llamada onInvalid recibe como argumento una lista de objetos de error de validación, que contienen los campos a continuación:

Parámetro	Descripción	Formato
`field`	Nombre del campo con error.	< 30 AN
`cause`	Mensaje de error.	<100 AN

Ejemplo#

A continuación se muestra un ejemplo de una página integrada con el pago JavaScript de Carat:

Para usar este ejemplo, no olvides definir la variable {{url}} con el valor.
esitef-homologacao.softwareexpress.com.br

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="https://{{url}}/js/esitefauthenticatepayment-1.0.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('card-number').addEventListener('input', function() {
                var valor = this.value;

                valor = valor.replace(/\s/g, '');

                if (valor.length === 16) {
                    threedMethod();
                }
            });
        });

        function threedMethod() {
            var request = {
                onSuccess: function(response) {
                    console.log(response.code);
                    console.log(response.message);
                    console.log(response.authorizer_id);
                },
                onFailure: function(response) {
                    console.log(response.code);
                    console.log(response.message);
                },
                onInvalid: function(errors) {
                    for (var i = 0; i < errors.length; i++) {
                        console.log(errors[i].field);
                        console.log(errors[i].cause);
                    }
                },
                nit: '183479a213bcd653909a959907817f452a7e36846bd922b6c891804ae4118b16',
                payToken: '955d19823f1e3f74e4c6d57e895ed32473d929669ea1ef5fc0e18783265c34e301',
                merchantId: 'XXXXXXXXXXXX',
                locale: 'pt',
                authorizerId: '2'
            };
            startThreeDs(request);
        }
    </script>
  </head>

  <body>
    <form method="POST">
        <input type="text" id="card-number" maxlength="16"  class="esitef-cardnumber">
    </form>
  </body>
</html>