Guides
GuidesSuporteAPI Reference

Inserindo o Checkout [old]

Suggest Edits

Existem duas formas de utilizar o Checkout Pagar.me em seu site: por formulário HTML ou pela API. Antes de continuar para as explicações de cada método, clique aqui se você quiser testar o funcionamento do Checkout.

Inserindo a versão formulário

O primeiro método para inserir o Checkout Pagar.me no seu site é utilizando o nosso JavaScript em conjunto com um formulário HTML, como pode ser visto abaixo. Desta forma você já consegue configurar um formulário que recebe as informações do Checkout e envia para a página definida em action. Veja o exemplo:

<form method="POST" action="/comprar">
    <script type="text/javascript"
        src="https://assets.pagar.me/checkout/checkout.js"
        data-button-text="Pagar"
        data-encryption-key="SUA_ENCRYPTION_KEY"
        data-amount="1000"
        data-customer-data="true"
        data-payment-methods="boleto,credit_card"
        data-ui-color="#bababa"
        data-postback-url="requestb.in/1234"
        data-create-token="true"
        data-interest-rate="12"
        data-free-installments="3"
        data-default-installment="5"
        data-header-text="Título"
        data-button-text="Pagar agora!">
    </script>
</form>

Configurações da versão formulário

É possível personalizar e configurar o Checkout usando as propriedades disponíveis a seguir:

TagPadrãoDescrição
data-encryption-key---Chave de encriptação disponível no seu dashboard.
data-amount---Valor da transação (em centavos) a ser capturada pelo Checkout. Ex: R$14,79 = 1479
data-button-textPagarTexto do botão de pagamento.
data-button-class---Classe CSS a ser adicionada no botão de pagamento.
data-boleto-discount-amount---Valor, em centavos, do desconto caso o meio de pagamento seja boleto. Ex: desconto de R$10,00 = 1000. OBS: você não pode adicionar essa tag caso a tag de desconto percentual já esteja presente.
data-boleto-discount-percentage---Percentual de desconto caso o meio de pagamento seja boleto. Ex: desconto de 25% = 25. OBS: você não pode adicionar essa tag caso a tag de desconto por valor já esteja presente.
data-boleto-helper-text---Mensagem opcional que aparecerá embaixo do botão de pagamento Boleto.
data-credit-card-helper-text---Mensagem opcional que aparecerá embaixo do botão de pagamento Cartão de Crédito.
data-payment-methodscredit_card, boletoMeios de pagamento disponíveis no Checkout.
data-card-brandselo, amex, diners, jcb, hipercard, visa, aura, discover, mastercardVocê deve especificar aqui quais bandeiras quer aceitar.
data-max-installments1Número máximo de parcelas aceitas, de 1 a 12.
data-ui-color#1a6ee1Cor primária da interface de Checkout.
data-postback-url---Endereço da URL de POSTback do seu sistema, que receberá as notificações das alterações de status das transações
data-create-tokentrueHabilita a geração do token para autorização da transação.
OBS: Caso você queira apenas pegar os dados do cliente, deixe esse atributo com o valor false, e realize a transação normalmente no seu backend, com os dados informados no formulário do checkout.
data-customer-datatrueHabilita os campos de endereço, telefone, nome e email do cliente. Caso não deseje capturar estes dados pelo Checkout, configure como false.
data-customer-name---Nome do cliente (Obrigatório)
data-customer-document-number---CPF ou CNPJ do cliente (Obrigatório)
data-customer-email---E-mail do cliente (Obrigatório)
data-customer-address-street---Nome do logradouro do cliente
data-customer-address-street-number---Número do imóvel do cliente
data-customer-address-complementary---Complemento do endereço do cliente
data-customer-address-neighborhood---Bairro do cliente
data-customer-address-city---Cidade do cliente
data-customer-address-state---Estado (unidade federativa) do cliente
data-customer-address-zipcode---Código de endereçamento postal (CEP) da cidade do cliente
data-customer-phone-ddd---DDD do telefone do cliente
data-customer-phone-number---Número do telefone do cliente
data-disable-zero-document-numberfalseNão aceita CPF ou CNPJ em que todos os números são zeros
data-interest-rate---Taxa de juros a ser cobrada na transação.
OBS: Apenas para cartão de crédito.
data-free-installments---Número de parcelas que não terão juros cobrados
data-default-installment1Define a parcela padrão selecionada ao abrir o checkout
data-header-textTotal a pagar {price_info}Define o texto do cabeçalho.
OBS: Você poderá utilizar a variável {price_info} para injetar o valor do pagamento no texto.
data-payment-button-textPagarDefine o texto do botão final de pagamento.

Inserindo a versão via API

A segunda forma é utilizando a nossa biblioteca de JavaScript para abrir o Checkout: 

<html>
    <head>
        <!-- SCRIPT PAGAR.ME -->
        <script src="https://assets.pagar.me/checkout/checkout.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    </head>
    <body>
        <button id="pay-button">Abrir modal de pagamento</button>

        <script>
            $(document).ready(function() {
                var button = $('#pay-button');

                button.click(function() {

                    // INICIAR A INSTÂNCIA DO CHECKOUT
                    // declarando um callback de sucesso
                    var checkout = new PagarMeCheckout.Checkout({"encryption_key":"SUA ENCRYPTION KEY", success: function(data) {
                        console.log(data);
                        //Tratar aqui as ações de callback do checkout, como exibição de mensagem ou envio de token para captura da transação
                    }});

                    // DEFINIR AS OPÇÕES
                    // e abrir o modal
                    // É necessário passar os valores boolean em "var params" como string
                    var params = {
                      "amount":1000,
                      "buttonText":"Pagar",
                      "customerData":true,
                      "paymentMethods":"boleto,credit_card",
                      "maxInstallments":12,
                      "uiColor":"#bababa",
                      "postbackUrl":"requestb.in/1234",
                      "createToken":true,
                      "interestRate":12,
                      "freeInstallments":3,
                      "defaultInstallment":5,
                      "headerText":"Título"
                    };
                    checkout.open(params);
                });
            });
        </script>
    </body>
</html>

Configurações da versão API

Você pode alterá-los conforme achar necessário com as propriedades disponíveis a seguir:

TagPadrãoDescrição
amount---Valor da transação (em centavos) a ser capturada pelo Checkout. Ex: R$14,79 = 1479
buttonTextPagarTexto do botão de pagamento.
buttonClass---Classe CSS a ser adicionada no botão de pagamento.
customerDatatrueCaso não deseje capturar dados do cliente pelo Checkout, setar como false.
paymentMethodscredit_card, boletoMeios de pagamento disponíveis no Checkout.
card_brandselo, amex, diners, jcb, hipercard, visa, aura, discover, mastercardVocê deve especificar aqui quais bandeiras quer aceitar.
maxInstallments1Número máximo de parcelas aceitas, de 1 a 12.
uiColor#1a6ee1Cor primária da interface de Checkout.
postbackUrl---Endereço da URL de POSTback do seu sistema, que receberá as notificações das alterações de status das transações
createTokentrueHabilita a geração do token para autorização da transação.
OBS: Caso você queira apenas pegar os dados do cliente, deixe esse atributo com o valor false, e realize a transação normalmente no seu backend, com os dados informados no callback do checkout.
customerName---Nome do cliente (Obrigatório)
customerDocumentNumber---CPF ou CNPJ do cliente (Obrigatório)
customerEmail---E-mail do cliente (Obrigatório)
customerAddressStreet---Nome do logradouro do cliente
customerAddressStreetNumber---Número do imóvel do cliente
customerAddressComplementary---Complemento do endereço do cliente
customerAddressNeighborhood---Bairro do cliente
customerAddressCity---Cidade do cliente
customerAddressState---Estado (unidade federativa) do cliente
customerAddressZipcode---Código de endereçamento postal (CEP) da cidade do cliente
customerPhoneDdd---DDD do telefone do cliente
customerPhoneNumber---Número do telefone do cliente
disableZeroDocumentNumberfalseNão aceita CPF ou CNPJ em que todos os números são zeros
interestRate---Taxa de juros a ser cobrada na transação
freeInstallments---Número de parcelas que não terão juros cobrados
defaultInstallment1Define a parcela padrão selecionada ao abrir o checkout
headerTextTotal a pagar {price_info}Define o texto do cabeçalho.
OBS: Você poderá utilizar a variável {price_info} para injetar o valor do pagamento no texto.
paymentButtonTextPagarDefine o texto do botão final de pagamento.
boletoDiscountPercentage---Define a porcentagem de desconto no boleto.
boletoDIscountAmount---Define o valor de desconto no boleto.
creditCardDiscountPercentage---Define a porcentagem de desconto no cartão de crédito
creditCardDiscountAmount---Define o valor de desconto no cartão de crédito

Acessando os dados do Checkout

Tanto a versão API quanto form, devem retornar para você um conjunto de informações para que consiga seguir o fluxo, sejam elas customer e payment_method, ou somente o Token. Então para manipular o retorno dessas informações você pode:

var checkout = new PagarMeCheckout.Checkout({
  encryption_key: "ENCRYPTION_KEY", 
  success: function(data) {
    console.log(data);
  },
  error: function(err) {
    console.log(err);
  }
});

<?php
//A versão formulário faz um POST na página marcada em Action você pode acessar 
// da seguinte forma em PHP
$card_hash = $_POST['pagarme']['card_hash'];

Capturando uma transação criada com Checkout

🚧

Captura automática

O Checkout Pagar.me não possui captura automática. Para realiza-lá, siga as instruções abaixo.

Assim como mencionado em nossa página de Overview, quando create token = true, o Checkout faz apenas uma autorização da transação criada. Depois disso, a partir do token retornado você deve encontrar a transação e enviar uma request de captura. A seguir, veja exemplos que ilustram isso:

curl -X POST "https://api.pagar.me/1/transactions/TOKEN/capture" -H 'content-type: application/json' -d '{
    "amount": "1000", 
    "api_key": "ak_test_grXijQ4GicOa2BLGZrDRTR5qNQxJW0"
}'

require 'pagarme'

PagarMe.api_key = "ak_test_grXijQ4GicOa2BLGZrDRTR5qNQxJW0";

transaction = PagarMe::Transaction.find_by_id("TOKEN")
transaction.capture({:amount => 1000})

<?php
require("vendor/autoload.php");

$pagarme = new PagarMe\Client('SUA_CHAVE_DE_API');

$capturedTransaction = $pagarme->transactions()->capture([
    'id' => 'ID_OU_TOKEN_DA_TRANSAÇÃO',
    'amount' => VALOR_TOTAL_COM_CENTAVOS
]);

PagarMeService.DefaultApiKey = "ak_test_grXijQ4GicOa2BLGZrDRTR5qNQxJW0";

Transaction transaction = PagarMeService.GetDefaultService().Transactions.Find("TOKEN");
transaction.Capture(1000);

import pagarme from 'pagarme'

pagarme.client.connect({ api_key: 'SUA_API_KEY' })
  .then(client => client.transactions.capture({ id: "TOKEN", amount: 1000 }))

❗️

Não faça no frontend!

Como a captura envolve informar a api_key, NÃO o faça 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.

Enviando: Metadata e Split Rules com o Checkout

Com o Checkout Pagar.me também é possível enviar metadata e split rules em uma transação. O envio é feito no momento de captura da transação. Basta passar a metadata e as split rules como parâmetros do request de captura. Mais em: Captura com split rules e metadata

Criando assinaturas com o Checkout

Para criar assinaturas com o Checkout Pagar.me você precisa usar a configuração create-token= false, assim como está explicado no nosso Overview. Desta forma, a sua plataforma recebe as informações necessárias para fazer isso, como dados de customer, método de pagamento, card_hash etc. Esses dados podem ser inseridos em uma request para a criação da assinatura. Veja mais em: Criando assinaturas.

Updated over 4 years ago