La autenticación 3DS (3-D Secure) es un protocolo de seguridad para pagos en línea con tarjeta de crédito o débito que solicita la introducción de una contraseña o un código enviado por SMS o generado desde la aplicación de tu banco para validar la transacción.

Realizar la validación 3DS

Para realizar la validación 3DS necesitarás seguir estos pasos:

Identificar si un pago requiere validación 3DS
Si lo requiere, implementar un iFrame
Escuchar la respuesta del iFrame
Consultar el resultado de la validación a través del endpoint GET /payments/{payment_id}

Identificar si un pago requiere validación 3DS

Cuando un cargo requiere la autenticación 3DS, dentro de la respuesta del endpoint de POST /payments recibirás un status "pending" con un código "PE-3DS01" y un mensaje "Waiting 3DS" de esta forma:

"status": "pending",
"status_detail": {
  "code": "PE-3DS01",
  "message": "Waiting 3DS"
}

Adicionalmente, también recibirás una URL dentro del parámetro "pending_action"; esta URL te servirá para redirigir a tus clientes para que puedan realizar la autenticación 3DS:

"pending_action": {
        "type": "open_modal",
        "url": "https://3ds.payclip.com?transaction=1234"
    }

Puedes ver la respuesta completa aquí.

Implementar iFrame

Debes tomar el parámetro {pending_action.url} y abrirlo dentro de un iFrame, a continuación se muestran dos formas de hacerlo:

<iframe      
      title="cybersource3Ds"
      src={pending_action.url}
      data-testid="cybersource3Ds-iframe"
      style="width: 900px;height: 900px"
 />

// Función para mostrar el iFrame de 3DS
      function show3DSIframe(url, paymentId) {
        const iframeContainer = document.getElementById("3ds-iframe-container");
        iframeContainer.innerHTML = 
          `<iframe
                  title="cybersource3Ds" 
                  src="${url}" data-testid="cybersource3Ds-iframe"
                  style="width: 100vw;height: 100vh;border:none;position:fixed;top:0;left:0;z-index:1000;">
           </iframe>`;
        iframeContainer.style.display = "block";

Escuchar respuesta

Agrega un listener para saber cuando la autenticación 3DS se haya completado y obtener el payment id:

window.addEventListener("message", (event) => {
          if (event.origin !== new URL(url).origin) {
            return; // Ignorar mensajes de otros orígenes
          }
          if (event.data?.paymentId) {
            const returnedPaymentId = event.data.paymentId;
            console.log("Returned Payment ID:", returnedPaymentId);

Consultar el resultado de la validación 3DS

Por último, consulta el endpoint GET /payments/{payment_id} usando el payment id obtenido en el paso anterior para consultar el status del pago después de haber realizado la validación 3DS:

curl --location 'https://api.payclip.com/payments/{payment_id}' \
--header 'Authorization: Bearer tu-api-key'//Aquí va el prefijo Bearer seguido de tu API Key

Validación exitosa

Validación fallida