JSFiddle - React, Tailwind, and code Playground

by Yuriy Petrichenko

HTML

<div id="render-target"></div>
    <script
      type="text/javascript"
      src="http://localhost:3002/embedded/index.umd.js"
    ></script>

JavaScript

window.action = {
        dispatch: ({ type } = args) => {
          if (type === "GET_USER_WALLETS") {
            return [
              {
                type: "ETH",
                address: "0x3072D0E9C9bf7C3649A7760d22519c1e5c8924b4",
              },
            ];
          }
        },
      };
      const primePayWidgetConfig = {
        appConfig: {
          transactionId: "12313",
          theme: {
            // type: "dark",
            type: "light",
            primary: {
              main: "#009aff",
            },
            secondary: {
              main: "#0ba90d",
            },
          },
          language: "en", // default one is en
          // identifier of an integrator
          token:
            "eyJhbGciOiJub25lIiwidHlwIjoiSldUIn0.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1laWRlbnRpZmllciI6IjZhNjI4MDc0LWVlMjktNDAzYy1hNWYxLTY3NzE1ZTJkODdjMyIsImlzcyI6Imh0dHBzOi8vZGV2LnNzcHAuc3BhY2UvIiwiYXVkIjoiaW50ZWdyYXRvcnMifQ.",
          widgetId: "61e1b553-80f8-4eaa-85c6-d05dbfa85e61",
        },
        iframeConfig: {},
      };
      const ppEmbedded = window.primePayEmbedded; // script included in previous step creates global "primePayEmbedded"
      const runWidget = () => {
        const ppApp = new ppEmbedded.PrimePay(primePayWidgetConfig);
        ppApp.render(document.getElementById("render-target")); // this renders widget in the tag you specified
      };
      const clearWidget = () => {
        const target = document.querySelector("#render-target");
        if (target) {
          target.remove();
        }
        const t = document.createElement("div");
        t.id = "render-target";
        document.body.appendChild(t);
      };

   
      runWidget();