Instant shopping is deprecated. Use Express button instead.
The first step is to setup a Merchant ID and configure Klarna Payments with the suitable payment methods for the purpose of generating customer tokens. This configuration should be done for all the billing countries the merchant wants to use Instant Shopping for.
For the next steps you will need the Klarna API Credentials (you can generate new after logging in to the Merchant Portal)
You need to create a Button key which you can reuse for displaying Instant Shopping in multiple pages. This key is used to identify you as a merchant and also to link to some necessary configuration options.
Since this key can be reused for displaying Instant Shopping in multiple pages, it is advised that you generate it once and then store it somewhere within your system.
To create a key you can use the Instant Shopping Button Keys Service. An example of a request to this service is given below. Note that you need to use your API credentials to authenticate.
POST /instantshopping/v1/buttons
Authorization: Basic pwhcueUff0MmwLShJiBE9JHA==
Content-Type: application/json
{
"merchant_urls": {
"create_customer_token": "< mandatory, URL of an endpoint at the merchant side, which will receive a ping to approve the generation customer token. (must be https, max 2000 characters) >"
}
}Request
HTTP 201 Created
Content-Type: application/json
Location: /instantshopping/v1/buttons/123e4567-e89b-12d3-a456-426655440000
{
"button_key": "123e4567-e89b-12d3-a456-426655440000",
"merchant_urls": { /* ... */ }
}Response
You complete this step from your client-side
After successfully completing this part you should see the Instant Shopping Button.
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 as soon as possible in the page (e.g. <head>).
<script>
window.klarnaAsyncCallback = function () {
// This is where you start calling Instant Shopping JS SDK functions
//
// Klarna.InstantShopping.load({....})
};
</script>
<script src="https://x.klarnacdn.net/instantshopping/lib/v1/lib.js" async></script>At this step you decide where you want to place the Instant Shopping button within the page by positioning the HTML container element.
It is important to add a data attribute named data-instance-id to this element, which will uniquely identify this button. Note that you will refer to the value of this attribute when you use the JavaScript API and need to provide the setup.instance_id option. This is particularly necessary if you want to show multiple buttons on the same page. In that case each data-instance-id should be different and unique for this page.
<klarna-instant-shopping data-instance-id="button-123abc456" />You will now need to provide all the information necessary to support the purchase flow. This information refers to the product(s) being in the cart (together with possible discounts, etc.), relevant shipping options, locale, currency, etc.
Note that you will use the button key created from the previous step.
Below you see an example of the configuration options that are necessary for the consumer flow. Please note that the order_amount and order_tax_amount will be calculated by the service.
Consult our Javascript Docs for more information.
3.c.1 Load the Instant Shopping
The klarnaAsyncCallback is executed as soon as the Instant Shopping Javascript SDK is ready.
You should define this function before the script tag for fetching lib.js (see 3.a) and as early as possible in the page, e.g. head.
In the example below we consider that this Instant Shopping flow is selling subscriptions of variant durations.
Important: You need to provide a localized text describing the details of the subscription (cost, duration, start, end dates) by setting up the tokenization.description property.
window.klarnaAsyncCallback = function () {
window.Klarna.InstantShopping.load({
"setup": {
"instance_id": "button-123abc456",
"key": "123e4567-e89b-12d3-a456-426655440000",
"environment": "production",
"region": "eu"
},
"tokenization": {
"description": "Legal text, describing the conditions of this subscription. E.g. Read frist two months for free, then the monthly cost until further notice."When the consumer has chosen to finalize the flow, our server-side will ping you at the merchant_urls.create_customer_token endpoint, and prompt you to ask for the generation of a customer token. You do not need to act on this request, you can merely respond with HTTP 200 and proceed.
Request
At this point we expect that you validate the request body and decide whether you will approve/decline.
POST <merchant_urls.create_customer_token>
Content-Type: application/json
{
button_key: <kis_button_key>,
authorization_token: <kis_auth_token>,
order: {
order_lines: <the product the customer saw in KIS FE>,
locale: '',
purchase_currency: ''
},Response
The response to this request is not important, you can reply with HTTP 200.
To approve and receive a customer token you will need to perform a POST to Instant Shopping API, as shown in the example below. You will use the authorization_token from the ping request body above.
POST /instantshopping/v1/authorizations/{authorization_token}/customer-tokens
Authorization: Basic pwhcueUff0MmwLShJiBE9JHA==
Content-Type: application/jsonHTTP 200 OK
Content-Type: application/json
Location: /instantshopping/v1/authorizations/{authorization_token}/customer-tokens
{
token_id: '<kp_token>'
}Response
Placing order
To place the order you will need to use the response above in KP for each recurring payment. For more information on the KP place order, you can visit Klarna Payments
To decline you will need to perform a DELETE to Instant Shopping API, as shown in the example below. You will use the authorization_token from the ping request body above.
DELETE /instantshopping/v1/authorizations/{authorization_token}
Authorization: Basic pwhcueUff0MmwLShJiBE9JHA==
Content-Type: application/json