For PartnersFor Acquiring Partners

Payment Presentation Overview

Understand how the payment selector experience displays Klarna as a payment method before Payment Authorization.
Payment Presentation is the first step in the Klarna flow. It determines how Klarna appears as a payment method during checkout, before the customer clicks the payment button. This includes the headers, subheaders, badges, buttons, and messaging that help customers recognize and select Klarna.
Implement Payment Presentation correctly to provide customers with clear, localized, and branded Klarna payment methods that comply with Klarna's UI requirements and optimize conversion.

Overview
Payment Presentation happens in two phases:
  • Backend retrieval: Your server calls Klarna's API or your frontend uses the Klarna web SDK to retrieve presentation instructions based on the payment context (amount, currency, locale)
  • Frontend rendering: The Klarna web SDK or your custom UI displays the payment selector with the appropriate messaging, branding, and visual elements
The presentation instructions returned by Klarna include:
  • Instruction: How to display Klarna (SHOW_KLARNA, SHOW_ONLY_KLARNA, or PRESELECT_KLARNA)
  • Payment method: Header, subheader, badge, button text, icons, and messaging for the standard Klarna payment method
  • Saved payment method (optional): Additional presentation elements when a returning customer has saved payment information
Payment Presentation adapts dynamically based on:
  • Customer context – Personalized for returning customers leveraging customer tokens
  • Purchase amount – Different payment methods are advertised depending on purchase amount
  • Payment intent – Customized for payment scenarios like PAY, SUBSCRIBE, or ADD_TO_WALLET
  • Locale and currency – Localized text and currency-appropriate formatting
Presentation assets (instalment amounts, messaging, and links) are tied to the amount passed when retrieving presentation. If the customer changes the basket or final amount after Klarna is already displayed, Payment Presentation must be retrieved again with the updated amount and the Klarna must be re-rendered with the new response. Displaying Payment Presentation from a previous total can show incorrect instalment amounts and mislead customers.

Integration paths and flow
There are two ways to integrate Payment Presentation into your checkout flow: server-side integration and hosted checkout. The path determines how presentation instructions are retrieved and rendered.

Server-side integration
In a server-side integration, Partners build, host, and maintain their own checkout and payment forms. The Partner's backend retrieves presentation instructions (either from the Acquiring Partner API or directly from Klarna's Payment Presentation services, depending on the integration configuration), then renders the payment selector in their own UI.
When to use: Choose this path when Partners need full control over checkout UI, branding, and backend integration, or need to cache presentation data. Partners implement and maintain the checkout UI and handle presentation updates; you (as Acquiring Partner) provide the presentation data via your API.

Flow steps
  1. 1.
    The customer proceeds to the Partner's checkout
  2. 2.
    The Partner loads the checkout form
  3. 3.
    The Partner retrieves presentation instructions through your Acquiring Partner API
  4. 4.
    The Acquiring Partner requests presentation data from Klarna via getPresentationAPIAPI
  5. 5.
    Klarna returns presentation instructions with payment methods
  6. 6.
    The Acquiring Partner returns payment methods to the Partner
  7. 7.
    The Partner displays Klarna as a payment method to the customer

Sequence diagram
sequenceDiagram autonumber participant C as Customer participant P as Partner participant AP as Acquiring Partner participant K as Klarna C->>P: Proceed to checkout P->>P: Load checkout form P->>AP: Request payment methods AP->>K: Retrieve presentation instructions via API Note over AP,K: Retrieve presentation instructions K-->>AP: Return presentation instructions AP-->>P: Return payment methods with Klarna P-->>C: Display payment selector with Klarna

Hosted checkout
In a hosted checkout and embedded elements integration, Acquiring Partners host and control the payment form, either as a hosted checkout page or embedded element. Your client-side component initializes Klarna's SDK and dynamically retrieves presentation instructions to build the payment selector.
When to use: Choose this path when you (as Acquiring Partner) want to control the checkout experience with a hosted page or embedded element and have Klarna-managed UI that stays compliant and updates automatically. You host and maintain the payment form and integrate with Klarna's SDK; Partners have less flexibility to customize their checkout experience.

Flow steps
  1. 1.
    The customer proceeds to checkout
  2. 2.
    The Partner creates a Payment Request with the Acquiring Partner
  3. 3.
    The Partner loads the Acquiring Partner's checkout form (hosted page or embedded element)
  4. 4.
    The Acquiring Partner initializes Klarna web SDK
  5. 5.
    The Acquiring Partner retrieves presentation instructions via Klarna web SDK
  6. 6.
    Klarna returns presentation instructions with payment methods
  7. 7.
    The Acquiring Partner displays Klarna as a payment method to the customer

Sequence diagram
sequenceDiagram autonumber participant C as Customer participant P as Partner participant AP as Acquiring Partner participant K as Klarna C->>P: Proceed to checkout P->>AP: Create Payment Request AP-->>P: Return Payment Request P->>AP: Load checkout form (hosted or embedded) AP->>K: Initialize Klarna SDK and retrieve presentation instructions Note over AP,K: SDK handles presentation retrieval K-->>AP: Return presentation instructions AP-->>C: Display payment selector with Klarna
Related articles
Payment Presentation for Server-side integration
Payment Presentation for Hosted Checkout integration
API & SDK references
API
Retrieve Klarna payment presentation elements