Instant shopping is deprecated. Use Express button instead.
Instant Shopping can be used to capture donations, either one-time or recurring.
The Instant Shopping button and the flow is adjusted in terms of copy and illustrations to help you with your purpose.
Following the guidelines and examples will help you setup Instant Shopping for capturing one time donations. The assumption here is that you will want to own the HTML button and merely use Instant Shopping payment flow.
The first step is to setup a Merchant ID and configure Klarna Payments with the suitable payment methods for the capturing one time donations. 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": {
"place_order": "< mandatory, URL of an endpoint at the merchant side, which will receive a ping to approve the one time donation. (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 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.
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 for donations of various values.
window.klarnaAsyncCallback = function () {
window.Klarna.InstantShopping.load({
"setup": {
"instance_id": "button-123abc456",
"key": "123e4567-e89b-12d3-a456-426655440000",
"environment": "production",
"region": "eu"
},
"styling": {
"theme": {When the customer has chosen to finalize the flow, our server-side will ping you at the merchant_urls.place_order endpoint, and prompt you to approve this payment. You do not need to act on this request, you can merely respond with HTTP 200 and proceed.
At this point we expect that you validate the request body and decide whether you will approve/decline.
POST <merchant_urls.place_order>
Content-Type: application/json
{
button_key: <kis_button_key>,
authorization_token: <kis_auth_token>,
order: {
order_lines: ...,
locale: '',
purchase_currency: '',
purchase_country: '',The response to this request is not important, you can reply with HTTP 200.
To approve the one time donation, 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 and provide the order of the request body.
POST /instantshopping/v1/authorizations/{authorization_token}/customer-tokens
Authorization: Basic pwhcueUff0MmwLShJiBE9JHA==
Content-Type: application/json
{
order_lines: ...,
locale: '',
purchase_currency: '',
purchase_country: '',
order_amount: ...
}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/jsonAccording to whether you have approved or declined the order, the customer will see a suitable view at the end. In case of approval the customer will see a confirmation of the order and be offered a link to continue to the page that you have specified with merchant_urls.confirmation. This is an ideal page for further engaging with your customers.
Following the guidelines and examples below will help you setup Instant Shopping for creating donation subscriptions. This means that you will receive a customer token that you will then be able to charge according to the terms of the subscription. Charging the customer token is done via the Customer Tokens API
In the examples below, the assumption here is that you will want to use Klarna’s button tailored for Donations.
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
When rendering the page that will include Instant Shopping you need to load the necessary resources to make Instant Shopping available.
Load the Instant Shopping library and invoke the JavaScript API, as soon as possible to achieve optimal rendering times. Also use the HTML element klarna-instant-shopping at the exact position where you want the button to appear in your page.
Example:
<head>
...
<script src="https://x.klarnacdn.net/instantshopping/lib/v1/lib.js" async></script>
</head>
<body>
...
<klarna-instant-shopping data-instance-id="button-123abc456" />
...
<script>
window.klarnaAsyncCallback = function () {When you invoke window.Klarna.InstantShopping.load you need to pass the options necessary to configure the UI and the purpose of the flow.
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."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.
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: ''
},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/jsonTo 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/jsonAccording to whether you have approved or declined the order, the customer will see a suitable view at the end. In case of approval the customer will see a confirmation of the order and be offered a link to continue to the page that you have specified with merchant_urls.confirmation. This is an ideal page for further engaging with your customers.