Todas as chamadas que você verá nos próximos passos são efetuadas utilizando uma biblioteca exclusiva executada diretamente do browser do comprador, que deverá ser importada em seu projeto. Para isso, importe o arquivo abaixo:
<script type="text/javascript" src=
"https://stc.pagseguro.uol.com.br/pagseguro/api/v2/checkout/pagseguro.directpayment.js"></script>
<script type="text/javascript" src=
"https://stc.sandbox.pagseguro.uol.com.br/pagseguro/api/v2/checkout/pagseguro.directpayment.js"></script>
Esse JavaScript possui um objeto chamado PagSeguroDirectPayment, que é a interface de acesso aos métodos. Conheça cada um deles e como podem ajudar.
2.1. setSessionId
2.2. getPaymentMethods
2.3. onSenderHashReady
A lib possui um método chamado
getSenderHashque encontra-se depreciado, utilize o novo método onSenderHashReady para obter o hash identificador do comprador.
Os métodos abaixo são usados exclusivamente para pagamentos com cartão de crédito:
2.4. getBrand
2.5. getInstallments
2.6. createCardToken
Após importar a biblioteca, o primeiro passo é informar o código de sessão obtido no Passo 1.
PagSeguroDirectPayment.setSessionId('ID_DA_SESSÃO_OBTIDO_NO_PASSO_1');
Com este método você pode obter todos os meios de pagamento disponíveis para sua conta.
Esse método recebe opcionalmente o valor da transação e retorna um JSON contendo os meios de pagamento disponíveis, compatíveis com o valor informado. Caso não seja informado o valor, será retornado todos os meios de pagamento.
Com essas informações você poderá apresentar as opções para pagamento ao comprador.
Exemplo:
PagSeguroDirectPayment.getPaymentMethods({
amount: 500.00,
success: function(response) {
// Retorna os meios de pagamento disponíveis.
},
error: function(response) {
// Callback para chamadas que falharam.
},
complete: function(response) {
// Callback para todas chamadas.
}
});
O JSON possui informações como o nome utilizado na API, nome de exibição, status (Disponibilidade) e também o caminho para as imagens do meio de pagamento.
Observe que os meios de pagamento Balance e Deposit são retornados, porém atualmente não podem ser implementados.
Veja abaixo um exemplo da resposta (o JSON foi reduzido para melhor visualização):
{
"error":false,
"paymentMethods":{
"BOLETO":{
"name":"BOLETO",
"options":{
"BOLETO":{
"name":"BOLETO",
"displayName":"Boleto",
"status":"AVAILABLE",
"code":202,
"images":{
"SMALL":{
"size":"SMALL",
"path":"/public/img/payment-methods-flags/42x20/booklet.png"
},
"MEDIUM":{
"size":"MEDIUM",
"path":"/public/img/payment-methods-flags/68x30/booklet.png"
}
}
}
},
"code":2
},
"ONLINE_DEBIT":{
"name":"ONLINE_DEBIT",
"options":{
"BANCO_BRASIL":{
"name":"BANCO_BRASIL",
"displayName":"Banco do Brasil",
"status":"AVAILABLE",
"code":304,
"images":{
"SMALL":{
"size":"SMALL",
"path":"/public/img/payment-methods-flags/42x20/bb.png"
},
"MEDIUM":{
"size":"MEDIUM",
"path":"/public/img/payment-methods-flags/68x30/bb.png"
}
}
},
},
"code":3
},
"CREDIT_CARD":{
"name":"CREDIT_CARD",
"options":{
"MASTERCARD":{
"name":"MASTERCARD",
"displayName":"MasterCard",
"status":"AVAILABLE",
"code":102,
"images":{
"SMALL":{
"size":"SMALL",
"path":"/public/img/payment-methods-flags/42x20/mastercard.png"
},
"MEDIUM":{
"size":"MEDIUM",
"path":"/public/img/payment-methods-flags/68x30/mastercard.png"
}
}
},
},
"code":1
}
}
}
As imagens são disponibilizadas em dois tamanhos: 42x20 e 68x30 e podem ser obtidas através dos caminhos apresentados no JSON.
Veja abaixo dois exemplos de imagens e seus Endpoints:
Imagem Pequena:
https://stc.pagseguro.uol.com.br/public/img/payment-methods-flags/42x20/visa.png
Imagem Grande:
https://stc.pagseguro.uol.com.br/public/img/payment-methods-flags/68x30/visa.png
O senderHash é um identificador com os dados do comprador baseado naquela determinada sessão, garantindo a segurança da venda.
Obrigatório para todos os meios de pagamento.
O método onSenderHashReady possui algumas dependências , por isso, recomendamos que o mesmo não seja executado no onLoad da página ou mesmo onClick no evento "Finalizar Compra". Você pode executá-lo, por exemplo, no momento em que o cliente seleciona o campo destinado ao "Nome completo do comprador".
PagSeguroDirectPayment.onSenderHashReady(function(response){
if(response.status == 'error') {
console.log(response.message);
return false;
}
var hash = response.senderHash; //Hash estará disponível nesta variável.
});
Esse método é necessário somente para o meio de pagamento cartão de crédito.
O método getBrand é utilizado para verificar qual a bandeira do cartão que está sendo digitada. Esse método recebe por parâmetro o BIN (seis primeiros dígitos do cartão) e retorna dados como qual a bandeira, o tamanho do CVV, se possui data de expiração e qual algoritmo de validação.
PagSeguroDirectPayment.getBrand({
cardBin: 411111,
success: function(response) {
//bandeira encontrada
},
error: function(response) {
//tratamento do erro
},
complete: function(response) {
//tratamento comum para todas chamadas
}
});
Exemplo de Resposta:
{
"brand":{
"name":"visa",
"bin":411111,
"cvvSize":3,
"expirable":true,
"validationAlgorithm":"LUHN"
}
}
Esse método é necessário somente para o meio de pagamento cartão de crédito.
Você deve utilizar este método caso queira apresentar as opções de parcelamento disponíveis ao comprador. Esse método recebe o valor total a ser parcelado e retorna as opções de parcelamento calculadas de acordo com as configurações de sua conta.
Para obter um resultado mais preciso, você também pode informar a bandeira, de acordo com o nome retornado no método getBrand.
Se você quer oferecer um parcelamento sem juros, mas não possui uma promoção cadastrada em sua conta, deverá informar a quantidade de parcelas que deseja assumir no parâmetro
maxInstallmentNoInterest.Esse parâmetro deverá receber valor maior ou igual a 2.
Lembrando que se este parâmetro for utilizado, o mesmo valor informado deve ser enviado no parâmetro
noInterestInstallmentQuantityao efetuar o checkout (você verá mais detalhes no Passo 3).
Exemplo:
PagSeguroDirectPayment.getInstallments({
amount: 118.80,
maxInstallmentNoInterest: 2,
brand: 'visa',
success: function(response){
// Retorna as opções de parcelamento disponíveis
},
error: function(response) {
// callback para chamadas que falharam.
},
complete: function(response){
// Callback para todas chamadas.
}
});
Exemplo de Resposta:
{
"error":false,
"installments":{
"visa":[
{
"quantity":1,
"totalAmount":100,
"installmentAmount":100,
"interestFree":true
},
{
"quantity":2,
"totalAmount":100,
"installmentAmount":50,
"interestFree":true
},
{
"quantity":3,
"totalAmount":102.99,
"installmentAmount":34.33,
"interestFree":false
}
]
}
}
Esse método é necessário somente para o meio de pagamento cartão de crédito.
O método createCardToken utiliza os dados do cartão de crédito para gerar um token que será enviado no Passo 3, pois por motivos de segurança os dados do cartão não são enviados diretamente na chamada.
Exemplo:
PagSeguroDirectPayment.createCardToken({
cardNumber: '4111111111111111', // Número do cartão de crédito
brand: 'visa', // Bandeira do cartão
cvv: '013', // CVV do cartão
expirationMonth: '12', // Mês da expiração do cartão
expirationYear: '2026', // Ano da expiração do cartão, é necessário os 4 dígitos.
success: function(response) {
// Retorna o cartão tokenizado.
},
error: function(response) {
// Callback para chamadas que falharam.
},
complete: function(response) {
// Callback para todas chamadas.
}
});
Exemplo de Resposta:
{
"card":{
"token":"653fe9044cf149f9b7db562431cb130d"
}
}