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://credit.klarnacdn.net/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.

<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'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 credit form inside 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. Read more about showing and hiding the form.


 

2.6 Cart updates

Did the consumer suddenly change something in their cart or billing details? You may also use load to pass any updates to the Klarna session that might have occured 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.