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.
- You should have already obtained your API credentials
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>
Combine the CSS classes
|data-eid||True||Your estore id|
Lower-case ISO-639 language and a lower-case ISO-3166-1 alpha-2 country separated by an underscore.
Support locales are:
Name the picture to load.
Supported values are:
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.
... <script async src="https://cdn.klarna.com/1.0/code/client/all.js"></script> </body> </html>