Best Practices

What to do

Gain more from your social media posts by linking them to your product pages where Instant Shopping is available.

You can then use the simple JavaScript snippet below and identify that the consumer is coming from Instagram or Facebook. When identified so, you can leverage open to automatically open up Instant Shopping flow and skip a click.

If you need customers to choose between product characteristics, like color, size, etc, (as described in additional features page ), you can make sure that you load Instant Shopping with a different set of options, as shown below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
  <script>
    window.klarnaAsyncCallback = function () {
      const ua = navigator.userAgent || navigator.vendor || window.opera;
      const isInstagram = (ua.indexOf('Instagram') > -1)

      if (isInstagram) {
        Klarna.InstantShopping.load({
            // items here
        }, function (callbackData) {
            Klarna.InstantShopping.open() // this will open the Instant Shopping flow
        })
      } else {
          Klarna.InstantShopping.load({
              // order_lines here
          })
      }


  </script>
}

Leverage the traffic to the post-purchase page

Given that Instant Shopping Button flow ends by redirecting the consumer to a post-purchase page you can leverage this opportunity to offer additional options to the consumers arriving there.

Given that you will have the order id available as a URL request parameter you are able to do upsell of relevant products. Or you might want to display a sign up page for consumers. Or share any other useful material and information.

Use local currency

It is our recommendation to configure Instant Shopping with the local currency of the purchase country to avoid any problems with amounts and costs calculations.

Set consumer’s country and locale

It is our recommendation to configure Instant Shopping with your best guess of the consumer’s country as purchase_country and language as locale so that we will be able to offer a truly localized experience for consumers.

Guard against potential tampered order data

It is strongly advised to validate the order and per product amounts (total, tax, discount) before approving the order to ensure that those match the reality and have not been accidentally or intentionally tampered with though the consumer’s browser.

What to avoid

Using libraries that modify global functions

Avoid modify global functions or changing the behavior of built-in Javascript functions, as this could cause our code to fail. As means to achieve this avoid using very old Javascript libaries.

Styling all iframes on the page

Instant shopping relies on a number of iframes added to your page DOM to function. These iframes are styled with inline styles, which means that they will have high specificity. Ensure that no styles are applied to our iframes by mistake, something that could break the interaction and affect the flow.

Additionally, avoid !important in your CSS declarations, as this overrides our styling, and don’t apply styles to all iframes on the page.

Standard height: The iframe is set to height of 77px. This height is shared by 2 components, the Button and the consumer hint container. The Button itself has a height of 50px. The remaining 27px is reserved for displaying customer information. Our recommendation is to:

  • avoid directly styling the iframe
  • have visible space of 27px below the iframe so that customer information is visible and displayed correctly.

Modifying the URL of the iframes

Ensure that the URL of the iframes is not modified, as important information exists there and a mistake can cause our flow to fail.

Adding transform to the body element

The fullscreen iframe, showing the Instant Shopping flow, is created as a direct child of the body, and is positioned using position: fixed in order to cover the viewport. Adding a transform property to the body will make the fullscreen iframe be positioned according to the dimensions of the body, rather than the viewport, causing it to have the wrong dimensions. This could cause the fullscreen iframe to be much taller than the screen and therefore make the contents of the iframe disappear below the fold of the page.

Using the REST API from the frontend

You are allowed to connect to the REST API from your server-side in an authenticated manner. Trying to connect from your frontend will fail due to CORS issues. So when you need to leverage our API it is recommended that your frontend connects to your server-side and then your server-side completes the communication and call to our REST API.