2. Setup and Display Instant Shopping Button (client-side)

You complete this step from your client-side

After successfully completing this part you should see the Instant Shopping Button like in the image below:

Instant Shopping within product page

2.a. Add the Javascript SDK to the page

You will need to make sure that the Instant Shopping Button Javascript SDK is available on the page you want to display the Instant Shopping Button.

To do this add the following script tag as soon as possible in the page (e.g. <head>).

1
2
3
4
5
6
7
8
9
10
<script>
  window.klarnaAsyncCallback = function () {

    // This is where you start calling Instant Shopping JS SDK functions
    //
    // Klarna.InstantShopping.load({....})

  };
</script>
<script src="https://x.klarnacdn.net/instantshopping/lib/v1/lib.js" async></script>

2.b. Add a container for the Instant Shopping Button to the page

At this step you decide where you want to place the Instant Shopping button within the page by positioning the HTML container element.

1
  <klarna-instant-shopping />

2.c. Configure and display the Instant Shopping Button

You will now need to provide all the information necessary to support the purchase flow. This information refers to the product(s) being sold, relevant shipping options, locale, currency, etc.

Note that you will use the button key created from the previous step .

Below you see an example of the configuration options that are necessary for the consumer flow. Please note that the order_amount and order_tax_amount will be calculated by the service.

Consult our Javascript Docs for more information.

2.c.1 Load the Instant Shopping

The klarnaAsyncCallback is executed as soon as the Instant Shopping Javascript SDK setup by lib.js is downloaded and executed.

You should define this function before the script tag for fetching lib.js (see 2.a) and as early as possible in the page, e.g. head.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<head>
  <script>
    window.klarnaAsyncCallback = function () {
      Klarna.InstantShopping.load({
        "setup": {
          "key": "< mandatory, the button key from step 1, e.g. 123e4567-e89b-12d3-a456-426655440000 >",
          "environment": "< optional, defaults to `production`. Set to `playground` for testing purposes >",
          "region": "< optional, defaults to `eu`. Set to `na` for North America >"
        },
        "purchase_country": "< mandatory, country, e.g. SE, according to ISO 3166 alpha-2 >",
        "purchase_currency": "< mandatory, currency, e.g. SEK, according to ISO 4217 >",
        "locale": "< mandatory, locale, e.g. en-SE, according to RFC 1766 >",
        "merchant_urls": {
          "terms": "< mandatory, URL of merchant terms and conditions. If given through Button key generation, this will replace that value."
        },
        "order_lines": [{
          "type": "< mandatory, order line type., e.g. physical >",
          "reference": "< optional, article number, SKU or similar. >",
          "name": "< mandatory, descriptive item name, maximum 255 characters. >",
          "quantity": "< mandatory, Item quantity, non-negative, between 0 and 100000 >",
          "unit_price": "< mandatory, unit price including tax without applying discounts in minor units >",
          "tax_rate": "< mandatory, number, two implicit decimals>",
          "total_amount": "< mandatory, total amount includes tax and discount >",
          "total_discount_amount": "< optional, the discount amount in minor units, includes tax >",
          "total_tax_amount": "< mandatory, the total tax amount in minor units >",
          "image_url": "< mandatory, URL to a product image >"
        }],
        "shipping_options": [{
          "id": "< mandatory, option id, e.g. express >",
          "name": "< mandatory, option name, e.g. EXPRESS 1-2 Days >",
          "description": "< mandatory, helpful text, e.g. Delivery by 4:30 pm >",
          "price": "< mandatory, price including tax >",
          "tax_amount": "< mandatory, tax amount >",
          "tax_rate": "< mandatory, non-negative, in percent, two implicit decimals. i.e 2500 = 25% make >",
          "preselected": "< optional, boolean >",
          "shipping_method": "< optional, PickUpStore | Home | BoxReg | BoxUnreg | PickUpPoint | Own >"
        }]
      }, function (response) {
          console.log('Klarna.InstantShopping.load callback with data:' + JSON.stringify(response))
        })
    };
  </script>
  <script src="https://x.klarnacdn.net/instantshopping/lib/v1/lib.js" async></script>
</head>

2.c.2. Receive the response from the load call

When the JavaScript SDK has processed the load call, the provided callback will be invoked. The callback argument will be an object containing the following properties:

  • show_button:true/false indicates whether Buy Butoon will be shown or not
  • error contains details of potential error messages

Below you can read in details the cases you need to handle:

Case: Instant Shopping Button offered

If show_button: true then the Instant Shopping Button is offered and rendered inside the <klarna-instant-shopping> container.

Case: Instant Shopping Button failed to load

If show_button: false and there is an error object available, then it is advised to consult the errors and investigate if there is something you can do with calling the load to recover from this state.

Case: Instant Shopping Button not offered

If show_button: false then the button is not offered.

2.c.3 Update the Instant Shopping Button

There could be cases where you will need to update the setup of the Instant Shopping after it has been loaded. For example, the customer has chosen a different color or size for the product, or some shipping options have become available, etc. In such cases you can use our Javascript SDK update function to re-configure the Instant Shopping with the new options.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
  document.getElementById('product-color-selector')
    .addEventListener('change', function (event) {
        Klarna.InstantShopping.update({
          "order_lines": [{
            "type": "< mandatory, updated order line type >",
            "reference": "< mandatory, updated article number, SKU or similar. >",
            "name": "< mandatory, updated descriptive item name>",
            // ...
          }],
          "shipping_options": [{
            "id": "< mandatory, updated option id >",
            "name": "< mandatory, updated option name >",
            // ...
          }]
        }, function (response) {
          console.log('Klarna.InstantShopping.update callback with data:' + JSON.stringify(response))
        })
      };
</script>

2.c.3.i Receive the response from the update call

As with the load call, when the JavaScript SDK has processed the update call, the provided callback will be invoked. The callback argument will be an object containing the following properties:

  • show_button:true/false indicates whether Instant Shopping Butoon will be shown or not
  • error contains details of potential error messages

What’s next?

When your customers interacting with the Instant Shopping Button choose to complete their purchase, then you need to respond to placing the order .