Inserindo o Checkout Pagar.me
Você está na versão correta da documentação?
Verifique na sua Dashboard a versão da API que você está usando. Você deve usar a documentação correspondente. Para saber mais, veja: Versionamento.
Para inserir o checkout na sua página é necessário importar o seu script através da tag <script src="https://assets.pagar.me/checkout/1.1.0/checkout.js">
.
O primeiro passo para configurar o checkout é definir seus parâmetros e regras. Na seção Configurações do checkout é possível verificar com mais detalhes cada campo que pode ser customizado, para esse exemplo foi utilizada a configuração mais simples possível, onde é informado apenas o valor da compra, o item comprado e são configuradas as regras para o checkout receber os dados do comprador (customerData:true) e autorizar a transação (createToken:true).
O createToken irá definir se o checkout deve criar uma transação ou apenas servir como formulário de dados. Quando o createToken é “true” o checkout irá autorizar uma transação lhe retornando um token de captura, status da transação e número de parcelas. Caso esse parâmetro esteja setado como “false”, o checkout servirá como um formulário apenas encriptando os dados do cartão do cliente na forma de um card_hash, retornando assim os dados preenchidos junto do card_hash.
A configuração “customerData” por sua vez define se o checkout deve pedir dados de endereço, email e nome do comprador. Caso essa configuração esteja desabilitada e deseje que o checkout crie uma transação é necessário enviar os dados do comprador no momento de abertura do checkout, utilizando os parâmetros customer, billing e shipping.
<script>
checkout.open({
amount: 1500,
customerData: 'true',
createToken: 'true',
items: [{
id: '1',
title: ‘ebook’,
unit_price: 1500,
quantity: 1,
tangible: 'false'
}]
})
</script>
Uma vez importado o script e configurados os campos desejados, é necessário que exista uma função para acessar os dados do checkout. O checkout possui 3 eventos distintos que podem ser tratados na sua aplicação: sucesso (sucess), erro (error) e fechamento (close).
<script>
var button = document.querySelector('button');
// Abrir o checkout ao clicar no botão
button.addEventListener('click', function() {
// inicia a instância do checkout
var checkout = new PagarMeCheckout.Checkout({
encryption_key: 'SUA ENCRYPTION KEY',
success: function(data) {
console.log(data);
},
error: function(err) {
console.log(err);
},
close: function() {
console.log('The modal has been closed.');
}
});
});
</script>
A página HTML completa ficaria da seguinte maneira:
<html>
<head>
<!-- SCRIPT PAGAR.ME -->
<script src="https://assets.pagar.me/checkout/1.1.0/checkout.js"></script>
</head>
<body>
<button id="pay-button">Abrir modal de pagamento</button>
<script>
var button = document.querySelector('button');
// Abrir o modal ao clicar no botão
button.addEventListener('click', function() {
// inicia a instância do checkout
var checkout = new PagarMeCheckout.Checkout({
encryption_key: 'SUA ENCRYPTION KEY',
success: function(data) {
console.log(data);
},
error: function(err) {
console.log(err);
},
close: function() {
console.log('The modal has been closed.');
}
});
checkout.open({
amount: 10000,
customerData: 'true',
createToken: 'true',
items: [{
id: '1',
title: ‘ebook’,
unit_price: 1500,
quantity: 1,
tangible: 'false'
}]
})
});
</script>
</body>
</html>
Por conta do parâmetro "createToken:true" o checkout irá autorizar uma transação. Uma transação criada e autorizada pelo checkout Pagar.me permanece assim por até 5 horas, sendo necessário realizar a captura da mesma através do seu servidor. Caso a captura não seja realizada a transação será ESTORNADA.
Para realizar a captura de uma transação gerada pelo checkout será necessário enviar as informações da mesma para o seu servidor, para que ele realize essa operação. Para realização da captura, é necessário o token retornado pelo checkout, o valor da transação e a chave de API. É extremamente importante que a captura seja realizada à partir do seu servidor (backend), isso porque essa operação é feita através da chave de API, dado sensível que permite a realização de TODAS as operações junto da API. NÃO faça a captura em ambientes do lado de seu cliente, como por exemplo, mas não limitado a: aplicativos mobile, páginas web via chamadas ajax e aplicativos desktop.
A rota utilizada para a operação de captura é a rota /transactions. É possível verificar os detalhes dessa rota através da referência da documentação: /capture. Lembrando que é através da mesma que serão enviados os dados de metadata e split_rules caso sejam necessários.
No nosso github é possível encontrar exemplos de aplicações que enviam os dados retornados pelo checkout para o backend e realizam a captura dos mesmos.
O checkout Pagar.me não cria recorrências, porém o mesmo pode ser utilizado como formulário de dados e assim criar a recorrência à partir do endpoint /subscriptions. Para mais detalhes verifique a página de configurações do checkout.
Updated about 4 years ago
Agora que você já sabe como inserir e integrar o Checkout na sua operação, aprenda um pouco mais sobre Marketplace.