Pular para o conteúdo principal

Plugin

O Plugin OpenPix permite criar facilmente cobranças Pix usando poucas linhas de código.

Começando

A primeira coisa que você precisa fazer é incluir a tag de script do plugin OpenPix na parte inferior do seu arquivo html

<script src="https://plugin.openpix.com.br/v1/openpix.js" async />

O script deve ser importado dentro de um arquivo .html. Por exemplo, se seu aplicativo for um aplicativo em React, o script do Plugin OpenPix será importado dentro de index.html.

Veja o exemplo abaixo:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Demo OpenPix Plugin</title>
</head>
<body>
<div id="root"></div>
<script src="https://plugin.openpix.com.br/v1/openpix.js" async /></script>
</body>
</html>

Inicializando o plugin

O plugin é consumido usando o objeto Window nativo da API Javascript. Para inicializar, crie um array $ openpix window para se comunicar com o plugin. Insira a chave do seu appID como abaixo:

window.$openpix = window.$openpix || []; // priorize o objeto já instanciado
window.$openpix.push(['config', { appID: 'YourOpenPixAppId' }]);

Gerando uma cobrança Pix

O Plugin OpenPix injeta uma variável $openpix especial para permitir que seu aplicativo se comunique com o Plugin

Você pode criar uma nova Cobrança Pix como este:

window.$openpix.push([
'pix',
{
value: 1000, // R$ 10,00
correlationID: 'myCorrelationId',
description: 'product A',
},
]);
  • value (opcional): valor da cobrança em centavos
  • correlationID (obrigatório): correlationID única para identificar a cobrança
  • description (opcional): descrição a ser adicionada ao EMV BRCode Pix

Gerando uma cobrança Pix com Cliente

O Plugin OpenPix injeta uma variável $openpix especial para permitir que seu aplicativo se comunique com o Plugin

Você pode criar uma nova Cobrança Pix adicionando um cliente assim:

window.$openpix.push([
'pix',
{
value: 1000, // R$ 10,00
correlationID: 'myCorrelationId',
description: 'product A',
customer: {
name: 'Customer',
email: 'customer@gmail.com',
taxID: '098.969.330-90',
phone: '+5511940461111',
},
},
]);
  • value (opcional): valor da cobrança em centavos
  • correlationID (obrigatório): correlationID única para identificar a cobrança
  • description (opcional): descrição a ser adicionada ao EMV BRCode Pix
  • customer (opcional): cliente selecionado a ser cobrado
    • name: nome do cliente
    • email: email do cliente
    • taxID: CPF ou CNPJ do cliente
    • phone: telefone do cliente

Gerando uma cobrança Pix com Informações Adicionais

O Plugin OpenPix injeta uma variável $openpix especial para permitir que seu aplicativo se comunique com o Plugin

Você pode criar uma nova cobrança Pix com informações adicionais da seguinte forma:

window.$openpix.push([
'pix',
{
value: 1000, // R$ 10,00
correlationID: 'myCorrelationId',
description: 'product A',
additionalInfo: [
{
key: 'info',
value: '123',
},
{
key: 'info2',
value: 'value',
},
],
},
]);
  • value (opcional): valor da cobrança em centavos
  • correlationID (obrigatório): correlationID única para identificar a cobrança
  • description (opcional): descrição a ser adicionada ao EMV BRCode Pix
  • additionalInfo (opcional): Informações adicionais relacionadas a cobrança
    • key: chave que contêm o valor da informação adicional
    • value: é um valor que contêm a informação adicional passada. Ex: '123'

Gerando uma cobrança Pix com Tempo de Expiração

O Plugin OpenPix injeta uma variável $openpix especial para permitir que seu aplicativo se comunique com o Plugin

Você pode criar uma nova cobrança Pix com um tempo de expiração da seguinte forma:

window.$openpix.push([
'pix',
{
value: 1000, // R$ 10,00
correlationID: 'myCorrelationId',
expiresIn: 2100, // 35 minutos em segundos
},
]);
  • value (opcional): valor da cobrança em centavos
  • correlationID (obrigatório): correlationID única para identificar a cobrança
  • expiresIn (opcional): tempo em segundos que a cobrança permanecerá disponível.
    • Deve ser maior que 15 minutos
    • Exemplo: expiresIn: 1200 = 20 minutos

Consultar o Estado de Pagamento do Plugin

const logEvents = (e) => {
if (e.type === 'PAYMENT_STATUS') {
if (e.data.status === 'COMPLETED') {
console.log('the charge was paied');
}
}
};

// only register event listener when plugin is already loaded
if (window.$openpix?.addEventListener) {
const unsubscribe = window.$openpix.addEventListener(logEvents);

// call unsubscribe when you don't want to list to new events anymore
unsubscribe();
}