Culqi 3DS - Configuración

Culqi 3DS versión 1

El método más simple para capturar los datos de tarjeta.

Incluye el siguiente script en tu tienda virtual y configura tu llave pública. Puedes incluirlo antes del cierre de la etiqueta “body”:

<body>
  <script src="https://3ds.culqi.com" defer></script>
  <script>
    Culqi3DS.publicKey = 'Aquí inserta tu llave pública';
  </script>
</body>

Paso 1. Cargo y tarjeta

Ingresar la configuración inicial charge - card como se muestra a continuación:

<script>
Culqi3DS.settings = {
  charge: {
      totalAmount: 300,
      returnUrl: "http://localhost:3000/checkout",
    },
    card: {
      email: "example@yopmail.com",
    },
};
</script>

Parámetro	Descripción
charge object (Charge)	Permite definir la información del cargo que se está realizando.
card object (Card)	Permite definir los datos de la tarjeta del usuario.

Objeto Charge

Parámetro	Descripción
totalAmount number	Campo requerido que indica el monto total del cargo, valor positivo entre 300 - 999900.
returnUrl string	Campo requerido que indica la URL del sitio web donde se invoca la autenticación 3DS.
currency string	Campo que indica el tipo de moneda del cargo a realizarse Por defecto: PEN.

Objeto Card

Parámetro	Descripción
email string	Campo requerido que indica el correo electrónico del dueño de la tarjeta.
cardNumber string	Campo que indica el nro. de tarjeta y sirve para generar el token de Culqi.
cvv string	Campo que indica el código de seguridad de la tarjeta y sirve para generar el token de Culqi.
expirationYear string	Campo que indica el año de expiración de la tarjeta y sirve para generar el token de Culqi.
expirationMonth string	Campo que indica el mes de expiración de la tarjeta y sirve para generar el token de Culqi.

Paso 2. Personaliza Culqi3DS (Opcional)

Personaliza modal de error, asocia una acción al cerrar el modal y si quieres o no mostrar el componente loading con los parámetros de configuración de culqi3DS.options.

Configuración básica

<script>
Culqi3DS.options = {
    showModal: true,
    showLoading: true,
    showIcon: true,
    closeModalAction: function(){  /* ... */  },
    style: {
        btnColor: "#3c1361",
        btnTextColor: "#FFFFFF",
    },
};
</script>

Parámetro	Descripción
showModal boolean	Campo que indica si se va a mostrar el modal de error.
showIcon boolean	Campo que indica si se mostrara el ícono por defecto del modal de error.
showLoading boolean	Campo que indica si se va a mostrar el loader por defecto.
closeModalAction function	Campo que indica la función que se va a llamar cuando se de click al botón aceptar del modal.
style object (Style)	Campo que permite personalizar los colores del modal para la autenticación 3DS.

Objeto Style

Parámetro	Descripción
btnColor string	Campo que indica el color del botón para el modal Por defecto: #00A19B.
btnTextColor string	Campo que indica el color de texto del botón para el modal Por defecto: #FFFFFF.

Paso 3. Obtención de resultado de la autenticación 3DS

Para poder obtener la respuesta del flujo de la autenticación 3DS se necesita implementar un eventListener al origin actual que invoca la librería. Te lo mostramos a continuación:

window.addEventListener( "message", function (event) {
    if (event.origin === window.location.origin) {
        const response = event.data;
        if (response.loading) {
          /* Mostrar custom loading */
        } else {
          /* Ocultar custom loading */
        }

        if (response.parameters3DS) {
           /*
              La autenticación 3DS se completó exitosamente
              response.parameters3DS -> { xid: "0201848b8c23f6b0196cfd", ... }
            */
        }

        if (response.error){
           /*
              Hubo un error en la autenticación 3DS
              response.error -> “No se pudo autenticar la transacción”
            */
        }
    }
}, false);

Parámetro	Descripción
parameters3DS object (Parameters3DS)	Campo que contiene los parámetros 3DS que da como resultado la autenticación 3DS.
error string	Texto del error en la autenticación 3DS.
loading boolean	Valor que indica cuando se debe mostrar el custom loading mientras se procesa el flujo 3DS.

Objeto Parameters3DS

Parámetro	Descripción
eci string	Identificador único.
xid string	Identificador único codificado en Base64.
cavv string	Identificador único codificado en Base64.
protocolVersion string	Versión de 3DS que se empleó para la autenticación, por ejemplo: 1.0.2 - 2.1.0.
directoryServerTransactionId string	Identificador único de la transacción que solo cuenta la versión 2.x.x.