Payment Presentation Overview

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.

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.

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.

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.

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 getPresentationAPI
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

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.

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