Skip to main content

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.

Live preview do Plug Checkout​

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

https://example.com/checkout

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