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 which you are obliged to follow.

Tutorial Requirements

• You should have already obtained your API credentials

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.

1
2
3
4
5
6
7
8
<div style={{width: '210px', height: '80px'}} 
    className="klarna-widget klarna-part-payment"
    data-eid="InsertYourEID" 
    data-locale="de_at"
    data-price="1201.34"
    data-layout="pale-v2"
    data-invoice-fee="0.95">
</div>

1
2
3
4
5
6
7
8
<div style={{width: '210px', height: '80px'}} 
    className="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>

1
2
3
4
5
6
7
8
<div style={{width: '210px', height: '80px'}} 
    className="klarna-widget klarna-part-payment"
    data-eid="InsertYourEID" 
    data-locale="da_dk"
    data-price="1201.34"
    data-layout="pale-v2"
    data-invoice-fee="0.95">
</div>

1
2
3
4
5
6
7
8
<div style={{width: '210px', height: '80px'}} 
    className="klarna-widget klarna-part-payment"
    data-eid="InsertYourEID" 
    data-locale="fi_fi"
    data-price="1201.34"
    data-layout="pale-v2"
    data-invoice-fee="0.95">
</div>

1
2
3
4
5
6
7
8
<div style={{width: '210px', height: '80px'}} 
    className="klarna-widget klarna-part-payment"
    data-eid="InsertYourEID" 
    data-locale="nl_nl"
    data-price="1201.34"
    data-layout="pale-v2"
    data-invoice-fee="0.95">
</div>

1
2
3
4
5
6
7
8
<div style={{width: '210px', height: '80px'}} 
    className="klarna-widget klarna-part-payment"
    data-eid="InsertYourEID" 
    data-locale="nb_no"
    data-price="1201.34"
    data-layout="pale-v2"
    data-invoice-fee="0.95">
</div>

1
2
3
4
5
6
7
8
<div style={{width: '210px', height: '80px'}} 
    className="klarna-widget klarna-part-payment"
    data-eid="InsertYourEID" 
    data-locale="sv_se"
    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.

Please include the javascript at the bottom of your page, just before the closing </body> tag

</body>

1
2
3
4
...
<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

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.