Klarna Docs - Render Checkout snippet
Render Checkout snippet

It’s now time to render the checkout snippet.

From the create order call response, get the html_snippet property and embed it into your page where you would like the KCO to be rendered at.

Embedding the snippet

There are two recommended ways of embedding the HTML snippet, server side or client side.

Server side

Embed the HTML snippet in your page served by your backend.

MARKUP
<html>
  <body>
    <!-- Your checkout page html -->
    {{klarna_order.html_snippet}}
    <!-- More of your checkout page html -->
  </body>
</html>

This is the most straightforward approach for rendering the checkout iframe.

Client side

Get the HTML snippet via an Ajax call from your server and inject it dynamically, using Javascript, into your page. In this case, we should be sure that the script tag(s) are parsed and evaluated, which means, inserting the HTML snippet using innerHTML is not going to work.

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')
  // 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

Make sure to keep the script tags within the snippet as you receive them.

Result

The snippet will render the checkout iframe.

Make sure to inject the snippet as-is in your main page/frame instead of inside an iframe, object or similar HTML tag since this would causes UI/UX and functionalities issues.