Klarna Docs - Web Integration

Web Integration

Integrate the Express Checkout in a few easy steps

Full example

Here's an example of what a standard implementation of Klarna Express Checkout will look like on your website.

JAVASCRIPT
<!doctype html>
<html>
  <head>
    <script>
      window.klarnaAsyncCallback = function () {
        window.Klarna.Payments.Buttons.init({
          client_key: "klarna_client_test...",
        }).load(
          {
            container: "#container",

1. Add the library 

First, add the Klarna Payments Library script to your webpage, and implement the klarnaAsyncCallback function.

2. Initialize the button

In the klarnaAsyncCallback, initialize the Express Checkout button using your client_key.

AttributeRequiredDescription
client_keyYesThe client_key is a token necessary for integrating Express Checkout into your website.

Client token initialization

It is possible to create a Klarna Payments session with a server-side call and then pass the client_token from the response to the Klarna.Payments.Buttons.init function to initialize Express Checkout.

JAVASCRIPT
<!doctype html>
<html>
  <head>
    <script>
      window.klarnaAsyncCallback = function () {
        window.Klarna.Payments.Buttons.init({
          client_key: "klarna_client_test...",
        }).load(
          // as before
        );

3. Configure the button

Load the button with the desired configuration.

AttributeRequiredDescription
containerYesThe container represents the location where you want the Express Checkout button to be displayed.
In this field you can pass in any kind of CSS Selector (e.g. '#my-component-id', '.my-component-class'), or, an object of type Element directly (e.g. document.createElement('div))'.
on_clickYesA function passed to this field will be invoked when the consumer clicks on the Express Checkout button.Receives a function as a parameter, which mimics Klarna Payments authorize. See the 4th step for more details.
Additionally, post-authorization behaviors such as redirecting to the success page or sending the authorization token to your backend to create an order can be defined here.
themeNoThe theme that the button will be rendered with. The available values are default, light, and dark. If not specified, default is applied.
shapeNoThe shape that the button will be rendered with. The available values are default, rect, and pill. If not specified, default is applied.
localeNoSpecifies the language of Express Checkout button. Defaults to browser's locale.

4. Invoke authorize()

Call the authorize() function within the on_click function.

  • The authorize() function facilitates obtaining approval for a purchase by sending crucial customer details to Klarna. Subsequently, the customer evaluates these details to make a decision on whether to accept the purchase or not.
  • The merchant has to provide Klarna with the order payload (same format used on the Create Session) when initiating the authorization for the purchase. Please ensure you provide the specific locale in order for the user to see the content in their respective language.

Example Payload

JAVASCRIPT
Klarna.Payments.authorize(
  {},
  {
    locale: "en-GB",
    billing_address
    shipping_address,
    ...
  }, 
  function(res) {
    console.debug(res);
  • To ensure proper utilization of Express Checkout, make sure to invoke the provided .authorize function with the order payload. Avoid using Klarna.Payments.authorize, as it may lead to potential integration issues.
  • To customize the purchase flow, the merchant can pass two flags to the authorize function: auto_finalize and collect_shipping_address.
NameTypeOptional Description
collect_shipping_addressBooleanYes (Default is false)This field informs Express Checkout whether the merchant requires the consumer's shipping address from Klarna or not.
auto_finalizeBooleanYes (Default is true)This field allows you to specify whether the authorization should automatically be finalized upon user interaction, or if it should be left open for manual finalization with multistep checkout.
5. Authorization response

The object returned from the authorization call will be presented in the following format:

JAVASCRIPT
{
  client_token: "D5jc5816-2fe7"
  authorization_token: "b4bd3423-24e3",
  approved: true,
  finalize_required: false,
  collected_shipping_address: {
    attention: "string",
    city: "string",
    country: "string",
    email: "string",
NameDescription
client_tokenThe client_token associated with the generated Payment Session. This can be useful for multi-step checkouts, where the merchant needs to reuse the session.
authorization_tokenThe token that allows you to place the order. This is only returned if it's an approved and finalized authorization.
approvedBoolean value indicating the authorization result.
finalize_requiredBoolean value indicating  if another finalization step is needed or not.
collected_shipping_addressObject containing the shipping information for the customer.

6. Create Order

After getting the authorization_token back from the Klarna you should create the order.

  • To create the order, the shipping_address provided in the api call must match the one returned alongside with the authorization_token.