Render Confirmation snippet
This page describes how to render a Kustom Checkout confirmation snippet on your website.
Embedding the snippet
There are two recommended methods for embedding the confirmation snippet: server-side and client-side.
Server-side
Embed the HTML snippet directly into your page's HTML, retrieved from your backend.
<html>
<body>
<!-- Your confirmation page html -->
{{kustom_order.html_snippet}}
<!-- More of your confirmation page html -->
</body>
</html>This method is considered straightforward.
Client-side
Retrieve the snippet using an AJAX call and dynamically inject it into your page using JavaScript. Crucially, ensure script tags are correctly parsed and executed. Directly using innerHTML might not work correctly in this case.
getSnippet(/* Your backend endpoint URL */).then(function renderSnippet(htmlSnippet) {
var confirmationContainer = document.getElementById('my-confirmation-container')
confirmationContainer.innerHTML = htmlSnippet
var scriptsTags = confirmationContainer.getElementsByTagName('script')
// This is necessary otherwise the scripts tags are not going to be evaluated
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)Result
The snippet will render the confirmation iframe on your website.
Next steps:
To complete the integration, please review the following resources: