Klarna Docs - 2.1: Display Klarna

2.1: Display Klarna

After the JavaScript SDK is up and running, it's time to display Klarna as a payment method in your checkout.

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

At checkout, your customers can choose to pay with Klarna. Then, a pop-up window is opened where your customers log into their Klarna account and select their preferred Klarna payment method.

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

The following information is applicable for both scenarios, one-time and recurring payments.

At checkout, display Klarna as a payment option by using the load() call. Specify the following parameter:

For more information about load() call parameters, refer to the Klarna payments SDK reference.

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

A sample load() call to display Klarna as a payment option.

For a better user experience, call load() when loading your checkout. In this way, you ensure that the container of Klarna payments loads immediately in a hidden container, and it's ready to appear when needed.

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

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

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

You can manage the name and the Klarna when adding the Klarna payments in your checkout and use the name and asset_urls returned in Step 1: Initiate a payment.

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

  • show_form, indicating if Klarna payments is available
  • 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.
  • Error response: Your checkout is not able to offer Klarna payments.

Success response

If the response flag is show_form: true, your checkout displays Klarna as a payment option for this purchase. This is the standard response.

JSON
{
show_form: true
}

A sample success response to offer Klarna payments.

Error response

If the response flag is show_form: false, your store is not able to offer Klarna as a payment option.

This negative response results from the pre-assessment that Klarna executes for the purchase.

JSON
{
show_form: false
}

A sample error response that prevents from offering Klarna payments.

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. Klarna informs the customer that this option is not available.