Follow the web integration guide to add the multistep Express checkout to your website.

Not sure if the multistep checkout is the best option for your store? Refer to the Before you start article to make sure you offer your customers the best checkout experience.

The process of creating a multistep Express checkout consists of six main steps:

1. Initializing and display the Express checkout button
2. Handling the authorization response
3. Initializing Klarna payments JavaScript SDK in checkout
4. Finalizing the authorization
5. Handling finalization callback
6. Creating an order

Load the Klarna payments JavaScript library when the cart page or a product detail page is loaded. Ensure the library is included only once to prevent conflicts.

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

Then, implement the klarnaAsyncCallback function where you initialize the Express checkout. Implement the klarnaAsyncCallback before importing the library. This way you ensure it will be invoked when the library is loaded. Within klarnaAsyncCallback, include the logic to: 

1. Initialize Klarna’s JavaScript SDK providing your client identifier as client_id, get your client_id from the Merchant portal. Refer to the Before you start article for instructions on how to generate your client_id .
   
2. Load the button in a chosen container using a load() function. To help debug any issues that occur when loading the button, implement the load() callback.
   
3. Handle the on_click event, in which you start the payment authorization process by calling the authorize() function. Keep the following best practices in mind:

• When initiating the authorization, make sure that the format of the orderPayload is the same as the body of the request to create a Klarna payments session. 
• Avoid having multiple nested asynchronous calls before invoking authorization.

Here’s an example of code that initializes the Klarna JavaScript library and renders the Express checkout button on a cart or a product detail page:

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

<script>
  window.klarnaAsyncCallback = function () {
    window.Klarna.Payments.Buttons.init({
      client_id: 'klarna_client_test...',
    }).load(
    {

The table below lists the attributes of the load() function’s configuration object.

The table below lists the attributes for the authorize() function’s configuration object.

In the multistep checkout, after the customer completes the first step, you’ll receive the authorize() call response with the finalize_required flag set to true and the client_token necessary to resume the authorization at checkout. 

Redirect the customer to the checkout and pre-fill all necessary fields with the customer data returned in the authorize() response call.

{
  "show_form": true,
  "approved": true,
  "finalize_required": true,
  "client_token": "1eddf502-f3a0-45bf-b1fd-f2e3a2758200",
  "session_id": "e4b81ca2-0aae-4c16-bcb2-29a0a088a35b", 
  "collected_shipping_address": { // if collect_shipping_address was set to true
    "attention": "Attn",
    "city": "London",
    "country": "GB",

When the customer navigates to another page or reloads the current one, you need to initialize the Klarna payments library with the client_token you got from the authorization response. This will keep the authorized session open.

<script>
  window.klarnaAsyncCallback = function () {
// Here is where you start calling Klarna's JavaScript SDK functions
Klarna.Payments.init({
       	client_token: "your-client-token",
});
// Here is where you start calling Klarna.Payments.finalize({}
</script> 
<script src="https://x.klarnacdn.net/kp/lib/v1/api.js" async></script>

To authorize the purchase, you need the authorization_token. To get the authorization_token, call the Klarna.Payments.finalize() function during the final purchase step. 

Klarna.Payments.finalize({}, orderPayload, function (res) {
          // res = {
          //   show_form: true,
          //   approved: true,
          //   authorization_token: "b4bd3423-24e3",
          //   collected_shipping_address: {...}
          // }
        });

If the purchase is authorized successfully, you’ll receive the authorization_token in the client-side finalize() response, the authorization callback, or by getting the payment details from Klarna payments API. You need the authorization_token to create an order in the final step.

Here’s an example of a response from the client-side authorize() function:

{ 
"show_form": true, 
"approved": true, 
"finalize_required": false, 
"authorization_token": "0eb73d2c-d55a-5358-9080-ddc3903e3941",
"session_id": "e4b81ca2-0aae-4c16-bcb2-29a0a088a35b", 
}

Here’s an example of a response from the authorization callback:

{
  "authorization_token": "1eddf502-f3a0-45bf-b1fd-f2e3a2758200",
  "session_id": "e4b81ca2-0aae-4c16-bcb2-29a0a088a35b",
}

Once you have the authorization_token, create the order. When creating the order, make sure the order payload is the same as the one sent in the finalize() call.