Instant shopping is deprecated. Use Express button instead.
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.
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.
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.
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.
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.
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:
Ensure that the URL of the iframes is not modified, as important information exists there and a mistake can cause our flow to fail.
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.
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.