Pagamento JavaScript com autenticação 3DS 2.0

Visão Geral#

A integração da interface de Pagamento JavaScript com autenticação 3DS 2.0 proporciona uma maneira eficiente de coletar os dados do cartão do comprador e realizar a autenticação e autorização de pagamento através do Carat, diretamente na página do lojista. Essa abordagem isenta a loja da manipulação de dados sensíveis, simplificando o processo de autenticação, autorização e transferindo essa responsabilidade para o ambiente certificado PCI DSS do Carat.

Esta interface é altamente recomendada para os lojistas que buscam ter seu próprio checkout com autenticação 3DS, garantindo simultaneamente um elevado padrão de segurança.

Esta solução é integrada com a interface de pagamento REST. Saiba mais sobre Pagamento REST.

E para saber mais sobre essas nomenclaturas (Bin, Software Express, Carat, e-Sitef) Saiba mais

Finalidade da autenticação 3DS 2.0#

A implementação do 3DS 2.0 tem como principal finalidade fortalecer a segurança das transações online, especialmente aquelas envolvendo cartões de crédito e débito. Ao incorporar o 3DS 2.0 na interface de pagamento JavaScript, o processo de autenticação se torna mais simples de ser implementado na página do lojista.

Vantagens da autenticação com 3DS 2.0#

A principal vantagem é a mudança de responsabilidade (Liability Shift) de estornos fraudulentos. Se a transação for autenticada, a responsabilidade dela passa do Estabelecimento para o Banco Emissor, ou seja, em transações autenticadas o Estabelecimento não recebe chargeback pela razão de fraude, mitigando perdas financeiras. Além disso há vários outros benefícios como:

Suporte amplo para dispositivos e autenticações;
Otimização no fluxo de checkout;
Tomada de decisão mais inteligente baseadas em análises de risco;
Taxas de autorização mais altas e menos falsos positivos;

JavaScript (JS), Cascading Style Sheets (CSS) e Tag HTML (Hypertext Markup Language)#

Na integração do pagamento JavaScript com autenticação 3DS 2.0, é crucial incluir dois arquivos na página de checkout: um script JS e uma folha de estilo CSS. Esses dois arquivos são essenciais para garantir que o pagamento com autenticação 3DS 2.0 funcione corretamente. Além desses arquivos, é necessário adicionar uma tag HTML à página de pagamento, onde o comprador insere as informações do cartão. Essa tag HTML será utilizada no caso de ocorrer o fluxo de 3DS method.

Script JS#

Abaixo estão as URls de homologação e produção para download:

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

Folha de estilo CSS#

Abaixo estão as URls de homologação e produção para download:

URL para ambiente de Produção:

https://esitef.softwareexpress.com.br/css/v2/threeds.css

URL para ambiente de Homologação:

https://esitef-homologacao.softwareexpress.com.br/css/v2/threeds.css

Tag div#

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

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

Fluxo#

Descrição do fluxo:

1. O cliente envia os dados da sua compra e prossegue para a tela de pagamento.
- 1.1. A Loja Virtual cria uma transação de pagamento no Carat, enviando adicionalmente o parâmetro payment_js com valor true. Saiba mais.
- 1.2. O Carat retorna para a loja um NIT e um Pay Token.
- 1.3. Loja exibe para o comprador a sua página de pagamento contendo o script do Carat e os campos de dados de cartão com as classes especificadas em Campos com dados de cartão.
2. Cliente preenche os dados do seu cartão. Após preencher o cartão é necessário criar um evento para chamar a função startThreeDs do script do Carat, passando como parâmetro o NIT, o Pay Token, o código da loja, o código da autorizadora no Carat e as funções de callback (procedimentos do lojista que serão chamados após a função startThreeDs do Carat).
- 2.1. O Carat retorna o resultado da função startThreeDs.
- 2.2. O retorno da função startThreeDs pode ou não incluir uma requisição para o 3DS method, permitindo que o ACS (Access Control Server) colete automaticamente as informações do dispositivo do portador do cartão. Importante ressaltar que esse processo ocorre de forma automática no navegador do cliente, simplificando a integração
3. O callback do lojista é acionado, podendo conter a função onSuccess em caso de êxito na execução da função startThreeDs, onFailure é ativada caso o cartão do cliente não esteja dentro do escopo de cartões para autenticação 3DS 2.0 e onInvalid é acionada diante de qualquer erro ocorrido na requisição do Carat durante a execução da função startThreeDs.
4. Após preencher os dados restantes relacionados à compra e clicar em "pagar", esse clique deve acionar a função esitefDoPayment do script do Carat. Os parâmetros a serem passados incluem o NIT, o Pay Token, o código da loja, o tipo de autenticação no 3DS 2.0 e as funções de callback (procedimentos específicos do lojista que serão chamados após a conclusão do pagamento pelo Carat).
- 4.1. O Carat retorna o resultado da função esitefDoPayment.
- 4.2. O resultado da função esitefDoPayment pode ou não envolver um desafio, que representa uma forma de autenticação 3D-Secure. Nesse cenário, o titular do cartão é redirecionado para uma página ou aplicativo a fim de fornecer informações adicionais ou inserir um código de segurança para confirmar a transação. Importante ressaltar que esse processo ocorre de forma automática no navegador do cliente, simplificando a integração.
5. O callback do lojista é acionado, podendo conter a função onSuccess, a qual é acionada em caso de êxito no pagamento, permitindo redirecionar o comprador para uma página de sucesso. A função onFailure é acionada quando o pagamento é recusado, possibilitando redirecionar o comprador para uma página de fracasso. A função onProcessing é ativada após um desafio, podendo redirecionar o comprador para uma página de processamento, enquanto onInvalid é acionada em caso de qualquer erro durante a requisição do Carat durante a execução da função esitefDoPayment.

Home