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
- You should have already obtained your API credentials
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>
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.
... <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:
|class||yes||This variable indicates the type of widget the script should generate.|
|data-eid||yes||Your estore eid.|
|data-locale||yes||The 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-price||yes||The 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.|
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
|data-invoice-fee||optional||If 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.