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:



## 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 na sua Dashboard.
data-amount---Valor da transação (em centavos) a ser capturada pelo Checkout. Ex: R$14,79 = `1479`
data-button-textPagarTexto mostrado no 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 aparece embaixo do botão de pagamento Boleto.
data-credit-card-helper-text---Mensagem opcional que aparece 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 recebe 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 você não queira 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ê pode utilizar a variável `{price_info}` para injetar o valor do pagamento no texto.
data-payment-button-text`Pagar`Define o texto mostrado no botão de confirmação de pagamento.

## Inserindo a versão via API

A segunda forma de inserir essa ferramenta no seu site é utilizando a nossa biblioteca de JavaScript para abrir o Checkout:



## 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`
buttonText`Pagar`Texto mostrado no botão de pagamento.
buttonClass---Classe CSS a ser adicionada no botão de pagamento.
customerData`true`Caso não queira capturar dados do cliente pelo Checkout, configurar 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 seja possível seguir o fluxo, sejam elas customer e payment_method, ou somente o `token`. Então para manipular o retorno dessas informações você pode:



## 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:



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 — 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 as informações de 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. Veja 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](🔗).