TRY IT FOR YOURSELF

const { ValueViewerSymbol } = require("@runkit/value-viewer"); // Class uses runkit to inject widget HTML code from documentation into containing page based on widget settings passed in. class Widget { constructor(configuration) { const title = "In-Checkout Widget"; const HTML = `<${"script"}> (function(w,d,n,s,p){ w[n] = w[n] || function(){( w[n].q = w[n].q||[]).push(arguments)}, w[n].l = +new Date(); s = d.createElement('script'), p = d.scripts[0]; s.async = s.src = 'https://icw.protecht.io/client-widget.min.js'; p.parentNode.insertBefore(s,p); })(window ,document ,'tg'); // Tells widget we are ready to render based on settings passed. tg('configure', ${JSON.stringify(configuration)}); <${"/script"}> <${"iframe"} onload="!function(){try{sendInfoToTGIframe()}catch(n){}}()" src="https://icw.protecht.io/test.html" style="width:100%;border:0" id="tg-widget"> <${"/iframe"}>`; return { [ValueViewerSymbol]: { title, HTML } }; } } // Widget configuration settings. Change "costsOfItems" value to see live price updates and then click "run" on the lower right. new Widget({ apiKey: "pk_sandbox_fb2bb717f887af3a8134318e6f9e114d030ffae4", locale: "en_US", currency: "USD", sandbox: true, costsOfItems: ["5.00"] });