How to implement the Klarna Tooltip

Please note: The tooltip will update automatically with the new Klarna brand on the 28th August. Merchants are not required to take any action for this.

To make sure that you can capitalize on the full potential of our payment methods, we have developed a tooltip that allows your consumers to get information about our payment methods without creating any friction in your store.

What it is:
An information plate that shows a brief explanation of available payment options and about Klarna, enabling maximum information to consumer while using minimum real estate on your site. 

Where it’s used:
It appears when consumers hover the Klarna logo (or the Payment method display in Klarna Checkout stores).

What it does:
It provides short and easily accessed written info about Klarna and the payment methods offered through us, in complement to the visual elements.



Example of the tooltip



1. Create an element on your page

Place this element where you want the tooltip to be shown. The parameters required are listed in the code example below.

<div class="klarna-widget klarna-logo-tooltip"

Combine the CSS classes .klarna-widget and .klarna-logo-tooltip

data-eidTrueYour estore id

Lower-case ISO-639 language and a lower-case ISO-3166-1 alpha-2 country separated by an underscore.

Support locales are:

  • sv_se
  • nb_no
  • fi_fi
  • da_dk
  • de_de
  • en_us
  • en_gb

Name the picture to load.

Supported values are:

  • logo_black
  • logo_white
  • blue+tuv
  • white+tuv

Width in pixels, e.g. "400"

We recommend that the long version of the tooltip is between 330-440 px, and 240-312 px for the short version.

2. Include the Javascript on your page

Please include the Javascript at the bottom of your page, just before the closing </body> tag

<script async src=""></script>