Inserindo o Checkout [old]

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:

Tag	Padrão	Descriçã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-text	Pagar	Texto 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-methods	`credit_card`, `boleto`	Meios de pagamento disponíveis no Checkout.
data-card-brands	`elo`, `amex`, `diners`, `jcb`, `hipercard`, `visa`, `aura`, `discover`, `mastercard`	Você deve especificar aqui quais bandeiras quer aceitar.
data-max-installments	`1`	Número máximo de parcelas aceitas, de 1 a 12.
data-ui-color	`#1a6ee1`	Cor 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-token	`true`	Habilita 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-data	`true`	Habilita 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-number	`false`	Nã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-installment	`1`	Define a parcela padrão selecionada ao abrir o checkout
data-header-text	`Total 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-text	`Pagar`	Define 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:

Tag	Padrão	Descrição
amount		Valor da transação (em centavos) a ser capturada pelo Checkout. Ex: R$14,79 = `1479`
buttonText	`Pagar`	Texto do botão de pagamento.
buttonClass		Classe CSS a ser adicionada no botão de pagamento.
customerData	`true`	Caso não deseje capturar dados do cliente pelo Checkout, setar como `false`.
paymentMethods	`credit_card`, `boleto`	Meios de pagamento disponíveis no Checkout.
card_brands	`elo`, `amex`, `diners`, `jcb`, `hipercard`, `visa`, `aura`, `discover`, `mastercard`	Você deve especificar aqui quais bandeiras quer aceitar.
maxInstallments	`1`	Número máximo de parcelas aceitas, de `1 a 12`.
uiColor	`#1a6ee1`	Cor 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
createToken	`true`	Habilita 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
disableZeroDocumentNumber	`false`	Nã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
defaultInstallment	`1`	Define a parcela padrão selecionada ao abrir o checkout
headerText	`Total 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.
paymentButtonText	`Pagar`	Define 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.