Troubleshooting

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