Step 2: Check out

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.

<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>

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

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

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

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