Render confirmation snippet
It’s now time to render the confirmation snippet.
Get the value of the html_snippet
from the read order call response and embed it into your page where you would like the confirmation iframe to be shown.
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 confirmation iframe.
1 2 3 4 5 6 7
<html> <body> <!-- Your confirmation page html --> {{klarna_order.html_snippet}} <!-- More of your confirmation 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 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 so this is what you should see in your browser:
Example Image. In different regions this looks different.
What’s next?
Well done, you have successfully integrated Klarna checkout and displayed the confirmation page!
To have a fully functional integration you need to read trough:
We highly recommend you to explore: