Pular para o conteúdo principal

Checkout drop-in SDK

O Plug Checkout e Plug Checkout Full são drop-ins (componentes) de interface para web e mobile altamente customizáveis e extensíveis. Através dos Checkouts SDKs você tem disponível para integração interfaces prontas para realizar cobranças por cartão de crédito, pix e boleto sem ter que desenvolver uma linha de código, basta plugar no seu site ou aplicativo e usar.

FuncionalidadePlug CheckoutPlug Checkout Full
Módulo PIX
Módulo Cartão de Crédito
Módulo Boleto
Módulo NuPay
Tokenização de cartão
Vincula cartão ao cliente
Integra com sessões
Altamente customizável
Lista de itens do pedido
Formulário de cadastro de cliente

Live preview do Plug Checkout

Abaixo versão interativa do Plug Checkout onde você pode explorar e usar a interface.

info

Não é possível finalizar um pagamento no preview do Plug Checkout

https://example.com/checkout

Live preview do Plug Checkout Full

Você pode acessar uma demo do Plug Checkout Full neste link.

info

Não é possível finalizar um pagamento no preview do Plug Checkout Full.

Plug Checkout Full

Benefícios do Plug Checkout e Plug Checkout Full

Responsivos

O Plug Checkout foi projetado para ser responsivo e implementar os métodos de cobrança que você desejar, sem redirecionamento, tudo no seu site. Já o Plug Checkout Full entrega os mesmos benefícios de responsividade e métodos de cobrança, porém em uma página completa de checkout.

Customizáveis

Componentes altamente customizáveis pensados para que você tenha o máximo de flexibilidade para deixar a experiência do seu jeito.

PCI Level 1

Em conformidade com as melhores práticas de segurança da industria de pagamentos, com o Plug Checkout e Plug Checkout Full você pode salvar os dados de cartão para compra futura, de maneira segura.

Fáceis de usar

Nosso time de desenvolvedores pensou em tudo para simplificar o seu trabalho, o Plug Checkout e Plug Checkout Full são os únicos do mercado disponibilizados em diversos frameworks, você escolhe se quer usar em React, Angular, Vue, ou javascript vanilla.

Primeiros passos

  1. Crie um chave pública de autenticação no seu backend.
  2. Escolha o SDK que atende melhor a sua necessidade.
  3. Inicialize o Plug Checkout escolhido no seu site ou aplicativo com a chave pública de autenticação criada.
  4. O Checkout SDK irá coletar os dados necessários para cobrança e criar uma nova transação.
  5. Implemente os métodos paymentSuccess e paymentFailed do Checkout SDK que você usará (verifique a documentação da implementação de cada tecnologia) para receber os dados da autorização criada.
  6. Para os métodos de pagamento assíncronos, como PIX e Boleto, implemente o recebimento das notificações de webhooks no seu backend para ser avisado quando um pagamento é confirmado.

Chave pública de autenticação

É possível criar chaves públicas de acesso temporária a API com escopo e tempo de expiração limitados.

Recomendamos o uso deste tipo de chave quando você tiver que expor a chave em uma aplicação client side.

Criando uma chave de autenticação pública POST /v1/auth

  curl --location --request POST 'https://api.plugpagamentos.com/v1/auth' \
--header 'X-Client-Id: <YOUR_CLIENT_ID>' \
--header 'X-Api-Key: <YOUR_SECRET_KEY>' \
--header 'Content-Type: application/json' \
--data-raw '{
"scope":["tokens"],
"expires": 31104000"
}'

Resposta da chave pública criada

{
"clientId": "<YOUR_CLIENT_ID>",
"publicKey": "<YOUR_PUBLIC_KEY>",
"scope": ["tokens"],
"expires": 31104000,
"createdAt": "20200110 00:00:00"
}
caution

A sua chave pública criada pode ser usada normalmente como se fosse a chave secreta da sua conta, porém com a restrição imposta pelo escopo e sendo invalidada após a expiração.

Implemente o Checkout SDK no seu site ou app

Escolha o SDK ideal para o seu site de acordo com o framework de sua preferência: