Inicio
Documentación
Recursos
Certificaciones
Comunidad
Cómo integrar 3DS con Checkout Bricks - Checkout Bricks - Mercado Pago Developers

Búsqueda inteligente powered by OpenAI 

Cómo integrar 3DS con Checkout Bricks

En esta documentación encontrarás toda la información necesaria para realizar la integración con 3DS con Checkout Bricks. Para obtener más información sobre cómo funciona este tipo de autenticación, consulte 3DS 2.0.

Importante
Para integrarse con 3DS, se deben cumplir ciertos requisitos. Antes de continuar con los siguientes pasos, revise la sección Requisitos previos y asegúrese de que se cumplan todos.

Integrar con 3DS

La integración con 3DS da como resultado un proceso de autenticación que se realiza a través de dos flujos: con o sin Challenge, siendo Challenge los pasos adicionales que debe realizar el comprador para garantizar su identidad.

Para transacciones de bajo riesgo, la información enviada al finalizar la compra es suficiente, el flujo procede de manera transparente y no se requieren pasos adicionales de Challenge. Sin embargo, para casos de alto riesgo de fraude, se requiere el Challenge para verificar la identidad del comprador, lo que aumenta la aprobación de las transacciones con tarjeta.

La decisión de incluir o no el Challenge depende del emisor de la tarjeta y del perfil de riesgo de la operación que se esté realizando.

A continuación se presentan los pasos para realizar una integración con 3DS.

  1. Después de generar una intención de pago usando Card Payment Brick o Payment Brick, es necesario enviar, desde tu backend, una solicitud de pago a Mercado Pago a través de nuestras APIs. La habilitación de la transmisión 3DS 2.0 se realiza agregando el campo three_d_secure_mode: 'optional' a esta solicitud.

javascript

var mercadopago = require('mercadopago');
mercadopago.configurations.setAccessToken("YOUR_ACCESS_TOKEN");

const paymentData = {
...req.body,
three_d_secure_mode: 'optional'
};

mercadopago.payment.save(paymentData)
  .then(function(response) {
    const { status, status_detail, id } = response.body;
    res.status(response.status).json({ status, status_detail, id });
  })
  .catch(function(error) {
    console.error(error);
  });

Si no es necesario utilizar el flujo Challenge, el campo status del pago tendrá el valor approved y no será necesario mostrarlo, de esta forma el flujo de pago procederá con normalidad.

Para los casos en los que se requiere Challenge, status mostrará el valor pending y status_detail será pending_challenge.

Descripción general simplificada de la respuesta:

javascript

{
   "payment_id":52044997115,
   "status":"pending",
   "status_detail":"pending_challenge",
   "three_ds_info":{
      "external_resource_url":"https://acs-public.tp.mastercard.com/api/v1/browser_Challenges",
      "creq":"eyJ0aHJlZURTU2VydmVyVHJhbnNJRCI6ImJmYTVhZjI0LTliMzAtNGY1Yi05MzQwLWJkZTc1ZjExMGM1MCIsImFjlOWYiLCJjW5kb3dTaXplIjoiMDQiLCJtZXNzYWdlVHlwZSI6IkNSZXEiLCJtZXNzYWdlVmVyc2lvbiI6IS4wIn0"
   },
   "owner":null
}
Importante
El campo devuelto three_ds_info contiene la información necesaria para continuar con el proceso de pago si status_detail es pending_challenge.
  1. Para continuar el flujo y mostrar el Challenge de manera simplificada, se recomienda integrar con el Status Screen Brick, informando el ID de pago generado, además del contenido del objeto three_ds_info, que fueron devueltos por la API de pago.

Si no desea utilizar el Status Screen Brick en esta etapa, le recomendamos que acceda a la sección Implementación en la documentación de Checkout API, ya que se necesitarán pasos adicionales para, por ejemplo, capturar el evento emitido cuando se completa el Challenge.

javascript

const renderStatusScreenBrick = async (bricksBuilder) => {
 const settings = {
   initialization: {
     paymentId: "<PAYMENT_ID>", // id de pago que se mostrará
     additionalInfo: {
       externalResourceURL: "<EXTERNAL_RESOURCE_URL>",
       creq: "<C_REQ>",
     },
   },
   callbacks: {
     onReady: () => {},
     onError: (error) => {
       console.error(error);
     },
   },
 };
 window.statusScreenBrickController = await bricksBuilder.create(
   "statusScreen",
   "statusScreenBrick_container",
   settings
 );
};
renderStatusScreenBrick(bricksBuilder);

El Status Screen Brick mostrará una transición que indica la redirección y, luego, se mostrará el Challenge del banco en cuestión.

how-to-integrate-3ds

El usuario debe responder al Challenge para que la transición se valide correctamente. Cabe señalar que la experiencia Challenge es responsabilidad exclusiva del banco a cargo.

Importante
Por razones de seguridad, el pago será rechazado si el proceso Challenge no se inicia dentro de los 30 segundos posteriores a su creación. Por lo tanto, es importante que el Challenge comience exactamente después de su generación.
  1. Después de resolver el Challenge, se mostrará el resultado final del pago de acuerdo con la respuesta emitida por el banco al final del Challenge.

status-screen-Brick

Prueba de integración

Antes de pasar a producción, es posible probar la integración para asegurarse de que el flujo de 3DS funcione correctamente y que los pagos se procesan sin errores. De esta manera, evitas que los compradores abandonen la transacción porque no pueden completar la compra.

Para poder validar pagos con 3DS, ponemos a disposición un entorno de pruebas tipo sandbox que devuelve resultados simulados solo para la simulación y validación de la implementación. Para realizar pruebas de pago en un entorno sandbox, es necesario utilizar sus credenciales de prueba y tarjetas específicas que permitan probar la implementación del Challenge con flujos de éxito y fallo. La tabla a continuación muestra los detalles de estas tarjetas:

FlujoNúmeroCódigo de seguridadFecha de vencimiento
Challenge exitoso5483 9281 6457 462312311/25
Challenge no autorizado5361 9568 0611 755712311/25
Los pasos para generar el pago son los mismos ejemplificados anteriormente en esta sección.

Challenge

En ambos los flujos (éxito y fallo), el Challenge, que es una pantalla similar a la mostrada a continuación, debe ser mostrado por el Status Screen Brick.

bricks_sandbox

El código de verificación proporcionado es solo ilustrativo. Para concluir el flujo de prueba, simplemente haz clic en el botón Confirmar y el Status Screen mostrará el estado final del pago.