Evaluate your Checkout code online with an online HTML/Script tester

How to evaluate the Checkout code with an online HTML /Script tester
Create the code you want to test, example : 
<script type="text/javascript" async src="https://cdn.embr.org/embeddables.es.js"></script>
    <script type="text/javascript">
    (function(){if(!window.EMBR){const t=[];window.EMBR={_init:t,mount:e=>t.push(e)}}})()
    /* START EMBED CODE */
        window.EMBR.mount({
        type: 'CheckoutLaunchButton',
        options: {
            checkoutId: '01G5YC0KXCR6EBBJZCZGTCA3BV',
            theme: 'dark'
        }
    })    
    /* END EMBED CODE */
</script>
Open an online HTML/Javascript test page. 
Examples are : 
https://cs.iupui.edu/~ajharris/webprog/jsTester.html
http://www.csgnetwork.com/htmlcodetest.html​
If there are no ID/Class references needed in the HTML code
So if you want to test a Checkout Launcher, you can just copy this Checkout code in the evaluation screen and wait a few seconds for the result. 
Copy the code
Wait for the result 
If there are ID/Class references needed in the HTML code
You can use a basic HTML template where you add the needed code 
In this example we have a Checkout Launcher ( no extra HTML code needed) in Combination with a Checkout Widget ( where we need an ID/Class reference)
<!DOCTYPE html>
<html>
   <head> 
   <title>Embr New</title>
  
   <script type="text/javascript" async src="https://cdn.embr.org/embeddables.es.js"></script>
   <script type="text/javascript">
   (function(){if(!window.EMBR){const t=[];window.EMBR={_init:t,mount:e=>t.push(e)}}})()
   /* START EMBED CODE */
         window.EMBR.mount({
         type: 'CheckoutLaunchButton',
         options: {
            checkoutId: '01G6B8C2MNN9J5MZZX9XTRKRQ8'
         }
      })
​
          window.EMBR.mount({
         type: 'CheckoutEmbed',
         options: {
            checkoutId: '01G6B8C2MNN9J5MZZX9XTRKRQ8',
            selector: '#checkout'
         }
      })
      
   /* END EMBED CODE */
   </script>
​
​
   </head>
   <body style="background-color:black;">
      <br>
     <p align = "center">
        <div id="checkout"></div>
     </p>
   </body>    
</html>
Sample test page with a an Embed and a Launcher
//Basic sample HTML page 
<html>
   <head> 
   <title>Sampe Test page</title>
	//Code goes here
   </head>
   <body style="background-color:black;">
      <br>
     <p align = "center">
        //change or add if needed
        <div id="checkout"></div>
     </p>
   </body>    
</html>
Preview your Checkout on a live website
Other Tips and Tricks
Last modified 5mo ago