Klarna Docs - Distribute the HPP Session with a Klarna Interface

Distribute the HPP Session with a Klarna Interface

The distribution of the link to the consumer may be achieved by integrating our API directly to send SMS, email or display QR codes, but this can also be achieved by simply integrating our interface directly into your own user interface.

This interface implements all the best practices to get the link delivered to the end Consumer the fastest possible. It supports an interface for a seller (staff, sale associate, clerk) as well as one that is directed to the consumer themselves in a self-checkout context.

After the integration, you will be able to update the features of the interface without touching to your code using our profiles mechanism.

Video of a Self Checkout integration

Video of a Self Checkout integration

Sequence diagram of a Self Checkout integration

Sequence diagram of a Self Checkout integration

JSX
<!DOCTYPE html>
<html>
  <head>
    <title>Sample POS Integration</title>
	<script src="https://x.klarnacdn.net/hpp/distribution/sdk/v1/api.js" async></script>
  </head>
  <body>
    <button id="distribute-button">Distribute</button>
    <script>
      window.klarnaHppDistributionAsyncCallback = function() {

1 - Loading and initializing the SDK

You need to load the SDK asynchronously from our CDN https://x.klarnacdn.net/hpp/distribution/sdk/v1/api.js. Make sure to have a function on the window object called klarnaHppDistributionAsyncCallback, it will be called when the SDK is loaded.

You will then be able to make the init call which will pre-fetch some of our resources so that the user experience is better. This should be done event if Klarna hasn’t been chosen as the payment method, so that bootstraping everything will be seen as seamless.

The SDK needs to be initialized once and lets you handle multiple sessions, which means that you don’t need to do these steps again in the context of a Single Application Page.

Loading the SDK
JSX
<script>
  window.klarnaHppDistributionAsyncCallback = function() {
    // Klarna.HPP.Distribution is available now, you should initialize the SDK
  }
</script>
<script src="https://x.klarnacdn.net/hpp/distribution/sdk/v1/api.js" async>
</script>
Initializing the SDK
JAVASCRIPT
try {
  Klarna.HPP.Distribution.init()
} catch (err) {
  // Handle error.
}

2 - Create session and get the token out of the response

When the Consumer has decided to use Klarna has their payment method for the purchase, you will need to create an HPP Session. See our documentation on how to create an HPP Session.

In the response, you get back a token in the field distribution_module.token that you will be able to use with the SDK. The service that creates this session has to give this token to the frontend layer.

JSON
{
    "session_id": "<hpp_session_id>",
    "redirect_url": "https://payment.klarna.com/<random_access_id>",
    "session_url": "https://api.klarna.com/hpp/v1/sessions/<hpp_session_id>",
    "qr_code_url": "https://payment.klarna.com/<hpp_session_id>/qr",
    "distribution_url": "https://api.klarna.com/hpp/v1/sessions/<hpp_session_id>/distribution",
    "distribution_module:": {
      "token": "eyJhbGciOiJSUzI1NiJ9.ewogICJzZXNzaW9uX2lkIiA6ICIxM2E5NDA5NC0wM2RiLTY0NzgtYTFmNi0xMzYzMTQ3MTczYjIiLAogICJiYXNlX3VybCIgOiAiaHR0cHM6Ly9rbGFybmEtcGF5bWVudHMtZXUuc3RhZ2luZy5ldTEueWFjby5rbGFybmEubmV0IiwKICAiZGVzaWduIiA6ICJrbGFybmEiLAogICJsYW5ndWFnZSIgOiAiZW4iLAogICJwdXJjaGFzZV9jb3VudHJ5IiA6ICJTRSIsCiAgImFuYWx5dGljc19wcm9wZXJ0eV9pZCIgOiAiVUEtMzYwNTMxMzctMTEiLAogICJ0cmFjZV9mbG93IiA6IGZhbHNlLAogICJlbnZpcm9ubWVudCIgOiAic3RhZ2luZyI",
      "standalone_url": "https://payment-eu.playground.klarna.com/distributions/<random_distribution_id>?param1={{profile_id}}&param2={{view_id}}",
      "generation_url": "https://api.klarna.com/hpp/v1/sessions/<hpp_session_id>/distribution-module"
  • The distribution_url and qr_code_url present in this response let you handle distribution by yourself by using our APIs directly.
  • The distribution_module.standalone_url is to be used when you want to use our Distribution Module, yet you want to open it by yourself in a webview or without using our Javascript SDK.
  • The distribution_module.generate_url lets you retrieve the Distribution Module’s parameter at a later time if you want to open it again on the same transaction.
  • The distribution_module.token is a JWT that you will use in this guide to open the Distribution Module using the SDK.

3 - Create a Distribution View for a specific HPP Session

Now that the frontend is in possession of the token, you need to use the SDK to create a DistributionView. You will need to create this object for every session that needs to be distributed.

This object will allow you to start the User Interface that can be used by a person to interact and distribute your HPP Session. When making this call you need to define what constrains the User Interface needs to respect, especially who interacts with the interface, a store associate or the consumer themselves. If both of them can see the screen, it may be wiser to target consumers.

After the object creation, you will need to register callbacks to handle the different outputs.

Looking for a way to try it out really quick? Look at our predefined Profiles for tests at the end of the guide !

Parameters to create the Distribution View
NameAccepted ValuesDescription
tokenValid tokenThe distribution token received when creating the HPP session
targetKlarna.HPP.Distribution.Type.NEW_WINDOW, Klarna.HPP.Distribution.Type.FULLSCREENWhether the page should be open in a fullscreen iframe or in a new window
profile_idProfile identifierIdentifier of the profile to use on the user interface, this will define what distribution methods are available, if the user is a seller or the consumers themselves. Profiles can be updated server side.
Throws
  • InvalidParameter: One or more parameters were incorrect, message will contain which one(s).
Example
JAVASCRIPT
try {
  const distributionView = Klarna.HPP.Distribution.create(
    { 
      token: 'eyJhbGciOiJSUzI1NiJ9.ewogICJzZXNzaW9uX2lkIiA6ICIxM2E5NDA5NC0wM2RiLTY0NzgtYTFmNi0xMzYzMTQ3MTczYjIiLAogICJiYXNlX3VybCIgOiAiaHR0cHM6Ly9rbGFybmEtcGF5bWVudHMtZXUuc3RhZ2luZy5ldTEueWFjby5rbGFybmEubmV0IiwKICAiZGVzaWduIiA6ICJrbGFybmEiLAogICJsYW5ndWFnZSIgOiAiZW4iLAogICJwdXJjaGFzZV9jb3VudHJ5IiA6ICJTRSIsCiAgImFuYWx5dGljc19wcm9wZXJ0eV9pZCIgOiAiVUEtMzYwNTMxMzctMTEiLAogICJ0cmFjZV9mbG93IiA6IGZhbHNlLAogICJlbnZpcm9ubWVudCIgOiAic3RhZ2luZyI',
      target: Klarna.HPP.Distribution.Type.FULLSCREEN,
      profile_id: "362fa3e5-c439-7851-b885-4648ea469e7a"
    }
  )
} catch (err) {
  // Handle error.

4 - Registering for events happening during distribution

  • distributionView.on(eventName, eventHandler) Registers an event handler for the given eventName.
    - eventName:string The name of the event to which you want to subscribe.
    - eventHandler:on~eventHandler The function that should be called when the event is emitted.
  • distributionView.off(eventName, [eventHandler]) Unregisters an event handler for the given eventName.
    - eventName:string The name of the event from which you want to unsubscribe.
    - eventHandler:on~eventHandler The function that was previously registered for the eventName. Omit if you want to unregister all handlers for the eventName.
Event close: user interaction has finished

The close event will be emitted when the Distribution Module is closed. This usually happens in one of these cases:

  • The user pressed the close button of the Distribution Module and went through the close flow
  • The Distribution Module was started in a new window and the window was closed using the browser’s close button
  • The close method was called on the distribution view

The event can happen when the payment session has not changed to a state that is considered final, which is defined by the boolean final. The success of the payment depends on the value of the boolean approved.

ParameterDescription
payment.finalThe session reached a status considered to be a final decision. See our state machine.
payment.approvedThe session was completed and payment accepted.
JAVASCRIPT
distributionView.on(Klarna.HPP.Distribution.Event.CLOSE, function({ payment: { final, approved } }) {
  if(final) {
	  if(approved) {
	    // handle case where payment was successful
	  }
	  else {
	    // handle case where payment can't be made with Klarna...
	  }
  }
  else {
Event client-error: an error occurred during distribution

The client-error event is emitted when HPP is displaying the “Distribution Payment Error” page and an unexpected JavaScript error occurs on the user’s browser. If a handler is defined for this event, it will be then called with an error object as an argument.

The Distribution Module closes automatically before emitting the client-error event.

JAVASCRIPT
distributionView.on(Klarna.HPP.Distribution.Event.CLIENT_ERROR, function(error) {
  // here your integration should handle what happens when an error happens on the browser
  console.error(error)
})
Turning off listeners
JAVASCRIPT
distributionView.off(Klarna.HPP.Distribution.Event.CLOSE, onClose)
distributionView.off(Klarna.HPP.Distribution.Event.CLIENT_ERROR)

5 - Start the distribution view

Opens the distribution view on the specified target set when the instance was created (fullscreen_iframe or new_window). The iframe or the window will be automatically closed when the HPP Session moves to a final state, or if some unexpected javascript error happens.

This method will call the function given as argument as soon as the distribution view has actually started and the user can interact with the distribution.

JAVASCRIPT
distributionView.open(function(error) {
  if(error) console.log('view could not be opened')
  else console.log('view opened')
})

6 - Sending keyboard input to HPP

You can call the keyboardInputRequest method with in-store-token data provided via keyboard input as the first parameter and an event id as an optional second parameter to send to HPP.

NameValuesDescription
dataStringKeyboard input string
eventId?StringEvent ID that will be send back in responce, to help connect requests with responces (Optiional parameter)

HPP will emit a KEYBOARD_INPUT_RESPONSE event on every keyboardInputRequest call. That response (KEYBOARD_INPUT_RESPONSE) contains a data object with the following properties:

NameValuesDescription
successBooleanIndicates whether the request was successfully accepted. (Note: if an error occurred during the processing of the request, that error will appear in the Distribution Module window)
messageStringHuman readable message of the results of accepting and processing a request
eventIdStringEvent ID that was sent in request

Example of usage

JAVASCRIPT
distributionView.on(Distribution.Event.KEYBOARD_INPUT_RESPONSE, function(data) {
  console.log('keyboard-input-response', data)
})

distributionView.keyboardInputRequest("some keyboard input", "some-event-id-###")

You can integrate the Distribution Module in any web application or application capable of displaying web pages. To do this, you will receive from HPP a standalone_url when you create the HPP Session. This URL is the link that you should open in the browser (say a new window or a webview).

1 - Create session and get the standalone_url out of the response

After creating an HPP Session, you get back a Distribution Module URL in the field distribution_module.standalone_url. Any browser or webview accessing this URL will be able to distribute the HPP Session. You just need to open it, and then, from your native application, choose one of the different ways available to track the flow.

JSON
{
    "session_id": "<hpp_session_id>",
    "redirect_url": "https://payment.klarna.com/<random_access_id>",
    "session_url": "https://api.klarna.com/hpp/v1/sessions/<hpp_session_id>",
    "qr_code_url": "https://payment.klarna.com/<hpp_session_id>/qr",
    "distribution_url": "https://api.klarna.com/hpp/v1/sessions/<hpp_session_id>/distribution",
    "distribution_module:": {
      "token": "eyJhbGciOiJSUzI1NiJ9.ewogICJzZXNzaW9uX2lkIiA6ICIxM2E5NDA5NC0wM2RiLTY0NzgtYTFmNi0xMzYzMTQ3MTczYjIiLAogICJiYXNlX3VybCIgOiAiaHR0cHM6Ly9rbGFybmEtcGF5bWVudHMtZXUuc3RhZ2luZy5ldTEueWFjby5rbGFybmEubmV0IiwKICAiZGVzaWduIiA6ICJrbGFybmEiLAogICJsYW5ndWFnZSIgOiAiZW4iLAogICJwdXJjaGFzZV9jb3VudHJ5IiA6ICJTRSIsCiAgImFuYWx5dGljc19wcm9wZXJ0eV9pZCIgOiAiVUEtMzYwNTMxMzctMTEiLAogICJ0cmFjZV9mbG93IiA6IGZhbHNlLAogICJlbnZpcm9ubWVudCIgOiAic3RhZ2luZyI",
      "standalone_url": "https://payment-eu.playground.klarna.com/distributions/<random_distribution_id>?param1={{profile_id}}&param2={{view_id}}",
      "generation_url": "https://api.klarna.com/hpp/v1/sessions/<hpp_session_id>/distribution-module"
  • The distribution_url and qr_code_url present in this response let you handle distribution by yourself by using our APIs directly.
  • The distribution_module.generate_url lets you retrieve the Distribution Module’s parameters at a later time if you want to open it again on the same transaction.
  • The distribution_module.token is a JWT that you would use if you use our JavaScript SDK.

2 - Pass the dynamic parameters to the Distribution Module

The standalone_url you got back from our servers contains two placeholders that you needs to replace with the correct data:

  • {{profile_id}} should be replace by the ID of the Profile you want to use
  • {{view_id}} is a way for your application to give an identifier you will be able to get back from all events happening in the page. It could be a UUIDv4. The value will be validated against this regular expression: `[A-Z-a-z0-9\-_]{8,64}`

It is important that your service doesn’t tamper with anything else than the placeholders.

Example
Sample standalone_url value: 

https://payment-eu.playground.klarna.com/distributions/82631291-62d4-4f3e-8906-517f7addb178?param1={{profile_id}}&param2={{view_id}}

URL that your service should open: 

https://payment-eu.playground.klarna.com/distributions/82631291-62d4-4f3e-8906-517f7addb178?param1=ac0ef585-b1b1-4951-ab0f-f250f44f6b08&param2=b5485de0-11e0-4f36-8e50-c8ec68bfc806

Where:

  • ac0ef585-b1b1-4951-ab0f-f250f44f6b08 is a pre-configured profile identifier
  • b5485de0-11e0-4f36-8e50-c8ec68bfc806 is a UUID your service generated for this precise rendering

3 - Track the events or session status

Track by listening to Distribution Module Messages

A Distribution Module message is a string containing a JSON serialized event, which has a name and some data relevant to it. The events are the same ones supported by our SDK and follow the same structure and can be seem here[[#registering-for-events-happening-during-distribution]].​After you get your distribution_module.standalone_url and load it in the webview you can inject JavaScript code telling the Distribution Module how to comunicate back with your native code. This can be done by defining a function on the window object called klarnaWebViewPostMessage, this function will be called with a Distribution Module message that should be sent back to your native app.

Whenever the object window.klarnaWebViewPostMessage exists, the Distribution Module will consider this as the way for you to track the events. It will send events using the object as a function.​The event serialized in the message has the following fields:

PropertyDescription
nameThe event name
dataExtra data relevant to that event, which will be different for all types of events. Serialized in JSON.
view_idThe value you initially used as an identifier to correlate all events happening on the Distribution Module UI.
JSON
{
    "name": "close",
    "data": {
        "payment": {
            "final": true,
            "approved": true
        }
    },
    "view_id": "c988375c-fb76-4fc7-959b-de4e11ce8c74"
}
React Native example

In React Native, the message is contained in the data field of the nativeEvent, we need to parse the JSON and act on it. React Native has a handy way to inject JavaScript in the webview. Use attribute onMessage of the WebView to register method for handling events, that are happening during distribution.

JAVASCRIPT
function onDistributionModuleMessage({ nativeEvent }) {
  const {name, data, view_id} = JSON.parse(nativeEvent.data)
  
  if (name === 'close') {
    const { final, approved} = data.payment
    
    if(final) {
      if(approved) {
        // handle case where payment was successful
      }
Track by watching for navigation changes

When the Distribution Module is open using the standalone_url and the object window.klarnaWebViewPostMessage doesn’t exist, you can listen for url changes on the webview.

In this case, when the flow reaches a close status, the url will change to about:blank?klarna-distribution-module-close. You can react to this change and call our backend to get the latest payment status.

Track by polling the session status

For integrations where you can’t interact with the webview, like opening an external browser window to display the Distribution Module, you can poll the payment status and proceed when it reaches a final state.

Profiles: Adapt the user interface to your needs

The webservice to manage profiles hasn’t reached general availability. Reach out to your Klarna technical contact to help you roll this out. If you want to try it out know, you can already use one of the test profiles we have set up for you.

The user interface can be configured to better match your flow using profiles. Indeed, the distribution user interface may be shown either to a store associate or a consumer, and this depends on the context. There is no reason to show a QR code if your consumer can’t read it anyway. Also, there is no reason to show an email field input in a store context.

The configuration is defined in a Profile, stored on our servers so that you can benefit from any new functionality by changing your Profile without any other need.

Profile parameters
NameAccepted ValuesDefaultDescription
nameString Friendly name for the Profile
userSELLER, BUYER Whether the page will be used by the seller or the customer
methodsSMA, SMS_TOUCHPAD, QR, EMAIL, SMS_AND_EMAIL[SMS_AND_EMAIL]Which distribution methods will be displayed. Order will be used to define which one is shown first.
touchscreenbooleanfalseIs the device equipped with a touchscreen or not
synchronousbooleantrueIs the sale synchronous or not. When synchronous, the user needs to cancel the transaction to be able to exit the distribution interface, which will always lead to an end event callback. When asynchronous, the close event callback may happen with a non final state for the session.
timeoutpositive number300Duration that the interface will wait after the last user interaction before triggering a specific screen that requires the user to give a sign of activity (in seconds)
Flow associated to the close button of the Distribution Module

The Distribution Module has a close button on its top, which supports two different flows:

  • The user will be prompted if they really want to cancel the payment. If they proceed, the payment session will be either cancelled or disabled, depending on the type of user. The integrator receives a close event.
  • The user doesn’t see any prompt, the Distribution Module is directly closed and the integrator receives a close event.
Example: SMS distribution for store associates via a new browser window

In this example, the user interface is used in a Point of Sale terminal. The store associate scans the goods for the customer and then ask them how to pay. When they say that they want to pay with Klarna, the POS terminal triggers the HPP Distribution Module.

  • The user that will interact with it is a store associate, SELLER.
  • The store associate will send links to your customers by SMS when they have chosen Klarna as a payment method. The POS terminal is a touchscreen, it is easier for the store associate to get a digital keyboard optimized for entering phone numbers.
  • As the store associate can’t show their screen to the customer, there is no reason for them to see any QR code.
  • The sale is synchronous, so that if the store associate stops the distribution dialog, they first need to validate that they will cancel the session.
  • Also, as you can’t open iframe for technical reasons, you ask the SDK to create a new window.

1. Register the Profile and get the identifier back

JSON
{ 
	"name": "store associate distribution",
	"user": "SELLER",
	"methods": ["SMS_TOUCHPAD"],
	"touchscreen": true,
	"synchronous": true,
	"timeout": 300
}
JSON
{ 
	"profile_id": "1b9d742b-a234-7a5e-b9bd-4e2cdc36bb57"
}

2. Use the profile with the SDK

JAVASCRIPT
try {
  const distributionView = Klarna.HPP.Distribution.create(
    { 
      token: 'eyJhbGciOiJSUzI1NiJ9.ewogICJzZXNzaW9uX2lkIiA6ICIxM2E5NDA5NC0wM2RiLTY0NzgtYTFmNi0xMzYzMTQ3MTczYjIiLAogICJiYXNlX3VybCIgOiAiaHR0cHM6Ly9rbGFybmEtcGF5bWVudHMtZXUuc3RhZ2luZy5ldTEueWFjby5rbGFybmEubmV0IiwKICAiZGVzaWduIiA6ICJrbGFybmEiLAogICJsYW5ndWFnZSIgOiAiZW4iLAogICJwdXJjaGFzZV9jb3VudHJ5IiA6ICJTRSIsCiAgImFuYWx5dGljc19wcm9wZXJ0eV9pZCIgOiAiVUEtMzYwNTMxMzctMTEiLAogICJ0cmFjZV9mbG93IiA6IGZhbHNlLAogICJlbnZpcm9ubWVudCIgOiAic3RhZ2luZyI',
      target: Klarna.HPP.Distribution.Type.NEW_WINDOW,
      profile_id: "1b9d742b-a234-7a5e-b9bd-4e2cdc36bb57"
    }
  )
} catch (err) {
  // Handle error.

3. Sending keyboard input to HPP

In a “webview” component you are not able to call distributionView.keyboardInputRequest("some keyboard input", "some-event-id-###"). You can call the `window.ReactNativeWebView.postMessage` method instead, like in the code example below:

JAVASCRIPT
window.ReactNativeWebView.postMessage(JSON.stringify({
  "type": "keyboard-input-request", 
  "id": "some-event-id-###",
  "data": "some keyboard input"
}))

The keyboard-input-responce will come to onDistributionModuleMessage method, if it was defined as shown in the beginning of “React Native example” section.

In this example, the user interface will be embedded in your self checkout screen that your customers use to pay by themselves. They start by scanning their items and then pay, they can choose Klarna as a payment method. When they choose Klarna, the system triggers the HPP Distribution Module.

  • The user that will interact with it is a customer, BUYER.
  • The customer is facing the screen, so they can scan QR codes using their phone. They should also be able to send a link to their phone. The device has a touchscreen, but the default on-screen keyboard is not great for inputting phone numbers and using the Distribution Module’s phone number touchpad is a better option.
  • The payment transaction is synchronous, either the customer fulfils the payment or they have to cancel it. So if they use the close button, they will first need to cancel the transaction.
  • The interface should open as a modal, therefore you use the fullscreen parameter.

1. Register the Profile and get the identifier back

JSON
{ 
	"name": "Selfcheckout distribution",
	"user": "BUYER",
	"methods": ["SMS_TOUCHPAD", "QR"],
	"touchscreen": true,
	"synchronous": true,
	"timeout": 300
}
JSON
{ 
	"id": "362fa3e5-c439-7851-b885-4648ea469e7a"
}

2. Use the profile with the SDK

JAVASCRIPT
try {
  const distributionView = Klarna.HPP.Distribution.create(
    { 
      token: 'eyJhbGciOiJSUzI1NiJ9.ewogICJzZXNzaW9uX2lkIiA6ICIxM2E5NDA5NC0wM2RiLTY0NzgtYTFmNi0xMzYzMTQ3MTczYjIiLAogICJiYXNlX3VybCIgOiAiaHR0cHM6Ly9rbGFybmEtcGF5bWVudHMtZXUuc3RhZ2luZy5ldTEueWFjby5rbGFybmEubmV0IiwKICAiZGVzaWduIiA6ICJrbGFybmEiLAogICJsYW5ndWFnZSIgOiAiZW4iLAogICJwdXJjaGFzZV9jb3VudHJ5IiA6ICJTRSIsCiAgImFuYWx5dGljc19wcm9wZXJ0eV9pZCIgOiAiVUEtMzYwNTMxMzctMTEiLAogICJ0cmFjZV9mbG93IiA6IGZhbHNlLAogICJlbnZpcm9ubWVudCIgOiAic3RhZ2luZyI',
      target: Klarna.HPP.Distribution.Type.FULLSCREEN,
      profile_id: "362fa3e5-c439-7851-b885-4648ea469e7a"
    }
  )
} catch (err) {
  // Handle error.

In this example, the user interface is used in a telesales context where the telesales person is trying to close a deal with a customer on the phone.

  • The user that will interact with it is a telesales person, SELLER.
  • The telesales person will send links to your customers by SMS and by EMAIL. They work on computers and have a keyboard, so there is no need for digital keyboards.
  • The sale is asynchronous, so that if the store associate stops the distribution dialog, the consumer will still be able to complete the payment. Even if they hang up without finalizing the transaction, the consumer will still be able to access the payment link.
  • As the sale is asynchronous, it is possible for the telesales person to open the Distribution Module again via your application.

1. Register the Profile and get the identifier back

JSON
{ 
	"name": "Telesales distribution",
	"user": "SELLER",
	"methods": ["SMS_AND_EMAIL"],
	"touchscreen": false,
	"synchronous": false,
	"timeout": 0
}
JSON
{ 
	"profile_id": "d3c63b29-51a8-7d02-928f-abab925e1e50"
}

2. Use the profile with the SDK

JAVASCRIPT
try {
  const distributionView = Klarna.HPP.Distribution.create(
    { 
      token: 'eyJhbGciOiJSUzI1NiJ9.ewogICJzZXNzaW9uX2lkIiA6ICIxM2E5NDA5NC0wM2RiLTY0NzgtYTFmNi0xMzYzMTQ3MTczYjIiLAogICJiYXNlX3VybCIgOiAiaHR0cHM6Ly9rbGFybmEtcGF5bWVudHMtZXUuc3RhZ2luZy5ldTEueWFjby5rbGFybmEubmV0IiwKICAiZGVzaWduIiA6ICJrbGFybmEiLAogICJsYW5ndWFnZSIgOiAiZW4iLAogICJwdXJjaGFzZV9jb3VudHJ5IiA6ICJTRSIsCiAgImFuYWx5dGljc19wcm9wZXJ0eV9pZCIgOiAiVUEtMzYwNTMxMzctMTEiLAogICJ0cmFjZV9mbG93IiA6IGZhbHNlLAogICJlbnZpcm9ubWVudCIgOiAic3RhZ2luZyI',
      target: Klarna.HPP.Distribution.Type.FULLSCREEN,
      profile_id: "d3c63b29-51a8-7d02-928f-abab925e1e50"
    }
  )
} catch (err) {
  // Handle error.

This a list of predefined Profiles that you can use to quickly try out our Distribution Module.

Profile IdFeatures
ac0ef585-b1b1-4951-ab0f-f250f44f6b08Profile targets BUYER with QR and SMS_TOUCHPAD, closing will cancel session
4baf6592-2675-4ed7-93cc-783b8f73de5eProfile targets BUYER with SMS_TOUCHPAD and QR, closing will cancel session
78417431-3bf2-456e-9f18-95c3313db874Profile targets SELLER with SMS_AND_EMAIL, closing will cancel session
e205530c-37b5-4843-a228-871b5fd80c97Profile targets SELLER with SMS_TOUCHPAD, closing will cancel session
2696202f-c5f2-40d5-bbc5-50a9ff039949Profile targets SELLER with SMS_AND_EMAIL, closing will leave the session ongoing
9a627b00-1ea8-40e7-9e92-3eca00809e85Profile targets SELLER with SMS_TOUCHPAD and QR, closing will leave the session ongoing
Cookies
Terms of Service
© Klarna 2024