SDK React.js

Get started

Adicione como dependência no seu site o checkout SDK

npm

npm install --save @plug-checkout/react

Yarn

yarn add @plug-checkout/react

Importe o Plug Checkout em um dos seus componentes

import PlugCheckout from "@plug-checkout/react";

<PlugCheckout
  sandbox
  publicKey="<YOUR_PUBLIC_KEY>"
  clientId="<YOUR_CLIENT_ID>"
  merchantId="<YOUR_MERCHANT_ID"
  paymentMethods={{
    pix: {
      expiresIn: 600,
    },
    credit: {
      installments: {
        quantity: 1,
        show: true,
      },
      showCreditCard: true,
    },
    boleto: {
      expiresDate: "2022-12-31",
      instructions: "Instruções para pagamento do boleto",
      interest: {
        days: 1,
        amount: 100,
      },
      fine: {
        days: 2,
        amount: 200,
      },
    },
  }}
  transactionConfig={{
    statementDescriptor: "#1 Demonstration Plug Checkout",
    amount: 100,
    description: "",
    orderId: "",
    customerId: "",
    currency: "BRL",
    capture: false,
  }}
  dialogConfig={{
    show: true,
    actionButtonLabel: "Continuar",
    errorActionButtonLabel: "Tentar novamente",
    successActionButtonLabel: "Continuar",
    successRedirectUrl: "https://www.plugpagamentos.com/",
    pixFilledProgressBarColor: "#344383",
    pixEmptyProgressBarColor: "#D8DFF0",
  }}
  onPaymentSuccess={(data) => {
    // Your specifications here
  }}
  onPaymentFailed={(error) => {
    // Your specifications here
  }}
/>;

Props

Abaixo a lista de propriedades de customização implementadas pelo componente de interface, use de acordo com suas necessidades de personalização.

Property	Description	Type	Default
publicKey	Chave pública para aplicações client-side, gerada pela API da Plug. Clique aqui para ler mais sobre isso na documentação.	string	undefined
clientId	Chave para identificar o cliente na Plug. Clique aqui para ler mais sobre isso na documentação.	string	undefined
merchantId	Identificação de subcontas na Plug. Clique aqui para ler mais sobre isso na documentação.	string	undefined
idempotencyKey	Chave de idempotência, se não informada, o próprio checkout gerará uma e vinculará com a cobrança. Clique aqui para ler mais sobre isso na documentação.	string	uuidv4
sandbox	Flag para definir se a chamada na API da Plug deve ser feita em ambiente de homologação ou produção.	boolean	false
transactionConfig	Objeto que configura as propriedades da transação.	object	{ statementDescriptor: '', amount: 0, description: '', orderId: '', customerId: '', currency: 'BRL', capture: false, customer: null, fraudAnalysis: null }
dialogConfig	Objeto que configura o dialog que exibe o status da transação.	object	{ show: true, actionButtonLabel: 'Continuar', successActionButtonLabel: 'Continuar', errorActionButtonLabel: 'Tentar Novamente', successRedirectUrl: '', pixFilledProgressBarColor: "#344383", pixEmptyProgressBarColor: "#D8DFF0" }
paymentMethods	Objeto que configura os métodos de pagamento que devem ser renderizados.	object	{ pix: undefined, credit: undefined, boleto: undefined, }
onPaymentSuccess	Evento chamado após o sucesso em uma transação.	function	undefined
onPaymentFailed	Evento chamado após a falha em uma transação.	function	undefined

Detalhes das Props

paymentMethods

Abaixo a lista de propriedades disponíveis para a configuração dos métodos de pagamento que devem ser renderizados.

Property	Description	Type	Default
pix	Objeto que configura o pagamento com PIX.	object	{ expiresIn: 600 }
boleto	Objeto que configura o pagamento com Boleto.	object	{ expiresDate: "yyyy-mm-dd", instructions: "", interest: { days: 1, amount: 100 }, fine: { days: 1, amount: 200 }}
credit	Objeto que configura o pagamento com Cartão de Crédito.	object	{ installments: { quantity: 1, show: true }, checkedSaveCard: false, showCreditCard: true },

transactionConfig

Abaixo a lista de propriedades disponíveis para a configuração de uma transação.

Property	Description	Type	Default
statementDescriptor	Descrição visível para o comprador.	string	""
amount	Valor TOTAL da transação em CENTAVOS.	number	0
description	Descrição da cobrança para consulta futura.	string	""
orderId	Identificador único da cobrança do lado do cliente para conciliação futura.	string	""
currency	Identificador da moeda para processamento da cobrança.	string	"BRL"
capture	Determina se a transação deve ser capturada imediatamente.	boolean	false
customerId	Identificador de um customer já criado para vincular a transação.	string	""
customer	Objeto para criação de um customer automaticamente ao fazer uma transação quando o customerId não for informado.	object	{ name: "", email: "", phoneNumber: "", document: { type: "", number: "", country: "" }, address: { zipCode: "", street: "", number: "", complement: "", neighborhood: "", city: "", state: "", country: "" } }
fraudAnalysis	Objeto para passagem dos parâmetros do antifraude. Caso o objeto de customer já tiver sido configurado no transactionConfig, não será necessário passá-lo dentro do objeto do fraudAnalysis	object	{ cart: [{ name: "", quantity: 0, sku: "", unitPrice: 0, risk: "Low or High" }], customer: { name: "", email: "", phoneNumber: "", document: { type: "", number: "", country: "" }, address: { zipCode: "", street: "", number: "", complement: "", neighborhood: "", city: "", state: "", country: "" } } }

dialogConfig

Abaixo a lista de propriedades disponíveis para a configuração do dialog de status da transação.

Property	Description	Type	Default
show	Define se o dialog deve ser renderizado.	boolean	true
actionButtonLabel	Rótulo padrão para os botões de ação do dialog.	string	"Continuar"
successActionButtonLabel	Rótulo para sucesso nos botões de ação do dialog.	string	"Continuar"
successRedirectUrl	URL para redirecionamento após o sucesso da transação.	string	""
errorActionButtonLabel	Rótulo para erro nos botões de ação do dialog.	string	"Tentar Novamente"
boletoWaitingPaymentMessage	Rótulo utilizado no cabeçalho do modal de pagamento do Boleto.	string	"Pedido aguardando pagamento!"
pixWaitingPaymentMessage	Rótulo utilizado no cabeçalho do modal de pagamento do PIX.	string	"Pedido aguardando pagamento!"
pixImportantMessages	Lista de textos utilizados para as informações importantes do pagamento com PIX.	array	["Vamos avisar por e-mail quando o banco identificar o depósito. Esse processo é automático.", "Caso o tempo de pagamento tenha expirado e o Pix não tenha sido pago, seu pedido será cancelado automaticamente. Não pague após este horário." ]
pixFilledProgressBarColor	Cor que indica o preenchimento do contador do PIX.	string	"#344383"
pixEmptyProgressBarColor	Cor que indica o fundo do contador do PIX.	string	"#D8DFF0"

Tema

Para customização do tema (cor, espaço, tipografia, etc.) você pode sobrescrever as variáveis no arquivo CSS principal do seu site. Abaixo a lista de variáveis suportadas:

:root {
  /* Colors */
  --plug-checkout-color-brand-accent-light: #4ebff1;
  --plug-checkout-color-brand-accent-normal: #0055a2;

  --plug-checkout-color-brand-clean: #d8dff0;
  --plug-checkout-color-brand-light: #0091ea;
  --plug-checkout-color-brand-normal: #5c7ec0;
  --plug-checkout-color-brand-middle: #344383;
  --plug-checkout-color-brand-dark: #141b4d;

  --plug-checkout-color-grey-light: #aaafc5;
  --plug-checkout-color-grey-normal: #8b90a7;
  --plug-checkout-color-grey-middle: #5e6277;
  --plug-checkout-color-grey-dark: #3f4252;
  --plug-checkout-color-grey-darkness: #1d1f2a;

  --plug-checkout-color-accent-light: #ffffff;
  --plug-checkout-color-accent-normal: #eef2f6;
  --plug-checkout-color-accent-middle: #aebfd0;

  --plug-checkout-color-warning-light: #fff8e1;
  --plug-checkout-color-warning-normal: #fac30e;
  --plug-checkout-color-warning-middle: #ffa200;

  --plug-checkout-color-modal-success: #32c000;
  --plug-checkout-color-modal-error: #ff1744;
  --plug-checkout-color-modal-neutral: #5e6277;
  --plug-checkout-color-modal-action-button-error: #344383;
  --plug-checkout-color-modal-action-button-error-hover: #5c7ec0;
  --plug-checkout-color-modal-action-button-success: #344383;
  --plug-checkout-color-modal-action-button-success-hover: #5c7ec0;
  --plug-checkout-color-modal-action-button-success-font-color: #ffffff;
  --plug-checkout-color-modal-action-button-error-font-color: #ffffff;

  /* Typography */
  --plug-checkout-typography-family: "Roboto", sans-serif;

  /* Spacings */
  --plug-checkout-spacing-xxs: 4px;
  --plug-checkout-spacing-xs: 8px;
  --plug-checkout-spacing-sm: 16px;
  --plug-checkout-spacing-default: 24px;
  --plug-checkout-spacing-md: 32px;
  --plug-checkout-spacing-lg: 48px;
  --plug-checkout-spacing-xlg: 64px;
  --plug-checkout-spacing-xxlg: 96px;

  /* Sizes */
  --plug-checkout-size-min-width: 250px;

  /* Border Radius */
  --plug-checkout-border-radius-default: 4px;
  --plug-checkout-border-radius-md: 6px;
  --plug-checkout-border-radius-lg: 20px;

  /* Transitions Time */
  --plug-checkout-transition-slow: 0.3s;
  --plug-checkout-transition-default: 0.5s;
}

Veja um exemplo clicando aqui.