Additional Features

It is possible to setup an Instant Shopping button and choose between different Klarna themes. We currently support the fully Klarna branded theme, as well as some lower branded themes in dark and light mode. To set this up you can pass the configuration below either when creating a new button key through the Button Key Generation API, or when configuring a specific Instant Shopping flow through the JavaScript API load.

Example of specifying the light Klarna theme through the JavaScript API. It is assumed that you probably have a dark background to your pages.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  <script>
    window.klarnaAsyncCallback = function () {
      Klarna.InstantShopping.load({
        // setup options here
        "styling": {
          "theme" : {
            "variation": "light",
            "tagline": "light"
          }
        }
      })
    }
  </script>
}

Example of specifying the dark Klarna theme through the JavaScript API.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  <script>
    window.klarnaAsyncCallback = function () {
      Klarna.InstantShopping.load({
        // setup options here
        "styling": {
          "theme" : {
            "variation": "dark",
            "tagline": "dark"
          }
        }
      })
    }
  </script>
}

Example of specifying the default Klarna theme, but the light tagline through the JavaScript API. It is assumed that you probably have a dark background to your pages.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  <script>
    window.klarnaAsyncCallback = function () {
      Klarna.InstantShopping.load({
        // setup options here
        "styling": {
          "theme" : {
            "variation": "klarna",
            "tagline": "light"
          }
        }
      })
    }
  </script>
}

If you are interested to know when the customer has arrived to certain steps during the Instant Shopping purchase flow you can take advatage of the events we emit. The supported events are:

• buy_button_clicked: Emitted when the Instant Shopping button is clicked.
• instant_shopping_flow_opened: Emitted when the Instant Shopping flow is opened.
• complete_order_button_clicked: Emitted when the customer clicks to complete order from inside the Instant Shopping flow.
• confirmation_displayed: Emitted when the confirmation view is shown, after a successful pruchase. The callback data include the order_id, in addition to the data described below.

The data that are available in the callback are:

• key: the button key;
• environment: the environment, will be playground in testing mode;
• region: the region, will be eu for Europe or na for North America region;
• context_id: a unique id for distinguishing the customer flows for purchasing different products on different pages;
• session_id: a unique id for distinguishing the customer flow for purchasing a specific product;
• integrator_url: the url of the page that is including this Instant Shopping button.

To start listening to an event, you can use the JavaScript API on, as shown in the example below:

1
2
3
  Klarna.InstantShopping.on('confirmation_displayed', function (callbackData) {
    console.log('The smoooth confirmation view is displayed. Order Id', callbackData.order_id)
  })

To stop listening to an event, you again use the JavaScript API off, as shown in the example below:

1
  Klarna.InstantShopping.off('confirmation_displayed')

More detailed information can be found in the JavaScript API documentation .

You are able to trigger the opening of Instant Shopping flow without a user click on the Instant Shopping button. You can use the JavaScript API open , provided that you have previously set up Instant Shopping as outlined in the integration guide.

One example is shown below:

1
2
3
4
5
6
7
8
9
10
11
12
  <script>
    window.klarnaAsyncCallback = function () {
      Klarna.InstantShopping.load({
        // setup options here
      }, function (callbackData) {
        // Instant Shopping is properly loaded
        if (customerFromSocialMedia) {
          Klarna.InstantShopping.open()
        }
      })
    }
  </scipt>

The open function accepts optionally a callback function. The data provided to this callback function are:

• show_fullscreen: true or false,
• error: with information about possible errors