3. Configure and display the Instant Shopping Button (client-side)

You complete this step leveraging the Javascript SDK from your client-side

In this step you provide to the Button all the information necessary to support the purchase flow. This information refers to the product(s) being sold, relevant shipping options, locale, currency, etc.

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

Instant Shopping within product page

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.

3.1 Load the Instant Shopping

It is important to make sure that the container element (created in the previous step, <klarna-instant-shopping>) is available on the DOM when the code below executes. If the container element (<klarna-instant-shopping>) is rendered later in execution then the Instant Shopping button will not appear.

The klarnaAsyncCallback is executed from the Instant Shopping library as soon as the Javascript SDK is available on the window object.

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
<script>
  window.klarnaAsyncCallback = function () {
    Klarna.InstantShopping.load({
      "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": "< optional, 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>

3.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:

3.2.a Instant Shopping Button offered

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

3.2.b 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.

3.2.c Instant Shopping Button not offered

If show_button: false then the button is not offered.

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

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