2.1: Display the Klarna widget.

Before proceeding, ensure you've initialized Klarna's Javascript SDK.

At checkout, the customer can select from the widget Klarna as the payment method for their purchase.

You need to use our JavaScript SDK to display the widget. This interaction is possible through the load() call happening on the client side.

Klarna.Payments.load({
  container: '#klarna-payments-container',
  payment_method_category: 'klarna'
}, function (res) {
  console.debug(res);
})

For a better user experience, call load() when loading your checkout. In this way, you ensure that the widget loads immediately in a hidden container, and it's ready to appear whenever your customer selects Klarna as a payment method. This strategy is to avoid any loading delay after clicking on the Klarna payment method.

You can customize the look and feel of the widget according to your brand guidelines. See the additional features section to learn more.

Don't forget to use the Klarna logo that you received in Step 1: Initiate a payment and add the payment method title. From the payload you received in Step 1, use:

• identifier to dynamically load the payment widget
• name to display the correct and localized payment method title
• asset_urls to contain the Klarna logo

In practice, your customer should see a radio button for every payment_method_category on the payment selection page.

For more information, see the Klarna payments best practices guide.

After processing the load() call, the callback function is executed. The Javascript callback is an object containing the following parameters:

• show_form, indicating if the Klarna payment methods are available in the widget
• error, containing details of potential error messages.

We know that you want to give customers a great checkout experience. For this reason, we created a functionality to alert your store when your customer cannot use any Klarna payment method. This alert is through the show_form boolean parameter, which is used as a response flag to the load() call. We recommend you listen to it all the time.

There are two potential cases that you need to handle based on the response flag:

• Success response: Your checkout offers Klarna payments in the widget.
• Error response: Your checkout is not able to offer Klarna payments.

{
show_form: true
}

{
show_form: false
}

To handle the negative response, you can set up one of the following visual arrangements in your checkout:

• Hide the Klarna option from the checkout.
• Grey out the Klarna option and disable clicking.
• Keep the Klarna option and accept an error message in the widget. Klarna informs the customer that this option is not available.