Skip to main content

Checkout drop-in SDK

The Plug Checkout is a web/mobile interface drop-in (component) simple to customize and extend. Within Plug Checkout SDK you get access to integrate a ready to go interface on the fire to make charges without one line of code just Plug the SDK into your app.

Why Plug Checkout

Responsive

The Plug Checkout is designed to be responsive and to implement all the payment methods availables in the API, without redirection, everything happens inside your website.

Customized

The high customizable component, thinked to get you most of flexibility to create beautiful interfaces in your way.

PCI Level 1

In compliance with the best payments industry security practices, using the Plug Checkout you can safe storage all the card holder's data for future charges, simple and secure.

Simple usage

Our engineers drive up all the efforts to get you work simple, the Plug Checkout is the best option. Built for different frameworks, you can choose React, Angular, Vue ou vanilla javascript.

First steps

  1. Set up your client token from your backend
  2. Initialize the Plug Checkout in your website ou mobile app using the client token for public authentication
  3. The Checkout SDK will collect all the data need to make the charge and create the transaction
  4. Implement the callback methods paymentSuccess and paymentFailed to receive the created authorization data
  5. For async payment methods, like PIX and Boleto, you must implement the webhooks notification in your backend to get noticed about confirmed charges

Public authentication key

Is it possible to create public authentication key, with restricted access to API services.

You must use these client tokens every time you have to expose you api key in a client side application.

Creating the public authentication key Criando 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"
    }'

Response with created public authentication key 

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

Your public key can be used like your secret api key, but has restricted scope and limited expiration time.

Get the Checkout SDK into your web or mobile app

Choose the best SDK distribution based in your preferred javascript framework:

  • Checkout SDK implemented for Javascript
  • Checkout SDK implemented for React
  • Checkout SDK implemented for Vue
  • Checkout SDK implemented for Angular