Payment method widget

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

The payment method widget is a dynamic widget that may be used for example on your product pages. This widget informs consumers which payment methods you offer, and helps increase your conversion.

The Payment method widget automatically determines which payment method is the most appropriate for this product and calculates the total monthly cost for the consumer according to applicable laws and regulations. All it needs is a few basic variables from your side.

Note: Should you chose to not use our Payment Method widget when advertising payment method options outside of your checkout, please be aware there are strict regulations governing the presentation of information related to financing options. If you display ANY amount related information, the following applies/shall be presented:

  • Minimum order amount and monthly amount for when this is applicable - for example, in Norway the part payment amount may never be below 95 NOK per month

  • Information about the total credit purchase price

  • Information about the effective interest rate for the purchase

  • A link to Klarna's account product information, which in turn links to additional information including full Terms and Conditions

Tutorial Requirements

1. Create an element on your page

Place this element where you want the part payment widget to be shown. The width and height of the element should be 210px wide over 70px high. The parameters required are listed in the code example below.

<div style="width:210px; height:80px" 
     class="klarna-widget klarna-part-payment"
     data-eid="InsertYourEID" 
     data-locale="de_de"
     data-price="1201.34"
     data-layout="pale-v2"
     data-invoice-fee="0.95">
</div>

Please note: data-price and data-invoice-fee parameters accept only numerical values. The values should be surrounded by quotes and should not use any delimiters to denote thousands. If you want to denote decimals, please use a dot

Explanations regarding these variables can be found at the bottom of this page.

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>

Info: Using the async tag we assure that the consumer experience is not affected if there is any issue when loading the Klarna part payment widget.

This is an example of how the widget would look like on your site:

Payment Method Widget example

Parameters

ParameterRequiredDescription
classyesThis variable indicates the type of widget the script should generate.
data-eidyesYour estore eid.
data-localeyesThe locale to display the widget in. The locale has to be provided in the following format: language_country. Language is the official two letter representation of the language (i.e. sv) and country is the official two letter representation of the country (i.e. se).
data-priceyesThe total price of the product. Numerical values only. To indicate values with a decimal, please denote them with a dot. Do not use any delimiters for thousands.
data-layoutoptional

This currently can be set to "pale", "dark", "deep", or "deep-extra". If the value of this parameter is omitted/wrong or the parameter itself is missing, then we return the default layout, which is "pale".

Please note that if you have previously integrated with the "white" layout, you will be redirected to use the "pale" layout instead. The differences between the layouts are as follows.

"pale-v2": Black text with blue Klarna logo
"dark-v2": White text with blue Klarna logo
"deep-v2": White text with white Klarna logo
"deep-extra-v2": Black text with white Klarna logo

data-invoice-feeoptionalIf you add an invoice fee charged to the consumer, please specify it here. It will be used in the terms & conditions which are rendered when the "read more" button is pressed. Numerical values only. To indicate values with a decimal, please denote them with a dot. Do not use any delimiters for thousands.

Please note, if any of the data you provided is wrong, the widget will fallback to a default version. All errors are visible in the browser’s developer tools console.