2. Setup the Instant Shopping Button (client-side)

You complete this step from your client-side

During this step you will use the button key created from the previous step 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.

2.a. Add the Javascript SDK to the page

You will need to make sure that the Instant Shopping Button Javascript SDK is available on the page you want to display the Instant Shopping Button.

To do this add the following script tag just before the closing tag of the body section of the page.

1
<script src="https://x.klarnacdn.net/instantshopping/lib/v1/lib.js" async></script>

2.b. Add a container for the Instant Shopping Button to the page

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.

1
  <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 eu.

1
  <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:

1
  <klarna-instant-shopping data-key="123e4567-e89b-12d3-a456-888888880000" data-environment="playground" data-region="eu"/>
1
  <klarna-instant-shopping data-key="123e4567-e89b-12d3-a456-888888880000" data-environment="playground" data-region="na"/>

What’s next?

Now you are set to use our Javascript SDK and try to configure and display the Instant Shopping Button.