Adding the JavaScript widget to your page

To install the widget, simply drop the following code onto your site.

Ensure that the patToken is generated and available to your page

<script>
  (function() {
    var script = document.createElement('script');
    script.src = "https://storage.googleapis.com/fluz-fluz-file-uploads-prod-ricuyxowbwlfprel/widgets/fluz-embedded-payment-widget.js?v1.1.1";
    script.async = true;

    script.onload = function() {
      if (typeof FluzEmbedded !== "undefined") {
        FluzEmbedded.init({
          apiKey: "" // Your api_key,
          transaction_type: "", // DEPOSIT or WITHDRAW
          amount: 0, // Pass in the amount here
          onOpen: () => console.log("Modal opened"),
          onClose: () => console.log("Modal closed"),
          patToken: "", // Pass in your generatedToken
        });
      } else {
        console.warn("FluzEmbedded not available yet.");
      }
    };

    document.head.appendChild(script);
  })();
  </script>

This snippet will load the script from our remote bucket and add it to your page, and the initiate the widget.

Add a button to an existing container on your page.

<script>
  window.addEventListener("DOMContentLoaded", () => {
    const el = document.getElementById("btn-container"); // replace "btn-container" with your preferred selector
    FluzEmbedded.renderButton(el);
  });

  setInterval(() => {
    console.log("Is modal open?", FluzEmbedded.isOpen());
  }, 3000);
  </script>

Bind the widget to an existing button on your page.

 <script>
  document.addEventListener("DOMContentLoaded", () => {
    const button = document.getElementById("existing-button"); // replace "existing-button" with your preferred selector
    if (button) {
      button.addEventListener("click", () => {
        FluzEmbedded.openModal();
      });
    }
  });

  setInterval(() => {
    console.log("Is modal open?", FluzEmbedded.isOpen());
  }, 3000);
  </script>