Payment Presentation Overview
Understand how the payment selector experience displays Klarna as a payment method before Payment Authorization.
6 min read
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 or Mobile SDK uses the Klarna web SDK or Klarna Mobile SDK to retrieve presentation instructions based on the payment context (
amount,currency,locale) - Frontend rendering: The Klarna web SDK, the Klarna Mobile 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_, orONLY_ KLARNA 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, orADD_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 three ways to integrate Payment Presentation into your checkout flow: server-side integration, hosted checkout (including top-level and iframe-based configurations), and mobile integration. 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.The customer proceeds to the Partner's checkout
- 2.The Partner loads the checkout form
- 3.The Partner retrieves presentation instructions through your Acquiring Partner API
- 4.The Acquiring Partner requests presentation data from Klarna via getPresentationAPI
- 5.Klarna returns presentation instructions with payment methods
- 6.The Acquiring Partner returns payment methods to the Partner
- 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.The customer proceeds to checkout
- 2.The Partner creates a Payment Request with the Acquiring Partner
- 3.The Partner loads the Acquiring Partner's checkout form (hosted page or embedded element)
- 4.The Acquiring Partner initializes Klarna web SDK
- 5.The Acquiring Partner retrieves presentation instructions via Klarna web SDK
- 6.Klarna returns presentation instructions with payment methods
- 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
Loading the Klarna web SDK in an iframe
While Klarna recommends loading the Klarna web SDK in a top-level page, loading the Web SDK in an iframe is also an available integration path for Acquiring Partners:
- Allow Partners to load your Hosted Checkout in an iframe: If Partners embed your Hosted Checkout within their checkout page in an iframe, follow Allow Partners to load your Hosted Checkout in an iframe.
- Load the Klarna web SDK in your own iframe: If you embed the Klarna web SDK inside an iframe you control, follow Load the Klarna web SDK in your own iframe.
Browser security prerequisite
Both iframe options require completing the Browser security configuration for the Klarna web SDK beforehand to configure required iframe attributes (
sandbox and allow), permission policies, and security headers.Mobile integration
In a mobile integration, Acquiring Partners provide their own Mobile SDK (e.g., a unified payment sheet, drop-in UI, or custom component library) that Partners embed in their apps. Your Mobile SDK embeds the Klarna Mobile SDK as an internal dependency on iOS, Android, or React Native, retrieves presentation instructions in the app, and renders Klarna natively in your payment sheet.
When to use: Choose this path when you (as Acquiring Partner) distribute a Mobile SDK and want Klarna presented natively in Partner apps with Klarna-managed UI that stays compliant and updates automatically. You maintain your Mobile SDK and its Klarna Mobile SDK dependency; Partners integrate your Mobile SDK and, on iOS and React Native, provide their app's URL scheme.
Flow steps
- 1.The customer proceeds to checkout in the Partner's app
- 2.The Partner app opens the Acquiring Partner's payment sheet
- 3.The Acquiring Partner's Mobile SDK initializes the Klarna Mobile SDK
- 4.The Acquiring Partner's Mobile SDK retrieves presentation instructions via the Klarna Mobile SDK
- 5.Klarna returns presentation instructions with payment methods
- 6.The Acquiring Partner's Mobile SDK displays Klarna as a payment method to the customer
Sequence diagram
sequenceDiagram
autonumber
participant C as Customer
participant P as Partner app
participant AP as Acquiring Partner Mobile SDK
participant K as Klarna
C->>P: Proceed to checkout
P->>AP: Open payment sheet
AP->>K: Initialize Klarna Mobile SDK and retrieve presentation instructions
Note over AP,K: Klarna Mobile SDK handles presentation retrieval
K-->>AP: Return presentation instructions
AP-->>C: Display payment selector with Klarna
Jump to section...