Implementação SDK - 3DS
Fluxo para utilizar o SDK do 3DS na sua aplicação de frontend.
Quando implementar o SDK?
Resposta da rota:
POSTurlServidor/v1/marketplace/transactions
ter no Array - Antifraude "analyse_required": "THREEDS" e "analyse_status": "WAITING_AUTH)
1 - Adicione o Script do SDK em sua página Web.
Para utilizar o SDK do PagBank você deve incluir o script apresentado a seguir antes de fechar a tag <body> da sua página:
<script src="https://assets.pagseguro.com.br/checkout-sdk-js/rc/dist/browser/pagseguro.min.js"></script>2 - Depois de adicionar o SDK Pagbank a sua aplicação, você irá utilizar o método setUp. Você deve fornecer a session, enviada na resposta da rota de criação de transação e definir o ambiente que será utilizado através do parâmetro env, conforme demonstrado a seguir:
PagSeguro.setUp({
session: 'SUA_SESSAO',//Retornado no response da rota de criar transação no array Antifraude
env: 'ENV'//Define o ambiente que será utilizado. Você pode utilizar PROD para ambiente de produção e SANDBOX para ambiente sandbox.
});3 - Monte o Payload abaixo com os dados a ser enviado para o SDK.
const request = {
data: {
customer: {
name: 'Jose da Silva',
mail: '[email protected]',
phones: [
{
country: '55',
area: '11',
number: '999999999',
type: 'MOBILE'
},
{
country: '55',
area: '11',
number: '999999999',
type: 'HOME'
},
{
country: '55',
area: '11',
number: '999999999',
type: 'BUSINESS'
}
]
},
paymentMethod: {
type: 'CREDIT_CARD',
installments: 1,
card: {
number: number,
expMonth: "02",
expYear: "2026",
holder: {
name: "Joao Silva"
}
}
},
amount: {
value: 500,
currency: 'BRL'
},
billingAddress: {
street: 'Av. Paulista',
number: '2073',
complement: 'Apto 100',
regionCode: 'SP',
country: 'BRA',
city: 'São Paulo',
postalCode: '01311300'
},
shippingAddress: {
street: 'Av. Paulista',
number: '2073',
complement: 'Apto 100',
regionCode: 'SP',
country: 'BRA',
city: 'São Paulo',
postalCode: '01311300'
},
dataOnly: false
}
}4 - Após estruturar o Payload, adicione no método PagSeguro.authenticate3DS
PagSeguro.setUp({
session: document.querySelector('SUA_SESSAO').value,
env: document.querySelector('ENV').value
});
PagSeguro.authenticate3DS(request).then( result => {
this.logResponseToScreen(result);
this.stopLoading();
}).catch((err) => {
if(err instanceof PagSeguro.PagSeguroError ) {
console.log(err);
console.log(err.detail);
this.stopLoading();
}
})5 - Após essa configuração o seu 3DS esta habilitado e irá executar, com os possíveis retornos:
O método authenticate3DS é assíncrono. Caso a Promisse associada a sua chamada seja concluída com sucesso você receberá um objeto contentendo o status e o id.
| Descrição |
|---|
Define o status final do fluxo de autenticação. Pode apresentar 3 valores:
|
|
6 - Após o retorno do SDK é necessário chamar a rota(endpoint) de autenticação da transação, passando o resultado do SDK e adicionar parâmetros necessários para a autenticação, (consulte a documentação).
Referência: https://developer.pagbank.com.br/reference/criar-pagar-pedido-com-3ds-validacao-pagbank
Códigos de Resposta
Consulte a página com os status: Status de respostas
Para mais detalhes sobre os parâmetros e funcionamento da API, acesse a documentação oficial da Paytime.
Updated 3 months ago