Plugins are a way to extend the functionality of Woovi without modifying its core code. They allow you to add new features, modify existing ones, or integrate with third-party services. Woovi plugins are written in Javascript and you can embed in any language that supports js scripts.
With Woovi and one line of code you can start to create Pix charges and innovate in the way you want.
Plugin
The Woovi plugin works like an widget. You render it with a script tag and with js events you operate it.
You can configure, create charges, customers, listen these charges and accordingly with it status do the next step as you want to.
Creating the Widget Plugin
The first thing is to include the Woovi plugin script tag at the bottom of the html file
<script src="https://plugin.woovi.com/v1/woovi.js" async>
The script can be imported into an .html file. For example, if your app is a React app, the Woovi Plugin script will be imported inside index.html.
See the example below:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<title>Woovi Plugin Demo</title>
</head>
<body>
<div id="root"></div>
<script src="https://plugin.woovi.com/v1/woovi.js" async></script>
</body>
</html>
Initializing the Widget plugin
The plugin is consumed using the Window object native to the Javascript API. To boot, create a $woovi window array to communicate with the plugin.
Enter your appID key as below:
window.$woovi = window.$woovi || []; // prioritize the already instantiated object
window.$woovi.push(['config', { appID: 'YourWooviAppId' }]);
Your plugin is now ready to be consumed.
Generating a Pix charge
The Woovi Plugin injects a special $woovi variable to allow your application to communicate with the Plugin
You can create a new Pix Charge like this:
window.$woovi.push([
'pix',
{
value: 1000, // BRL 10.00
correlationID: 'myCorrelationId',
description: 'product A',
},
]);
- value (required): charge amount in cents, required on all charges
- correlationID (required): unique correlationID to identify the charge, required on all charges
- description (optional): description to be added to EMV BRCode Pix
HTML file
Below is an example with a completed example of how to create a pix charge and also listen the changes of status from this charge:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="root"></div>
<button onclick="generatePix()">Pagar</button>
<script src="https://plugin.woovi.com/v1/woovi.js" async></script>
<script>
function generatePix() {
document.$woovi = window.$woovi || [];
window.$woovi.push([
"config",
{
appID: "your-app-id",
},
]);
window.$woovi.push([
"pix",
{
value: 10000, // R$ 100,00
correlationID: "correlationIDexample",
},
]);
const logEvents = (e) => {
if (e.type === "CHARGE_COMPLETED") {
console.log("The charge has been paid");
}
if (e.type === "CHARGE_EXPIRED") {
console.log("The charge has expired");
}
if (e.type === "CHARGE_CLOSE") {
console.log("The charge modal was closed");
}
};
// only register event listener when plugin is already loaded
if (window.$woovi?.addEventListener) {
const unsubscribe = window.$woovi.addEventListener(logEvents);
// call unsubscribe when you don't want to list to new events anymore
unsubscribe();
}
}
</script>
</body>
</html>
Result
Conclusion
Follow our official documentation and discover more possibilites to create your own implementation of pix and innovate as you want
If you want to work in a startup in its early stages, This is your chance. Apply today!
Woovi is a Startup that enables shoppers to pay as they please. To make this possible, Woovi provides instant payment solutions for merchants to accept orders.
Top comments (0)