Step-By-Step Guide
Howe to create your checkout project Step by Step

Step 01 : log onto the Admin Dashboard

Step 02 : Start creating your widget

Select Create your first Checkout

Step 03 : Fill in the basic data

Fill in the information about your token in this step
S
  1. 1.
    Select the correct Chain
  2. 2.
    Select the correct DEX that stores your token's liquidity (PancakeSwap, Sphynx, etc.)
  3. 3.
    Type in the Contract address
  4. 4.
    Enter in the Logo URL
  5. 5.
    Enter in the buy tax for your token - if unsure, honeypot.is will tell you (ETH AND BSC only for now)
Evaluate how the widget will look on your right side. If you are happy with it click Continue
You can only edit the logo url in this step and can't re-access this portion of the set-up once you complete it. (Future update will fix this)

Step 04 : Basic widget code completed

The basic widget code is now automatically generated and you can easily copy it for embedding now or later when you will have selected the checkout type and options

Step 05 : select the Checkout type

Select what type of Checkout you want, and graphical options ( can be different per checkout type)

Launch Button

Checkout Modal

Checkout Embed

Step 06 : Copy and assemble the code

At this point, you should have already generated your Checkout code, congratulations! What now? The next step is the assemble the code.
Video Guide - Building and assembling the code
Written instructions - You might have noticed that when you completed the first step of the set-up, you got a code that looks something like this, called the Checkout Library script:

Checkout Library scripts

//
<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 */
/* END EMBED CODE */
</script>Some code
In the second part of the set-up, you will get an additional code after customizing your Launcher, modal or Embed. Regardless of whether you choose a Launcher, embed, or modal, you will receive this additional code. Below is an example of what that code would look like for an embed, called the Embed Container:

Checkout Embed Container

window.EMBR.mount({
type: 'CheckoutEmbed',
options: {
checkoutId: '01G5XJ86XCD16HBRFC6BQ1Y6SH',
selector: '#checkout'
}
})// Some code
Checkout embeds, Checkout modals, and Checkout Launchers all have different looking codes, but the mechanics of assembling the code remain the same.
Now you have both the Library script and the second piece of code (dependent on what form of Checkout you choose).
It is easiest/best to open a notepad/textedit document and follow the next steps to assemble the code.

Assembling the code

Put the Checkout Embed Container into the Checkout Library script code, in between the
/* START EMBED CODE */
/* END EMBED CODE */
Doing this should make the final product look like this below:
<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: 'CheckoutEmbed',
options: {
checkoutId: '01G5XJ86XCD16HBRFC6BQ1Y6SH',
selector: '#checkout'
}
})
/* END EMBED CODE */
</script>
This step is literally copy and pasting the second piece of code into the Checkout Library script between the /*START and /*END parts.

How to add more then one Checkout form into one code.

The beauty of Checkout is that you can have combinations of our different Checkout forms. You can have a launcher, an embed AND a modal all on one page if you so choose. The more ways you have to allow your web traffic to buy, the more likely you are to get a buy go through.
Below, you will find instructions on how to assemble a code that includes multiple formats of Checkout.
After assembling the code you just go back to selecting another checkout type, you select your options and you copy the 2nd ( or 3rd) Checkout option in the already assembled code
<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>

How to embed the code in your project

please see section : Embed your Checkout code
Copy link
On this page
Step 01 : log onto the Admin Dashboard
Step 02 : Start creating your widget
Step 03 : Fill in the basic data
Step 04 : Basic widget code completed
Step 05 : select the Checkout type
Step 06 : Copy and assemble the code