Pular para o conteúdo principal

Checkout drop-in SDK

O Plug Checkout é um drop-in (componente) de interface para web e mobile altamente customizável e extensível. Através do Checkout SDK você tem disponível para integração uma interface pronta 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.

Benefícios do Plug Checkout

Responsivo

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.

Customizável

Um componente altamente customizável pensado 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 você pode salvar os dados de cartão para compra futura, de maneira segura.

Fácil de usar

Nosso time de desenvolvedores pensou em tudo para simplificar o seu trabalho, o Plug Checkout é o único do mercado disponibilizado 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. Inicialize o Plug Checkout no seu site ou aplicativo com a chave pública de autenticação criada.
  3. O Checkout SDK irá coletar os dados necessários para cobrança e criar uma nova transação.
  4. Implemente os métodos paymentSuccess e paymentFailed do Checkout para receber os dados da autorização criada.
  5. 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:

  • Implementação do Checkout SDK em Javascript
  • Implementação do Checkout SDK em React
  • Implementação do Checkout SDK em Vue
  • Implementação do Checkout SDK em Angular