Iniciando autenticação 3DS

Função startThreeDs no JavaScript do Carat#

Essa chamada é essencial para ativar a autenticação 3DS 2.0, verificar se o número do cartão do portador está dentro do intervalo de cartões suportados para a autenticação e, quando necessário, iniciar o fluxo de 3DS Methods para capturar informações adicionais do navegador, com o intuito de facilitar a tomada de decisões com base no risco (RBA-Risk Based Analysis), aumentando as chances de se obter uma autenticação sem desafio.

Para usar a função startThreeDs, basta adicionar o arquivo de pagamento JavaScript com autenticação 3DS 2.0 e a tag div na página de checkout. Tanto o arquivo quanto a tag div são essenciais para garantir que a função startThreeDs funcione corretamente.

Script JS#

URL para ambiente de Produção:

https://esitef.softwareexpress.com.br/js/esitefauthenticatepayment-1.0.min.js

URL para ambiente de Homologação:

https://esitef-homologacao.softwareexpress.com.br/js/esitefauthenticatepayment-1.0.min.js

Abaixo está a tag div obrigatória para o funcionamento do 3DS method

<div id="divThreeDsMethodData"></div>

Campo do número do cartão#

Além dos itens mencionados anteriormente, é crucial que o campo do número do cartão possua a classe especificada abaixo:

Parâmetro	Descrição	Formato	Obrigatório
`esitef-cardnumber`	Número do cartão do comprador (PAN).	< 19 N	SIM

Exemplo

<input type="number" id="card-number" maxlength="16"  class="esitef-cardnumber">

Chamando a função startThreeDS do JavaScript Carat#

Quando o comprador insere o número do cartão na tela, é possível criar um evento JavaScript ou um botão que aciona a função startThreeDS. A implementação do evento ou botão não segue uma regra específica, desde que seja acionada após o preenchimento do número do cartão. Ao chamar a função startThreeDS, é fundamental fornecer uma requisição com os seguintes campos como argumento:

Parâmetro	Descrição	Formato	Obrigatório
`nit`	Identificador de transação no Carat. Campo `nit` recebido na etapa de criação da transação.	= 64 AN	SIM
`payToken`	Campo `pay_token` recebido na etapa de criação da transação.	= 66 AN	SIM
`merchantId`	Código da loja no Carat. Os códigos de produção e certificação serão diferentes.	< 15 N	SIM
`locale`	Linguagem das mensagens retornadas em erros de validação (callback "onInvalid"). Pode receber os seguintes valores: `pt` - Português `en` - Inglês `es` - Espanhol Caso o locale não seja enviado, será utilizado `pt`.	= 2 A	NÃO
`authorizerId`	Código da autorizadora no Carat. Saiba mais.	< 3 N	NÃO
`onSuccess`	Função de callback que será chamada após uma chamada bem-sucedido da função `startThreeDS` no Carat. Esta função recebe como argumento a resposta da função `startThreeDS` descrita em - Resposta dos callbacks de sucesso e fracasso.	F	SIM
`onFailure`	Função de callback que será chamada após uma chamada mal sucedido da função `startThreeDS` no Carat. Esta função recebe como argumento a resposta da função `startThreeDS`descrita em - Resposta dos callbacks de sucesso e fracasso.	F	SIM
`onInvalid`	Função de callback que será chamada após um erro de validação JavaScript. Esta função recebe como argumento a lista de erros descrita em - Resposta do callback de erro de validação.	F	SIM

Resposta dos callbacks de sucesso e fracasso#

As funções de callback onSuccess e onFailure recebem como argumento um objeto contendo informações referentes a resposta da função startThreeDs. Abaixo estão as descrições desses campos:

Parâmetro	Descrição	Formato
`code`	Código de resposta do Carat. Qualquer código diferente de `0` (zero) significa falha. Para maiores informações, consulte os Códigos de Resposta.	< 4 N
`message`	Mensagem de resposta do Carat.	< 500 AN
`authorizer_id`	Código da autorizadora no Carat. Saiba mais. `(só em caso de sucesso)`.	< 3 N

Resposta do callback de erro de validação#

A função de callback onInvalid recebe como argumento uma lista de objetos de erro de validação, contendo os campos abaixo:

Parâmetro	Descrição	Formato
`field`	Nome do campo com erro.	< 30 AN
`cause`	Mensagem de erro.	<100 AN

Exemplo#

Abaixo está um exemplo de uma página integrada com o pagamento JavaScript do Carat:

Para usar este exemplo, não esquecer de definir a variável {{url}} com o valor
esitef-homologacao.softwareexpress.com.br

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="https://{{url}}/js/esitefauthenticatepayment-1.0.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('card-number').addEventListener('input', function() {
                var valor = this.value;

                valor = valor.replace(/\s/g, '');

                if (valor.length === 16) {
                    threedMethod();
                }
            });
        });

        function threedMethod() {
            var request = {
                onSuccess: function(response) {
                    console.log(response.code);
                    console.log(response.message);
                    console.log(response.authorizer_id);
                },
                onFailure: function(response) {
                    console.log(response.code);
                    console.log(response.message);
                },
                onInvalid: function(errors) {
                    for (var i = 0; i < errors.length; i++) {
                        console.log(errors[i].field);
                        console.log(errors[i].cause);
                    }
                },
                nit: '183479a213bcd653909a959907817f452a7e36846bd922b6c891804ae4118b16',
                payToken: '955d19823f1e3f74e4c6d57e895ed32473d929669ea1ef5fc0e18783265c34e301',
                merchantId: 'XXXXXXXXXXXX',
                locale: 'pt',
                authorizerId: '2'
            };
            startThreeDs(request);
        }
    </script>
  </head>

  <body>
    <form method="POST">
        <input type="text" id="card-number" maxlength="16"  class="esitef-cardnumber">
    </form>
  </body>
</html>