JSFiddle - React, Tailwind, and code Playground

by Yuriy Petrichenko

HTML

<!-- 
        This is the element where you want to render the widget 
        If you've set iframe height to be 100% in the settings, make sure to have 
        proper styles in this element (for instance add style="height: 100%" here and in all parent elements 
        in order to have widget that takes all the screen height) 
    -->
    <div id="render-target_d05dbfa85e61"></div>
    <script type="text/javascript" src="https://dev.coinramp.io/embedded/index.umd.js" ></script>
    <script type="text/javascript">
     const primePayWidgetConfig = {
      appConfig: {
        theme: { 
          type: "dark",
          primary: {
              main: "#636363"
          },
          secondary: {
              main: "#e82c6e"
          }
      },
      token: "eyJhbGciOiJub25lIiwidHlwIjoiSldUIn0.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1laWRlbnRpZmllciI6IjZhNjI4MDc0LWVlMjktNDAzYy1hNWYxLTY3NzE1ZTJkODdjMyIsImlzcyI6Imh0dHBzOi8vZGV2LnNzcHAuc3BhY2UvIiwiYXVkIjoiaW50ZWdyYXRvcnMifQ.",
      setWalletAddress: () => { 
           return // Expected result [{"type":"BTC","address":"BTC wallet address"},{"type":"ETH","address":"ETH wallet address"},{"type":"USDC","address":"USDC wallet address"}]
      },
      widgetId: "61e1b553-80f8-4eaa-85c6-d05dbfa85e61"
    },
      iframeConfig: {
        // if not specified widget will try to adjust own height depending on content
          fixedHeight: "" 
      }
    };
    // script included in previous step creates global "primePayEmbedded"
    const ppEmbedded = window.primePayEmbedded;
    if (ppEmbedded) {
      const ppApp = new ppEmbedded.PrimePay(primePayWidgetConfig);
      ppApp.render(document.getElementById("render-target_d05dbfa85e61")); // this renders widget in the tag you specified
    } else {
      // If you get here embedded script that you've included in html was not executed yet
    }
    
    </script>