Skip to main content


The OpenPix Plugin let you easily generate new Pix charges using few lines of code.

Getting Started

The first thing you need to do, it is to include OpenPix plugin script tag at the bottom of your html file

<script src="" async />

The script should be imported inside of .html file. For example, if your application is a React Application, the OpenPix Plugin script will be imported inside of index.html.

See the example below:

<!DOCTYPE html>
<html lang="pt-BR">
<title>Demo OpenPix Plugin</title>
<div id="root"></div>
<script src="" async /></script>

Initializing the plugin

The plugin is consumed using the native Window Object from Javascript API. For initialize, create an $openpix array on window to communicate with the plugin. Push your appID key like below:

window.$openpix = [];
window.$openpix.push(['config', { appID: 'YourOpenPixAppId' }]);

Generating a Pix Charge

OpenPix Plugin injects a special $openpix variable to enable your application to communicate with Plugin

You can create a new Pix Charge like this:

value: 1000,
correlationID: 'myCorrelationId',
description: 'product A',
  • value (optional): charge value in cents
  • correlationID (required): unique correlationID to identify charge
  • description (optional): description to be added to EMV BRCode Pix

Listening to Plugin Payment Status

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

const unsubscribe = window.$openpix.addEventListener(logEvents);

// call unsubscribe when you don't want to list to new events anymore