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_bdedef006248"></div>
<script type="text/javascript" src="https://int.coinramp.io/embedded/index.umd.js" ></script>
<script type="text/javascript">
<!-- Include generated js script here -->
</script>

JavaScript

const primePayWidgetConfig = {
appConfig: {
theme: {
type: "dark",
primary: {
main: "#00e650"
},
secondary: {
main: "#f514db"
}
},
token: "eyJhbGciOiJub25lIiwidHlwIjoiSldUIn0.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1laWRlbnRpZmllciI6ImY4ZWEzNTdlLTQ5ZmQtNDU1MC1hOTJmLTRiY2Y5YzQ1ODMwMiIsImlzcyI6Imh0dHBzOi8vaW50LmNvaW5yYW1wLmlvLyIsImF1ZCI6ImludGVncmF0b3JzIn0.",
widgetId: "2e120363-7795-4a7f-9121-bdedef006248"
},
iframeConfig: {
// if not specified widget will try to adjust own height depending on content
fixedHeight: "800"
}
};
// 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_bdedef006248")); // 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
}