With this integration path, Partners are presenting a payment form generated by the Acquiring Partners:

• Customers are either redirected to a hosted checkout page or a checkout element embedded in the Partner website via a JavaScript library.
• Acquiring Partners must use Klarna's SDK to dynamically retrieve payment presentation assets (headers, icons, subheaders, button and instructions) and build the payment form.
• Klarna’s SDK keeps all elements up-to-date and optimized for the best conversion.

The following diagram gives an overview of the customer journey and the Acquiring Partner workflow.

Before calling Klarna’s Payment Authorization API, the Acquiring Partner must ensure their backend accept and forward Klarna specific parameters. These include interoperability parameters that preserve session context as well as supplementary purchase data which improves Klarna’s ability to assess risk, optimize approval rates, and deliver a more personalized checkout experience.

When Partners optimize their integration with Klarna, they are likely to have interoperability parameters to share with the Acquiring Partner.

These ensure consistent customer and transaction context throughout the payment flow and must be forwarded unaltered to Klarna.

Implementation requirements

• Accept both interoperability parameters in the Partner-facing checkout session API.
• Accept interoperability_token in client side javascript library.
  
  • interoperability_data should NOT be exposed client-side.
  
• Forward the interoperability parameters unmodified to Klarna’s Payment Authorization API.

Sample request

Below some examples of how Acquiring Partners can accept the interoperability parameters:

Parameter validation guidelines

As those parameters can change over time and are versioned so that the third party integration continues to work, Acquiring Partners need to respect these guidelines if they wish to validate parameters:

Supplementary purchase data improves Klarna’s ability to assess risk, optimize approval rates, and deliver a more personalized checkout experience. It includes structured information such as line items, L2/L3 data for Card Network optimization and other transaction context.

Acquiring Partners may receive this data from the Partner in two ways:

1. Embedded in interoperability_data
   
   • No parsing needed. Just forward it as-is.
   
2. As individual fields in the Acquiring Partner’s API
   
   • The Acquiring Partner is responsible for mapping those fields into Klarna’s supplementary_purchase_data object format when calling the Klarna Payment Authorization API.
   

​Read more about Supplementary Purchase Data here.

To integrate Klarna as a payment method into their payment form, the Acquiring Partner must initialize Klarna’s Web SDK using specific credentials and tokens.

If a Partner provides an interoperability_token, the Acquiring Partner must exchange if for a short-lived sdk_token using the Generate SDK Token API endpoint.

• The sdk_token is a single-use, browser-bound credential.
• It restores the customer's checkout context when loading Klarna’s Web SDK.
• The exchange should happen server-side before initializing the SDK and rendering the checkout page.

Load Klarna’s Web SDK module directly from Klarna’s servers to always get the latest version:

const { KlarnaSDK } = await import("https://js.klarna.com/web-sdk/v2/klarna.mjs");

Do not bundle or self-host the SDK script, always load it dynamically from Klarna.

To initialize the SDK, you must pass:

SDK Initialization sample

const klarna = await KlarnaSDK({
  clientId: "klarna_test_client_***",
  partnerAccountId: "krn:partner:global:account:***",
  sdkToken: "rxvqGi07j...", // retrieved from server
  locale: "en-US" // optional but recommended
});

// sdkToken can also be set after SDK initiation  
// Klarna.Config.setSdkToken("rxvqGi07j...")

After initialization, the Klarna SDK instance is ready to retrieve payment presentation data and manage the checkout flow.

Once the Klarna Web SDK is initialized, the next step is to retrieve Klarna’s Payment Presentation element.

This element provides all the visual assets, localized texts, and instructions needed to correctly display Klarna in your checkout form.
Use the initialized SDK instance to call the Klarna.Payment.presentation() method.

Basic checkout context parameters must be provided:

Sample code

var paymentPresentation = await klarna.Payment.presentation({
  amount: 11800,
  currency: "USD",
  locale: "en-US",
  intents: ["PAY"], // optional, other values: "SUBSCRIBE" ||"SIGNUP" || "SIGNIN" || "DONATE" 
});

The PaymentPresentation interface provides the full Klarna branding package and instructions tailored to the customer's purchase:

Once an instance of PaymentPresentation is created, the Acquiring Partner must dynamically render Klarna payment option in the payment selector according to Klarna’s presentation guidelines.

The instruction attribute from the PaymentPresentation instance informs how Klarna should be displayed in the payment form:

The presentation instructions indicate Acquiring Partners how Klarna should be presented in the payment selector. Acquiring Partners are required to adhere to Klarna’s payment presentation instruction to achieve the best-in-class user experience.

Show Klarna	Preselect Klarna	Show only Klarna	Hide Klarna

The presentation instructions are derived from possible customer purchase journeys described in the following article.

The following attributes from PaymentPresentation instance will be used when loading the payment selector initially:

1. Icon
2. Header
3. Short Subheader

Klarna icon

Klarna header

Klarna short subheader

The sample function below shows how to add the Klarna option dynamically in the payment form.

function renderKlarnaOption(paymentPresentation) {
  const klarnaContainer = document.getElementById("klarna-option");

  if (!klarnaContainer) {
    console.error("Klarna container missing.");
    return;
  }

  // Clear the container first
  klarnaContainer.innerHTML = `

The paymentPresentation.instruction must be respected when presenting Klarna:

if (paymentPresentation) {
  switch (paymentPresentation.instruction) {
    case "SHOW_KLARNA":
      console.log("Showing Klarna alongside other payment methods.");
      renderKlarnaOption(paymentPresentation);
      break;
    case "PRESELECT_KLARNA":
      console.log("Showing Klarna preselected alongside other payment methods.");
      renderKlarnaOption(paymentPresentation);
      break;

After the customer selects Klarna in the payment selector (or if Klarna was pre-selected according to presentation instructions), the next step is to show:

• The Enriched Subheader (more detailed messaging tailored to the customer and transaction).
• The Payment Button (to trigger Klarna’s Purchase Journey).

This step finalizes the presentation of Klarna's payment method before the customer proceeds to payment authorization.

1. Icon
2. Header
3. Short Subheader
4. Enriched Subheader
5. Payment Button

The remaining attributes from PaymentPresentation instance will be used when loading the payment selector:

The payment presentation instance allows you to either mount the prebuilt button component or retrieve the button text asset. The Klarna Payment Button is context-aware and dynamically adapts to your configuration.

Create a button configuration object

The paymentButton.component() can be configured with the following set of parameters:

Sample code

const buttonConfig = {
  shape: "pill",        // Button shape ("pill", "rectangle", etc.)
  theme: "dark",        // Theme ("dark", "light", etc.)
  initiate: () => {
      // This function should trigger your backend to call Klarna’s POST /payment/authorize API
      // and return a promise resolving to the authorization result
      return fetch('/your-api/authorize-payment')
        .then(response => response.json());
  },
  initiationMode: "DEVICE_BEST",  // Device-optimized payment initiation

Finally, mount the button inside the appropriate container:

paymentPresentation.paymentButton.component(buttonConfig).mount("#klarna-button-container");

• Accept interoperability_token in your checkout session API and JavaScript library.
• Accept interoperability_data in your checkout session API (server-side only).
• Forward both interoperability data points to Klarna exactly as received — do not modify.
• If interoperability_token is provided, exchange it server-side for an sdk_token.
• Load the Klarna SDK from the official URL — never bundle or self-host.
• Initialize the SDK with clientId, partnerAccountId, sdkToken, and locale.
• Use Klarna.Payment.presentation() SDK method to dynamically retrieve personalized assets to build the payment selector
• Never hardcode Klarna logos, texts, or layout — always render via SDK components.
• Always follow the returned instruction (e.g., show, hide, preselect Klarna).
• Mount the Payment Button only after Klarna is selected or preselected.