What to do
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.
In order for the Instant Shopping button to be shown successfully it is important that the
<klarna-instant-shopping> container element is available on the page DOM, before the JS SDK
load executes. This is because during the execution of the
load function, our library parses the DOM and tries to find the container element so that it later renders inside of it the actual Button.
window.Klarna.InstantShopping.init() and then ii)
window.Klarna.InstantShopping.load(< load options here >).
What to avoid
Using libraries that modify global functions
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.
!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.