Copy the Zonos JavaScript snippet
You can retrieve your Zonos JavaScript snippet via Dashboard:
- Go to Dashboard -> Settings -> Checkout.
- At the bottom of the page, locate the Integration script section
- Copy your integration script.
Add to your site's HTML
Once you have located and copied your JavaScript snippet, insert right before your site's closing <body> tag.
It is important for the Zonos JS script to be loaded in your checkout page's body tag so that when the script runs, your page's content is available and Checkout can properly bind to your checkout button.
We recommend using a server-side template engine or other secure techniques to insert your API key into your HTML with an environment variable. This will avoid exposing your API key in your HTML source code.
Configure the Zonos JavaScript snippet
You can configure all Checkout settings in Dashboard and the JavaScript snippet will load them automatically. If you would like to override any settings per-page or do more advanced dynamic configuration, you can do so by passing in an object to the zonos.init() function.
Zonos JS snippet
<script src="https://cdn.zonos.com/zonos.js" />
<script>
zonos.init({
// .. other fields
placeOrderButtonSelector: '#checkout-button', // Replace with your actual checkout button selector
// .. other fields
});
</script>
Test your integration
If you've configured everything properly, you should see the Zonos Checkout modal appear when you click your checkout button. If you don't see the modal, check your browser's console for any errors. See our Testing guide for full testing instructions.
JavaScript integration
How to do a custom JavaScript Checkout integration.COMING SOON
If your website uses an ecommerce platform that we don't have a pre-built plugin for, you can integrate Zonos Checkout with JavaScript. This gives you the most flexibility in terms of customizing the look and feel of your checkout page.
This guide assumes that you have already created a Zonos account and that you are familiar with the basics of JavaScript/HTML. If you are not familiar with JavaScript/HTML, we recommend that you use one of our pre-built plugins instead if possible, or contact our Professional Services team for a custom development quote.