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.

Accessing the JavaScript API

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.

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

Registering listeners

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.

window._klarnaCheckout(function(api) {
  api.on({
    'change': function(data) {
    // Do something
    }
  });
});

Checkout events

The change event

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 following consumer information

{
  "email": "klara.joyce@klarna.com",
  "postal_code": "12345",
  "country": "US"
}

The shipping_address_change event

The shipping_address_change event is triggered when the user has entered a new shipping address and there was a successful addres_update callback. 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.

{
  "given_name": "Klara",
  "family_name": "Joyce",
  "email": "klara.joyce@klarna.com",
  "street_address": "Apartment 10",
  "postal_code": "12345",
  "city": "Knoxville",
  "phone": "070 *** ** 23",
  "country": "US"
}

The shipping_option_change event  

The shipping_option_change event is triggered when the shipping options have changed.

The event data contains an shipping options object with price, tax_amount, and tax_rate is expressed in minor units (e.g. cents).

{
    description: "We will send you a ticket to travel around the world with your goods",
    id: "crazydeal",
    name: "Around the World",
    price: 99999, // cent
    promo: "TODAY ONLY! Fly around the world for FREE* *not actually free",
    tax_amount: 7621, // cent
    tax_rate: 825 // cent
}

The order_total_change event

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

{
  "order_total": 6000
}

The can_not_complete_order event

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.

Suspend and Resume

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. 

// Suspending the checkout
window._klarnaCheckout(function (api) {
  api.suspend();
});

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