DEV Community

Cover image for Creating a Powerful Pix Checkout with Woovi Plugin and HTML, CSS and Js
Danilo Assis for Woovi

Posted on

Creating a Powerful Pix Checkout with Woovi Plugin and HTML, CSS and Js

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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' }]);
Enter fullscreen mode Exit fullscreen mode

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',
   },
]);
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode

Result

Woovi checkout example

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.


Photo by RoonZ nl na Unsplash

Top comments (0)