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.

Prerequisites

 

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"
    data-eid="InsertYourMerchantID"
    data-locale="de_de"
    data-logo-name="blue+tuv"
    data-logo-width="385">
</div>
PropertyRequiredDescription
classTrue

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

data-eidTrueYour estore id
data-localeTrue

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
data-layoutFalse

Decide what layout the tooltip should have

Supported values are:

  • blue (default)
  • white
data-logo-nameTrue

Name the picture to load.

Supported values are:

  • logo_black
  • logo_white
  • blue+tuv
  • white+tuv
data-logo-widthTrue

Width in pixels, e.g. "400"

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="https://cdn.klarna.com/1.0/code/client/all.js"></script>
</body>
</html>