Klarna Docs - Step 2: Check out

Step 2: Check out

Learn how to set up the Javascript SDK to display Klarna's widget.

During the checkout, your customers can see Klarna as a payment option, select it, and go ahead with the purchase. To enable these customer interactions, you need to perform two main actions:

  1. display the Klarna widget
  2. get authorization for the purchase.

The two actions take place on the client side. You have to set up Klarna's JavaScript SDK and make the load() call for displaying the widget and the authorize() call for getting the purchase authorization.

To make the call for displaying the widget, first you need to add and initialize the SDK and then place a container in your page.

Add the SDK by including the following script in the body section of your checkout page.

MARKUP
<script>
window.klarnaAsyncCallback = function () {

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

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

Sample of the Klarna's JavaScript SDK in the checkout page.

You do not need to install the JavaScript SDK beforehand. It's enough to include the previous script in the HTML file of your checkout page.

Initialize the SDK by making an init() call and passing the client_token from the Initiate a payment step.

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

Sample of the call to initialize the SDK.

The client_token relies on the created session, which expires after 48 hours. The purchase might fail after this time.

Add a container in the HTML file of your checkout page. This container specifies where to place the widget.

MARKUP
<div id="klarna-payments-container"></div>

Sample of the widget container.