Esta página contém alguns exemplos de implementação do checkout transparente.
Para gerar o Token Público utilize o endpoint Gerar Token Público (/api/checkout/gerar-public-token) da nossa API.
Recomendamos para fins de securança que faça isso via backend.
<html>
<head>
<!-- É necessario a adição do script do chekout no head da página-->
<script src="https://pay1.com.br/transparente/js/checkout_transparente_v2.js"></script>
</head>
<body>
<!-- O botão abaixo fará a chamada do checkout transpartente.-->
<input id="pagar" value="Pagar" type="button" />
<script>
var botao = document.querySelector("#pagar");
botao.addEventListener('click', function () {
// inicia uma instância do checkout
var checkout = new checkoutTransparente({
publickey: encodeURIComponent('SEU TOKEN PUBLICO AQUI'),
nome: 'Alan Mathison Turing',
valor: '1111',
contrato: '10547',
success: function (data) {
//retorna na variavel data os dados da transação autorizada no formato JSON
console.log(data);
},
error: function (erros) {
//retorna na variavel erros os dados dos erros da transação no formato JSON
console.log(erros);
}
});
// função que abre o checkout
checkout.open();
});
</script>
</body>
</html>
<html>
<head>
<!-- É necessario a adição do script do chekout no head da página-->
<script src="https://pay1.com.br/transparente/js/checkout_transparente_v2.js"></script>
</head>
<body>
<script>
window.onload = function () {
// inicia uma instância do checkout
var checkout = new checkoutTransparente({
publickey: encodeURIComponent('SEU TOKEN PUBLICO AQUI'),
nome: 'Alan Mathison Turing',
valor: '1110',
contrato: '150453',
success: function (data) {
// retorna em data um json com os dados da transação
console.log(data);
},
error: function (data) {
console.log(data);
}
});
// função que abre o checkout
checkout.open();
};
</script>
</body>
</html>
<html>
<head>
<!-- É necessario a adição do script do chekout no head da página-->
<script src="https://pay1.com.br/transparente/js/checkout_transparente_v2.js"></script>
</head>
<body>
<label for="Nome">Nome Completo</label>
<input name="Nome" placeholder="Alan Mathison Turing" type="text"/>
<label for="NumeroContrato">Número do contrato</label>
<input name="NumeroContrato" placeholder="0110" type="text"/>
<label for="Valor">Valor</label>
<input name="Valor" placeholder="50,00" type="text"/>
<!-- O botão abaixo fará a chamada do checkout transpartente.-->
<input id="pagar" value="Pagar" type="button"/>
<script>
var botao = document.querySelector("#pagar");
botao.addEventListener('click', function () {
// inicia uma instância do checkout
var checkout = new checkoutTransparente({
publickey: encodeURIComponent('SEU TOKEN PUBLICO AQUI'),
nome: document.querySelector('input[name="Nome"]').value,
valor: document.querySelector('input[name="Valor"]').value,
contrato: document.querySelector('input[name="NumeroContrato"]').value,
success: function (data) {
//retorna na variavel data os dados da transação autorizada no formato JSON
console.log(data);
},
error: function (erros) {
//retorna na variavel erros os dados dos erros da transação no formato JSON
console.log(erros);
}
});
// função que abre o checkout
checkout.open();
});
</script>
</body>
</html>
<html>
<head>
<!-- É necessario a adição do script do chekout no head da página-->
<script src="https://pay1.com.br/transparente/js/checkout_transparente_v2.js"></script>
</head>
<body>
<br />
<h4>Olá, Alan Turing</h4>
<p>Escolha um dos produtos antes de efetuar o pagamento</p>
<br />
<div style="float:left;">
<img src="https://via.placeholder.com/150" class="img-thumbnail" alt="Produto 1">
<h5>Produto 1</h5>
<h6>R$ 12,00</h6>
<p>Contrato 1</p>
<input id="PagarProduto1" type="button" value="Pagar com 1 click">
</div>
<div style="float:left; margin-left:35px;">
<img src="https://via.placeholder.com/150" class="img-thumbnail" alt="Produto 2">
<h5>Produto 2</h5>
<h6>R$ 14,00</h6>
<p>Contrato 2</p>
<input id="PagarProduto2" type="button" value="Pagar com 1 click">
</div>
<div style="float:left; margin-left:35px;">
<img src="https://via.placeholder.com/150" class="img-thumbnail" alt="Produto 3">
<h5>Produto 3</h5>
<h6>R$ 25,00</h6>
<p>Contrato 3</p>
<input id="PagarProduto3" type="button" value="Pagar com 1 click">
</div>
<script>
//Seleciona o botao de pagamento
var botaoProduto1 = document.querySelector('#PagarProduto1');
botaoProduto1.addEventListener('click', function () {
// inicia uma instância do checkout
var checkout = new checkoutTransparente({
publickey: encodeURIComponent('SEU TOKEN PUBLICO AQUI'),
nome: 'Alan Mathison Turing',
valor: '1200',
contrato: '1',
success: function (data) {
//retorna na variavel data os dados da transação autorizada no formato JSON
console.log(data);
},
error: function (erros) {
//retorna na variavel erros os dados dos erros da transação no formato JSON
console.log(erros);
}
});
// função que abre o checkout
checkout.open();
});
//Seleciona o botao de pagamento
var botaoProduto2 = document.querySelector('#PagarProduto2');
botaoProduto2.addEventListener('click', function () {
// inicia uma instância do checkout
var checkout = new checkoutTransparente({
publickey: encodeURIComponent('SEU TOKEN PUBLICO AQUI'),
nome: 'Alan Mathison Turing',
valor: '1400',
contrato: '2',
success: function (data) {
//retorna na variavel data os dados da transação autorizada no formato JSON
console.log(data);
},
error: function (erros) {
//retorna na variavel erros os dados dos erros da transação no formato JSON
console.log(erros);
}
});
// função que abre o checkout
checkout.open();
});
//Seleciona o botao de pagamento
var botaoProduto3 = document.querySelector('#PagarProduto3');
botaoProduto3.addEventListener('click', function () {
// inicia uma instância do checkout
var checkout = new checkoutTransparente({
publickey: encodeURIComponent('SEU TOKEN PUBLICO AQUI'),
nome: 'Alan Mathison Turing',
valor: '2500',
contrato: '3',
success: function (data) {
//retorna na variavel data os dados da transação autorizada no formato JSON
console.log(data);
},
error: function (erros) {
//retorna na variavel erros os dados dos erros da transação no formato JSON
console.log(erros);
}
});
// função que abre o checkout
checkout.open();
});
</script>
</body>
</html>
<html>
<head>
<!-- É necessario a adição do script do chekout no head da página-->
<script src="https://pay1.com.br/transparente/js/checkout_transparente_v2.js"></script>
</head>
<body>
<br />
<h4>Olá, Alan Turing</h4>
<p>Escolha um dos produtos antes de efetuar o pagamento</p>
<br />
<div style="float:left;">
<img src="https://via.placeholder.com/150" class="img-thumbnail" alt="Produto 1">
<h5>Produto 1</h5>
<p>Contrato 1</p>
<h6>Digite abaixo o valor a ser doado</h6>
<input id="Valordoacao1" type="number" placeholder="1200 = R$ 12,00" />
<input id="PagarProduto1" type="button" value="Doar com 1 click">
</div>
<div style="float:left; margin-left:35px;">
<img src="https://via.placeholder.com/150" class="img-thumbnail" alt="Produto 2">
<h5>Produto 2</h5>
<p>Contrato 2</p>
<h6>Digite abaixo o valor a ser doado</h6>
<input id="Valordoacao2" type="number" placeholder="1200 = R$ 12,00" />
<input id="PagarProduto2" type="button" value="Doar com 1 click">
</div>
<div style="float:left; margin-left:35px;">
<img src="https://via.placeholder.com/150" class="img-thumbnail" alt="Produto 3">
<h5>Produto 3</h5>
<p>Contrato 3</p>
<h6>Digite abaixo o valor a ser doado</h6>
<input id="Valordoacao3" type="number" placeholder="1200 = R$ 12,00" />
<input id="PagarProduto3" type="button" value="Doar com 1 click">
</div>
<script>
//Seleciona o botao de pagamento
var botaoProduto1 = document.querySelector('#PagarProduto1');
botaoProduto1.addEventListener('click', function () {
// inicia uma instância do checkout
var checkout = new checkoutTransparente({
publickey: encodeURIComponent('SEU TOKEN PUBLICO AQUI'),
nome: 'Alan Mathison Turing',
valor: document.querySelector('#Valordoacao1').value,
contrato: '1',
textoBotaoPagamento: 'Doar',
success: function (data) {
//retorna na variavel data os dados da transação autorizada no formato JSON
console.log(data);
},
error: function (erros) {
//retorna na variavel erros os dados dos erros da transação no formato JSON
console.log(erros);
}
});
// função que abre o checkout
checkout.open();
});
//Seleciona o botao de pagamento
var botaoProduto2 = document.querySelector('#PagarProduto2');
botaoProduto2.addEventListener('click', function () {
// inicia uma instância do checkout
var checkout = new checkoutTransparente({
publickey: encodeURIComponent('SEU TOKEN PUBLICO AQUI'),
nome: 'Alan Mathison Turing',
valor: document.querySelector('#Valordoacao2').value,
contrato: '2',
textoBotaoPagamento: 'Doar',
success: function (data) {
//retorna na variavel data os dados da transação autorizada no formato JSON
console.log(data);
},
error: function (erros) {
//retorna na variavel erros os dados dos erros da transação no formato JSON
console.log(erros);
}
});
// função que abre o checkout
checkout.open();
});
//Seleciona o botao de pagamento
var botaoProduto3 = document.querySelector('#PagarProduto3');
botaoProduto3.addEventListener('click', function () {
// inicia uma instância do checkout
var checkout = new checkoutTransparente({
publickey: encodeURIComponent('SEU TOKEN PUBLICO AQUI'),
nome: 'Alan Mathison Turing',
valor: document.querySelector('#Valordoacao3').value,
contrato: '3',
textoBotaoPagamento: 'Doar',
success: function (data) {
//retorna na variavel data os dados da transação autorizada no formato JSON
console.log(data);
},
error: function (erros) {
//retorna na variavel erros os dados dos erros da transação no formato JSON
console.log(erros);
}
});
// função que abre o checkout
checkout.open();
});
</script>
</body>
</html>
Caso tenha dúvidas sobre os parametros de entrada do checkout, veja a documentação completa.