Skip to content
Last updated

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:

Previous page
Next page