You complete this step from your client-side
During this step you will use the button key created from the to setup the page that will show the Instant Shopping Button. Note that the same key can be reused across numerous pages with the same setup as described in this section.
To do this add the following script tag just before the closing tag of the
body section of the page.
<script src="https://x.klarnacdn.net/instantshopping/lib/v1/lib.js" async></script>
During this steps you decide where you want to place the Instant Shopping button within the page by positioning the HTML container element. You use the button key created before (
123e4567-e89b-12d3-a456-426655440000) and add it to the container element and a data attribute.
<klarna-instant-shopping data-key="123e4567-e89b-12d3-a456-426655440000" />
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
<klarna-instant-shopping data-key="123e4567-e89b-12d3-a456-426655440000" data-region="na"/>
Note that for testing a Instant Shopping Button in a test/playground environment you also need to add additional data-attributes to specify the environment, as follows:
<klarna-instant-shopping data-key="123e4567-e89b-12d3-a456-888888880000" data-environment="playground" data-region="eu"/>
<klarna-instant-shopping data-key="123e4567-e89b-12d3-a456-888888880000" data-environment="playground" data-region="na"/>