Implementing multiple Checkout forms/interfaces on a single page
There is a benefit to incorporating multiple Checkout interfaces in many situations. Having a Checkout Embed, a Modal, and Checkout Launcher working together on one webpage can truly maximize the accessibility of your token to a prospective buyer.
With the various Checkout formats, you can implement Checkout in whatever combination you desire to provide ease of access without ruining the look or feel of your webpage!
!DOCTYPE html>
<html>
<head>
<title>Multiple Embr Checkouts</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: '01G5XJ86XCD16HBRFC6BQ1Y6SH'
// Custom settings here
}
})
window.EMBR.mount({
type: 'CheckoutEmbed',
options: {
checkoutId: '01G5XJ86XCD16HBRFC6BQ1Y6SH',
selector: '#checkout'
}
})
/* END EMBED CODE */
</script>
</head>
<body style="background-color:black;">
<p align = "center">
<div id="checkoutEmbedID"></div>
</p>
</body>
</html>
You can have multiple EMBR.mount definitions if you want to use multiple Checkout formats on the same webpage - for instance if you wish to have the Checkout Launcher and a modal overlay attached a "Buy here" button. This is possible, and even encouraged, so long as you remember to have unique Identifiers and have set the selector to be unique.
You can also leave one selector blank to use the default #checkout, but do set the other selectors : to a unique value.
In this example above, there is no <div id> for the Checkout launcher as it does not need one.
Please make sure you use different Identifiers by setting the selector:
//combine the multiple types into a single array
window.EMBR.mount([
{
type: 'CheckoutLaunchButton',
options: {
checkoutId: '01G5XJ86XCD16HBRFC6BQ1Y6SH'
// Custom settings here
}
},
{
type: 'CheckoutEmbed',
options: {
checkoutId: '01G5XJ86XCD16HBRFC6BQ1Y6SH',
selector: '#checkout'
}
}
])
You can also combine these in an array to only call window.EMBR.mount once
Copy link