Klarna Docs - Troubleshooting


Learn how to solve some common On-site messaging integration issues.

Take a look at our Best practices for tips about improving the loading time.

  • Check that your <klarna-placement> and script tags are valid HTML.
  • Make sure you're only loading 1 instance of the JavaScript library per page.
  • Check that you're using the snippet with the right data-client-id from the correct environment.
  • On-site messaging is connected to your payment methods, so make sure everything is enabled and that Klarna payments or Klarna checkout is loaded on your checkout page.
  • Often, the purchase amount isn't correct. Make sure you're sending the correct purchase amount in minor units.
  • If all the above is working, check the network requests to js.klarna.com. Look for errors and 204s to find minor errors that keep On-site messaging from loading.

On-site messaging is rendered inside shadow DOM to improve loading times. Using the Fastclick library makes the elements unclickable inside shadow DOM. This is a known issue.

Here are some ways to fix the issue:

  • Remove the FastClick library (optimal solution).
  • Add the needsclick class to all shadowhost divs. Shadowhost divs of On-site messaging are added dynamically by the On-site messaging script while processing the placements. You have to observe the change and add the needsclick class only after a shadowhost div is appended. To query the elements where the needsclick class should be added, run the following:
const elements = document.querySelectorAll('klarna-placement div')

Querying elements that require a needsclick class.

On-site messaging code in HTML.

Example of On-site messaging code in a website's source code.