Messaging on the homepage	Messaging on the product detail page	Messaging in the checkout

Before you integrate On-site messaging, check that you meet the following prerequisites:

1. Ensure that you have Klarna enabled with your Acquiring Partner.
2. Confirm you have access to the Klarna Portal.
3. Inside Klarna Portal:
   1. Confirm that you have generated a client identifier with your domain URL allowlisted.
   2. Confirm that you have generated an API key.
4. Add Terms and Conditions for Web SDK.

Here's an overview of all the steps to add On-site messaging into your website:

• Initialize Klarna Web SDK using https://js.klarna.com/web-sdk/v2/klarna.mjs
• Display Klarna On-site messaging on relevant pages.
• Enable prequalification.

The following diagram outlines the interactions among different components:

The Klarna Web SDK (klarna.mjs) follows JavaScript module approach and should be included in places where you need to have a reference to the SDK such as while rendering any components or initiating a payment flow. Always load the Web SDK from https://js.klarna.com/web-sdk/v2/klarna.mjs to remain compliant. Don’t include the script in a bundle or host it yourself.

Use your clientId to initialize the SDK.

<script type="module">
  const { KlarnaSDK } = await import("https://js.klarna.com/web-sdk/v2/klarna.mjs")

  const Klarna = await KlarnaSDK({ 
    clientId: "[client-id]",
    products: ["MESSAGING"],
    locale: "en-US", // optional
  })

  // Klarna SDK ready to be utilized

For the full API specifications, refer to Klarna Web SDK.

Web SDK provides the placement method that allows to create and mount the messaging placement programmatically.

Code example

klarna.Messaging.placement({
    key: 'credit-promotion-badge',
    amount: 20000,
    currency: "USD",
    locale: 'en-US',
    theme: 'light'
}).mount('#osm-placement');

Parameters

The pre-qualification feature allows customers to check their eligibility for Klarna financing before completing a payment request. This reduces friction and increases confidence, as customers know their options upfront.

Interact with Product or Cart On-site Messaging placement	Go through Klarna Pre-qualification flow	Checkout page reflects prequalified status using interoperability token.

Pre-qualification messaging can be shown in several ways:

• Integrate with WebSDK : As part of a regular OSM placement (e.g., credit promotion auto size)

You build the payment form

If you load the WebSDK at the checkout, Klarna will preserved the Shopping session via the interoperability_token to reflect the pre-qualification in the checkout.

This will be stored for 48 hours. After this period the pre-qualification details will expire.

Acquiring Partner builds the payment form

When integrating On-site messaging (OSM) through the Klarna web SDK, Partners may need to retrieve an interoperability token and pass it to their Acquiring Partner for downstream processing or reporting.

Retrieve the Interoperability Token

After initializing the Klarna web SDK, use the provided API to obtain the interoperability token. This token is typically available via a callback or a dedicated method.

const interoperabilityToken = await Klarna.Messaging.getInteroperabilityToken();
  

Example: Integrate Presentation API using interoperability token

When initializing the Presentation APIAPI, it is important to give the api context on the customer to offer the personalised experience that Klarna tailors. This is done by adding the Interoperability token to the Klarna-Interoperability-Token header in the presentation api request.

Sample request body

curl https://api-global.test.klarna.com/v2/accounts/{partner_account_id}/payment/presentation \
  -H 'Authorization: Basic <API key>' \
  -H 'Content-Type: application/json' \
  -H 'Klarna-Interoperability-Token: eyJhbGciOiJIU...' \
  -d '{
        "locale": "en-US",
        "amount": 11836,
        "currency": "USD",
        "intents": ["PAY"]
      }'