Creating a Powerful Pix Checkout with Woovi Plugin and HTML, CSS and Js
Tags: webdev, javascript
Published: 2023-05-03 15:38:48

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

```html
<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:

```html
<!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](./app-id) key as below:

``` jsx
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:

``` jsx
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: 

```html
<!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


![Woovi checkout example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uhs2gblj1ialtu0bc1gg.png)

## Conclusion
Follow our [official documentation](https://developers.woovi.com/docs/plugin) 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!](https://woovi.com/jobs/)

---

[Woovi](https://woovi.com/) 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 <a href="https://unsplash.com/@roonz_nl?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">RoonZ nl</a> na <a href="https://unsplash.com/pt-br/fotografias/2xEQDxB0ss4?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>