Checkout Javascript API

The Klarna Checkout JavaScript API allows the parent page to invoke actions and to receive notifications from the Checkout iFrame. It can be used to receive user information for retargeting purposes and refreshing the iFrame when server side updates have been processed.

The JavaScript API is provided in an object that is retrieved via the method _klarnaCheckout, registered on the page where the snippet is loaded. The API is accessible once the snippet has been rendered in the user’s browser.

1
2
3
window._klarnaCheckout(function(api) {
  // Invoke method or register listener
});

Listeners are registered by passing an object to the on method on the api object. Each key corresponds to an event name and the value should be the callback function. Only one listener can be registered for each event. Registering a new listener will overwrite the old.

1
2
3
4
5
6
7
window._klarnaCheckout(function(api) {
  api.on({
    'change': function(data) {
    // Do something
    }
  });
});

The change event is triggered when the user completes or changes a section of the checkout form.

The event data contains an object with the consumer’s relevant information.

1
2
3
4
5
6
7
{
  "email": "klara.joyce@klarna.com",
  "postal_code": "12345"
  "country": "SE",
  "given_name": "Klara",
  "family_name": "Joyce",
}

1
2
3
4
{
  "purchase_country": "DE"
  "postal_code": "12345"
}

The shipping_address_change event is triggered when the user has entered a new shipping address. The shipping address is the billing address, unless a separate shipping address is provided.

The event data contains an object with the shipping address details.

1
2
3
4
5
{
  "country": "SE",
  "email": "klara.joyce@klarna.com",
  "postal_code": "12345",
}

1
2
3
4
{
  "purchase_country": "DE"
  "postal_code": "12345"
}

The order_total_change event is triggered when the order total has changed.

The event data contains an object with the order total, expressed in minor units (e.g. cents).

1
2
3
{
  "order_total": 6000
}

The can_not_complete_order event is triggered for KCO Credit orders when the order can not be completed and the merchant has to provide other means of paying.

The event data is an empty object.

This functionality enables a user to interact with the parent page in ways that require the order to be updated server side. When a server side call to Klarna is being processed, the Checkout should be suspended, to prevent user interaction. The Klarna checkout will be put in a suspended state represented to the user as it is loading with a visible spinner. Once the server side call is complete, the Checkout should be resumed.

A use case for this feature is when the user wants to add more items to the cart. This requires a server side call to Klarna to update the items in the order. While the server side request is being sent and processed the checkout should be suspended.

1
2
3
4
5
6
7
8
9
// Suspending the checkout
window._klarnaCheckout(function (api) {
  api.suspend();
});

// Resuming the checkout
window._klarnaCheckout(function (api) {
  api.resume();
});