# 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 {{kustom_order.html_snippet}} ``` 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. ```javascript 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.