2. Embed and display the Instant Shopping (client-side)

You complete this step from your client-side

During this step you will use the button key created from the previous step in order to include the Instant Shopping button in the desired page.

To display Instant Shopping Button you only need to include one script tag in the HTML code of the page and at the exact point where you want the button to appear. You also take the button key created in the previous step (123e4567-e89b-12d3-a456-426655440000) and you add it as data attribute to the script tag.

<script src="https://x.klarnacdn.net/instantshopping/lib/v1/snippet.js" data-key="123e4567-e89b-12d3-a456-426655440000" async></script>

If you operate in North America is it important to also set the data-region attribute to be na, like in the example below. The default value of the data-region attribute is eu.

<script src="https://x.klarnacdn.net/instantshopping/lib/v1/snippet.js" data-key="123e4567-e89b-12d3-a456-426655440000" data-region="na" async></script>

The entire purchase flow will be completed within a dialog inside the integrating page. You as a merchant will be notified to place the order in the place-order URL you have configured, more on this in the next step.

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.