Render Checkout snippet
This page describes how to render the Kustom Checkout (KCO) snippet on a webpage.
Embedding the snippet
There are two ways to embed the KCO snippet: server-side or client-side.
Server-side
Embed the HTML snippet directly into the page served by your backend.
<html>
<body>
<!-- Your checkout page html -->
{{kustom_order.html_snippet}}
<!-- More of your checkout page html -->
</body>
</html>This is the most straightforward approach.
Client-side
Retrieve the HTML snippet via an AJAX call from your server and inject it dynamically using JavaScript. Crucially, you must ensure that any script tags within the snippet are properly parsed and executed. Using innerHTML directly may not work correctly.
getSnippet(/* Your backend endpoint URL */).then(function renderSnippet(htmlSnippet) {
var checkoutContainer = document.getElementById('my-checkout-container');
checkoutContainer.innerHTML = htmlSnippet;
var scriptsTags = checkoutContainer.getElementsByTagName('script');
// Properly parse and execute embedded script tags
for (var i = 0; i < scriptsTags.length; i++) {
var parentNode = scriptsTags[i].parentNode;
var newScriptTag = document.createElement('script');
newScriptTag.type = 'text/javascript';
newScriptTag.text = scriptsTags[i].text;
parentNode.removeChild(scriptsTags[i]);
parentNode.appendChild(newScriptTag);
}
}).catch(renderError);Important Note: Ensure you keep the script tags within the snippet as received. Injecting the snippet directly into an iframe or similar HTML element will cause issues with the user interface and functionality.