❗️

NÃO USAMOS A SECRET_KEY NO CHECKOUT

A autenticação dos endpoint 3DS deverá ser feita exclusivamente enviando o JWT gerado pelo lojista no parâmetro JWT da função init( ). A secret_key de sua loja não deverá ser armazenada na página, tão pouco ser enviada na requisição.

Gerando JWT

A autenticação dessa rota segue o padrão do Pagar.me, mais informações em: Autenticação

O Backend deve enviar a Chave de API (secret_key) no cabeçalho Authorization, seguindo o padrão da HTTP Basic Authentication.

Método: GET Rota: https://api.pagar.me/test/3ds2/tds-token

var fs = require('fs');
const request = require("request");

var options = {                 
    method: 'GET',             
    uri: 'https://api.pagar.me/test/3ds2/tds-token',                    
    headers: {               
      'Authorization': 'Basic ' + Buffer.from("sk_test_*:").toString('base64'),
      'Content-Type': 'application/json'              
    }
};    

request(options, function(error, response, body) {  
    console.log(response.body);
});

O retorno do GET é:

{
	tds_token: JWT gerado pelo 3DS - Pagar.me
}

JWT gerado pela rota tds-token será usado na inicialização do SDK e tem validade de 20 segundos.

Passo 1:

Na tag <form> insira o atributo data-pagarmecheckout-form para que o script identifique de onde serão extraídos os dados.

<form action="{{url de sua action}}" method="POST" data-pagarmecheckout-form>
</form>

❗️

Não trafegue dados de cartão em seu servidor

É importante que você garanta que os dados abertos de cartão (número, cvv, vencimento e nome do titular) não serão enviados para seu servidor.

Passo 2:

Coloque nos campos <input> do seu formulário os atributos "data-pagarmecheckout-element" correspondentes a cada um dos campos do cartão, conforme HTML abaixo. Estes serão capturados pelo script para a geração do token na submissão do formulário.

<form action="{{url de sua action}}" method="POST" data-pagarmecheckout-form>
    <input type="text" name="holder-name" data-pagarmecheckout-element="holder_name">
    <input type="text" name="card-number" data-pagarmecheckout-element="number">
    <span  data-pagarmecheckout-element="brand"></span>
    <input type="text" name="card-exp-month" data-pagarmecheckout-element="exp_month">
    <input type="text" name="card-exp-year" data-pagarmecheckout-element="exp_year">
    <input type="text" name="cvv" data-pagarmecheckout-element="cvv">
    <input type="text" name="buyer-name">
    <button type="submit">Enviar</button>
</form>

📘

Atenção:

Caso opte por não usar o atributo data-pagarmecheckout-elementno checkout é possivel incluir na inicialização da SDK em JS. Os fomartos e nomes dos campos estão descritos ba tabela de parâmetros.

Passo 3:

Reserve um espaço no checkout para um eventual desafio 3DS solicitado pelo emissor. Ao exibir a página deixe o iFrame oculto para o portador, caso necessário o script irá exibir para o portador.

<iframe id="challengeIframe" data-pagarmecheckout-element="challengeIframe">
</iframe>

// css para o iFrame ficar oculto
#challengeIframe { display: none; }

📘

Campos adicionais podem ser inseridos

Quaisquer outros campos podem ser adicionados ao mesmo formulário, sem o atributodata-pagarmecheckout-element, e estes serão enviados normalmente ao seu servidor, sem a intervenção do script, como, por exemplo, buyer-name.

👍

Formatos válidos para data de expiração

O campo referente a data da expiração do cartão pode ser informado de duas formas:

Em campo único, marcado como "exp_date" (O formato esperado é YYYY-MM)

Futuramente, em dois campos, "exp_month" e "exp_year".

Passo 4:

Deve ser inserido no final da sua página uma tag <script> com o pagarme3ds.js.

/// Script para Sandbox:
<script src="https://3ds2-sdx.pagar.me/v1/3ds2.min.js"></script>

/// Script para produção:
<script src="https://3ds2.pagar.me/v1/3ds2.min.js"></script>

Passo 5:

Depois de inserir o script é preciso iniciar a detecção dos campos com a chamada da função PagarmeCheckout.init(). O métodoinit() , recebe 4 parâmetros, sendo:

1. JWT : Token gerado pelo back-end do lojista para ser usado no processo do 3DS.
2. tdsData: JSON com as informações do Pedido para serem autenticadas pelo 3DS. Possíveis campos, definições e obrigatoriedade podem ser encontrados em: Tabela abaixo Parâmetros do tdsData
3. callback(data), para execução após a finalização do processo 3DS.
4. challengeWindowSize, indicação do tamanho da janela do desafio.

Quando a função de callback é chamada recebe por parâmetro um objeto data, que é um JSON com o tds_id, trans_status. Indicando o ID do 3DS que deve ser usado na criação do Pedido e o Status da autenticação.

<script>
        function callback(data) {
            return true;
        };
        
        tdsData = { ... }
        
        Script3ds.init3ds(tdsToken, tdsData, callback, challengeWindowSize)
</script>

📘

Valores possíveis para o tamanho da tela de desafio.

    '01' -> 250 x 400
    '02' -> 390 x 400
    '03' -> 500 x 600
    '04' -> 600 x 400
    '05' -> Full screen

👍

Chamada função INIT

Recomendamos que a chamada da função INIT3DS aconteça quando o checkout for submetido o JWT já tenha sido gerado.

Após a chamada do INIT3DS, recomendamos a desativação do botão "pagar" para evitar dupla autenticação e sugerimos exibir uma mensagem de "Processando pagamento" para dá o retorno ao cliente que o pagamento está sendo processado.

Retorno do JS

Resposta do SDK JavaScript é um JSON no Formato abaixo:

{
  trans_status: 'Y', 
  tds_server_trans_id: 'uuid-3ds-123',
  error: 'MENSAGEM DE ERROR AQUI'
}

Status das transações 3DS

Os status abaixo estão relacionados a caso a transação for criada com o status abaixo.

Indicado para garantir a responsabilidade da transação seja do emissor, o status do 3DS deve ser Y, o 3DS não é impeditivo para criação da transação, e os dados enviados ao 3DS auxiliam o emissor a tomar uma melhor decisão.

Exemplo de implementação:

O time pagar.me criou uma página de testes que poderá ser usada para testar o 3DS e ver seu funcionamento.

https://auth-3ds-sdx.pagar.me/index.html

Parâmetros do tdsData

A tabela abaixo detalha os dados que devem ser enviado no tdsData

Campos com Required são obrigatorios, Optional são opcionais e Conditional são obrigatorios caso não for adicionado a tag data-pagarmecheckout-element

Phones

Phone é um array de objetos phone

Endereços

O objeto endereço são enviados em ship_addr e bill_addr

Purchase

Exemplo de JSON

{
    acct_type: "02",
    email: "[email protected]",
    bill_addr: {
      street: "Rua",
      number: "123",
      city: "São Paulo",
      state: "SP",
      country: 'BRA',
      post_code: "00001000",
    },
    phones: [
      {
        country_code: '55',
        subscriber: "11123456789",
        phone_type: 'home',
      },
    ],
    purchase: {
      amount: "2000",
      currency: 'BRL',
      date: '2023-09-11T13:57:13.000Z',
      instal_data: 2,
    },
    ship_addr: {
      street: "Rua",
      number: "123",
      city: "São Paulo",
      state: "SP",
      country: 'BRA',
      post_code: "00001000",
    },
    "acct_number": "1234567890123456",
    "cad_expiry_date": "2023-09",
    "cardholder_name": " Pagarme Pagamentos",
    "cvv": 123
}