Como integrar 3DS com Checkout Bricks

Nesta documentação você encontrará toda a informação necessária para realizar a integração com 3DS com Checkout Bricks. Para mais informações sobre como esse tipo de autenticação funciona, veja 3DS 2.0.

A integração com 3DS resulta em um processo de autenticação que é executado através de dois fluxos: com ou sem Challenge, sendo Challenge as etapas adicionais que o comprador deve cumprir para garantir sua identidade.

Para transações de baixo risco, as informações enviadas na finalização da compra são suficientes, o fluxo segue de forma transparente e as etapas adicionais do Challenge não são necessárias. Porém, para casos de alto risco de fraude, o Challenge é necessário para verificar a identidade do comprador, o que aumenta a aprovação das transações com cartão.

A decisão de incluir ou não o Challenge depende do emissor do cartão e do perfil de risco da transação que está sendo realizada.

Abaixo estão as etapas para realizar uma integração com 3DS.

1. Após gerar uma intenção de pagamento usando Card Payment Brick ou Payment Brick, é necessário enviar, a partir do seu backend, uma solicitação de pagamento ao Mercado Pago através das nossas APIs. A ativação do fluxo de 3DS 2.0 se dá pela adição do campo three_d_secure_mode: 'optional' nessa requisição.

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);
  });

Caso não seja necessário utilizar o fluxo do Challenge, o campo status do pagamento terá valor approved e não será necessário exibi-lo, dessa forma, o fluxo de pagamento seguirá normalmente.

Para os casos em que o Challenge é necessário, o status mostrará o valor pending, e o status_detail será pending_challenge.

Visão geral simplificada da resposta:

{
   "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
}

2. Para continuar o fluxo e exibir o Challenge de forma simplificada, é recomendado integrar com o Status Screen Brick, informando o ID do pagamento gerado, além do conteúdo do objeto three_ds_info, os quais foram retornados pela API de pagamentos.

Caso não deseje utilizar o Status Screen Brick nessa etapa, aconselhamos acessar a seção de Realizar implantação na documentação de Checkout Transparente, visto que serão necessários passos adicionais para, por exemplo, capturar o evento emitido quando o Challenge for finalizado.

const renderStatusScreenBrick = async (bricksBuilder) => {
 const settings = {
   initialization: {
     paymentId: "<PAYMENT_ID>", // id do pagamento a ser mostrado
     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);

O Status Screen Brick exibirá uma transição indicando redirecionamento e, logo em seguida, será exibido o Challenge do banco em questão.

O usuário deve responder ao Challenge para que a transição seja validada devidamente. Vale ressaltar que a experiência do Challenge é de responsabilidade exclusiva do banco encarregado.

3. Após a resolução do Challenge, será exibido o resultado final do pagamento de acordo com a resposta emitida pelo banco ao finalizar o Challenge.

Antes de ir à produção, é possível testar a integração para garantir que o fluxo 3DS funcione corretamente e que os pagamentos sejam processados sem erros. Dessa forma, evita-se que os compradores abandonem a transação por não conseguirem concluí-la.

Para que seja possível validar pagamentos com 3DS, disponibilizamos um ambiente de testes do tipo sandbox que retorna resultados simulados apenas para simulação e validação da implementação. Para realizar testes de pagamento em um ambiente sandbox, é necessário utilizar suas credenciais de teste e cartões específicos que permitam testar a implementação do Challenge com os fluxos de sucesso e falha. A tabela a seguir apresenta os detalhes desses cartões:

Em ambos os fluxos (sucesso e falha), o Challenge, que é uma tela semelhante à exibida abaixo, deve ser exibido pelo Status Screen Brick.

O código de verificação fornecido é apenas ilustrativo. Para concluir o fluxo de teste, basta clicar no botão Confirmar e o Status Screen irá exibir o estado final do pagamento.