Render Checkout snippet

It’s now time to render the checkout snippet.

Get the value of the html_snippet from the create order response and embed it into your page where you would like the Klarna Checkout to be rendered.

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.

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

1
2
3
4
5
6
7
<html>
  <body>
    <!-- Your checkout page html -->
    {{klarna_order.html_snippet}}
    <!-- More of your checkout page html -->
  </body>
</html>

Client side

Get the snippet via an ajax call from you 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 snippet using innerHTML is not going to work.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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
      parentNode.removeChild(scriptsTags[i])
      parentNode.appendChild(newScriptTag)
  }
}).catch(renderError)

Result

The snippet will render the checkout iframe so this is what you should see in your browser:

Example Image: This can be different dependent on the region you are in.Example Image: This can be different dependent on the region you are in.

What’s next?

It’s time to complete the purchase and read order to get the confirmation page snippet.