2. Present the Klarna Widget

During this step, the Klarna widget is initialized and loaded. Klarna uses the widget to display the available Klarna payment options to the customer. You will render it on your checkout page alongside any other payment methods you may offer.

You will use our JavaScript SDK for these steps, documented in full at the JavaScript reference page.

 

2.1 Add the JavaScript SDK to your page 

Add the Klarna JavaScript SDK by including the following script in the body section on your checkout page

<script>
  window.klarnaAsyncCallback = function () {

    // This is where you start calling Klarna's JS SDK functions
    // 
    // Klarna.Credit.init({....})

  };
</script>
<script src="https://x.klarnacdn.net/kp/lib/v1/api.js" async></script>

As you can see, the JavaScript SDK itself does not have to be installed beforehand. You just need to include the above script in your HTML that will load the SDK into your pages. 

 

2.2 Initialize the SDK

Initialize the JavaScript SDK by calling init, passing the client_token that was returned when you created the session in the previous step.

Klarna.Credit.init({
  client_token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmb28iOiJiYXIifQ.dtxWM6MIcgoeMgH87tGvsNDY6cH'
})

 

2.3 Add a container on your page

To specify where to place the widget, add a page container on your checkout page.

Note: The KP iFrame requires a minimum width of 280px.

<div id="klarna_container">

Here is an example of where to place it:

The name and the Klarna logo placement are managed outside of the Klarna widget. Follow the example shown above when adding the widget in your checkout. The Klarna logo is available here for reference

Don't worry, Klarna will help you verify this before you go live. 

 

2.4 Load the Klarna widget

Load the Klarna widget using the load call. Pass the id of the container you just added.

Klarna.Credit.load({
  container: "#klarna_container"  
}, function(res) {
  console.debug(res);
})
  • Best practice: The load function should be called when rendering your checkout page. That way you can ensure that the widget has loaded in full by the time the customer wants to interact with it or selects Klarna as a payment method.

 

2.5 Receive Response from load call

When the widget has processed the load call, the callback will be executed. The callback function parameter is an object containing the following properties

  • show_form (true/false) - indicates whether you make the Klarna option available in your checkout or if this option should not be available for this order
  • error message (optionally) - contains details of potential error messages.

We know that you want to give customers a sterling checkout experience. Therefore we have created a functionality that quickly alerts your store when a customer cannot use Klarna. It is partially a user experience optimization, but it also serves the purpose of you and us complying with local regulations around presenting credit offers to consumers. It is therefore imperative that you follow the guidelines below.

Klarna's widget uses the show_form:true/false field as a response flag to load and to authorize calls in the Javascript SDK.

The field indicates whether your store may show the Klarna option or not. This boolean is a part of all callbacks, except for re-authorize. Best practice is therefore that you listen to it all the time.

We'll now go through three cases that you need to handle:

  • Positive response
  • Adjust and try again
  • Klarna Payments not offered

2.5.1 Positive response: Klarna Payments is offered

If show_form: true, and there are no errors in the object returned, Klarna renders the payment options available to the customer in the widget. 

{
   show_form: true
}

The picture below displays an example of the Klarna widget.

 

You are able to customize the look and feel of the widget according to your style guide. Read more about it here.

 

2.5.2 Adjust and try again

If show_form: true, but an error is returned as well, then something is wrong and the consumer needs to take action before moving forward. Klarna will inform the consumer about the details in the widget. Optionally, you can interpret the invalid fields in the error message and take appropriate actions on your checkout pageSee our JavaScript SDK reference page for details.

{
   show_form: true, 
   error: {
            invalid_fields: ["billing_address.email"]
          }
}

 

2.5.3 Klarna Payments not offered

If show_form: false, Klarna will not be offered for this order based on Klarna's evaluation. A message is displayed to the consumer in the Widget.

{
   show_form: false
}

Best practice is to hide or remove the Klarna option and instead offer the customer other payment options.

When Klarna returns a show_form: false, your store cannot offer Klarna to this customer. You indicate that by setting up one of the following visual arrangements:

  • 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 will inform the consumer that this option is not available.

 

2.6 Cart updates

Did the consumer change something in their cart or billing details? You may also use load to pass any updates to the Klarna session that might have occurred since when the session was created. In the following example, the order information has changed since the consumer has added an item to the cart. 

Klarna.Credit.load({
  container: "#klarna_container"  
},
{
  "purchase_country": "GB",
  "purchase_currency": "GBP",
  "locale": "en-GB",
  "order_amount": 20,
  "order_tax_amount": 0,
  "order_lines": [{
    "type": "physical",
    "reference": "19-402",
    "name": "Battery Power Pack",
    "quantity": 2,
    "unit_price": 10,
    "tax_rate": 0,
    "total_amount": 20,
    "total_discount_amount": 0,
    "total_tax_amount": 0	
 }]
}
, function(res) {
  console.debug(res);
})

What's next?

When the consumer presses the "Buy" or "Continue" button on your site (depending on if there is an order review page after the payments step or not), you will authorize the order.