Official Klarna Technical Documentation

This product, Klarna Payments (kpm) is deprecated. Go to the current version

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

You should have already obtained your API credentials

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.

This section only applies to the regions:

Austria

1
2
3
4
5
6
<div className="klarna-widget klarna-logo-tooltip"
    data-eid="InsertYourMerchantID"
    data-locale="de_at"
    data-logo-name="blue+tuv"
    data-logo-width="385">
</div>

End of regional section

This section only applies to the regions:

Germany

1
2
3
4
5
6
<div className="klarna-widget klarna-logo-tooltip"
    data-eid="InsertYourMerchantID"
    data-locale="de_de"
    data-logo-name="blue+tuv"
    data-logo-width="385">
</div>

End of regional section

This section only applies to the regions:

Denmark

1
2
3
4
5
6
<div className="klarna-widget klarna-logo-tooltip"
    data-eid="InsertYourMerchantID"
    data-locale="da_dk"
    data-logo-name="logo_black"
    data-logo-width="385">
</div>

End of regional section

This section only applies to the regions:

Finland

1
2
3
4
5
6
<div className="klarna-widget klarna-logo-tooltip"
    data-eid="InsertYourMerchantID"
    data-locale="fi_fi"
    data-logo-name="logo_black"
    data-logo-width="385">
</div>

End of regional section

This section only applies to the regions:

Netherlands

1
2
3
4
5
6
<div className="klarna-widget klarna-logo-tooltip"
    data-eid="InsertYourMerchantID"
    data-locale="nl_nl"
    data-logo-name="logo_black"
    data-logo-width="385">
</div>

End of regional section

This section only applies to the regions:

Norway

1
2
3
4
5
6
<div className="klarna-widget klarna-logo-tooltip"
    data-eid="InsertYourMerchantID"
    data-locale="nb_no"
    data-logo-name="logo_black"
    data-logo-width="385">
</div>

End of regional section

This section only applies to the regions:

Sweden

1
2
3
4
5
6
<div className="klarna-widget klarna-logo-tooltip"
    data-eid="InsertYourMerchantID"
    data-locale="sv_se"
    data-logo-name="logo_black"
    data-logo-width="385">
</div>

End of regional section

Property	Required	Description
Property class	Required True	Description Combine the CSS classes `.klarna-widget` and `.klarna-logo-tooltip`
Property data-eid	Required True	Description Your estore id
Property data-locale	Required True	Description 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
Property data-logo-name	Required True	Description Name the picture to load. Supported values are: * logo_black * logo_white * blue+tuv * white+tuv
Property data-logo-width	Required True	Description 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

1
2
3
4
...
<script async src="https://cdn.klarna.com/1.0/code/client/all.js"></script>
</body>
</html>