Klarna Docs - How to present Klarna Network in the checkout
How to present Klarna Network in the checkout

Boost conversion rates and customer confidence by seamlessly integrating Klarna into your checkout with dynamic branding, optimized payment buttons, and interoperability support.

To maximize conversion and usability, Klarna is integrated into the checkout in a way that enhances visibility and ensures customers can easily identify Klarna and understand their payment options. A well-structured checkout improves customer confidence, reduces abandonment rates, and drives higher conversions. Partners must dynamically retrieve Klarna’s branding, payment descriptors, and personalized messaging via Klarna’s APIs to present accurate, localized, and up-to-date payment options.

Klarna requires Acquiring Partners to dynamically retrieve presentation data to ensure that the correct payment methods are always presented without requiring technical changes, simplifying expansion and supporting global scalability. Klarna’s SDK dynamically returns accurate payment descriptors based on account settings and transaction specifics, ensuring compliance and optimizing customer conversion rates.

Acquiring Partners are expected to:

  1. Add Klarna to their checkout options.
  2. Present Klarna in the payment form according to this visual guidelines.
  3. Update the payment button (“Continue with Klarna”) when customer selects Klarna.
  4. Optimize checkout behaviour using our Product suite interoperability guidelines.
  5. Respect technical requirements and dynamically retrieve data.
  6. Support Klarna Express Checkout side-by-side when other express options are available.

A well-structured Klarna checkout experience improves customer trust, enhances transparency, and increases conversion rates. To achieve this, Partners should ensure Klarna is clearly represented, dynamically retrieved, and seamlessly integrated into the checkout.

Klarna’s branding must be consistent and instantly recognizable across all checkout touchpoints. The Klarna logo is dynamically retrieved and fetched directly from Klarna to maintain a uniform appearance and reinforce Klarna as a trusted payment method.

Klarna provides variations of its logo that match all industry standards and adjust to the Acquiring Partners format.

The header introduces Klarna in the payment form. The value will be dynamically adjusted based on the locale of the customer, adjusting language to match the customers market and language provided in the request.

bCustomers should see clear, accurate payment descriptors that dynamically adjust based on their location, transaction details, and available Klarna payment options. Subheaders present Klarna’s customer value in a structured way that allows customers to quickly compare their choices and make informed decisions. Where available the dynamic descriptors will prioritize messaging around prequalification, deals or 0% financing campaigns.

The subheader contains two distinct messages:

  • Short: shown when Klarna is not selected.
  • Enriched: shown alongside the short message when Klarna is selected.

By providing space for this information you enable Klarna to turbocharge your conversion.

Payment optionsDealsPre-qualification

Once Klarna is selected by the customer, the payment button should be visually distinct and dynamically retrieved. A well-integrated, recognizable button ensures customers understand what happens next, making them feel confident in proceeding with their purchase.

For higher conversion, Acquiring Partners are encouraged to use Klarna’s branding with the Klarna Payment Button, which reinforces trust and clarity.

As Acquiring Partners can have different layouts and content in the Payment form of their checkout, Klarna provides options that can be applied to common industry checkout standards.

Klarna offers both a rectangular badge and a square logo to suit different payment form layouts:

  • Badge: Ideal for displaying the full Klarna logo, best used when there are no width restrictions.
  • Square: Designed for layouts with a 1:1 aspect ratio.
  • Rectangle: Designed for layouts with a 2:3 aspect ratio.

For optimal clarity and brand recognition, Klarna recommends using the badge, as it more effectively communicates the option to pay with Klarna.

Badge logoSquare logoRectangle logo

Klarna supports two layout variants for presenting the payment form through the Web SDK. The appropriate layout depends on how your checkout flow is structured, specifically whether it uses a radio button to confirm payment selection or automatically advances without a dedicated CTA button.

Regardless of the layout, Klarna is shown as a single payment method with a dynamically generated subheader. This subheader provides a transparent, concise message tailored to the customer and the specific purchase.

Radio button flow

Use this layout when customers select their payment method using a radio button and confirm their choice with a CTA button. When Klarna is selected, the payment option expands to show more details.

Klarna also provides additional text with a link for customers to pre-qualify or learn more about Klarna’s payment offering. The CTA button must be updated to meet Klarna’s payment presentation requirements.

Before selectionAfter selection

Direct selection flow (no CTA)

Use this layout when the checkout flow navigates directly to the next step after the customer selects a payment method—without a CTA button.

A short, persistent description of Klarna is displayed to ensure visibility before selection. The subheader is dynamically generated to reflect purchase details and promote transparency, helping customers make informed decisions with minimal interaction.

Once Klarna is selected the main call-to-action (CTA) button is updated with dynamic copy, "Continue with Klarna”. There are two button types that can be used. The recommended variant is the Klarna payment button that includes dynamic copy and the Klarna badge. In alternative, simply use the dynamic copy. The Klarna button includes customizations to support dark and light mode and rounded or square button types to best align with the checkouts style.

Klarna button with badgeDynamic content only

When customers use Klarna’s boost features—such as On-Site Messaging, Klarna Express Checkout, or Sign in with Klarna—a session is created to maintain checkout continuity. This session connects all interactions with Klarna, retaining payment preferences and reducing friction at the checkout.

The customer shopping journey will highly influence the instruction Klarna provides, for example, when a user is logged in and has already a configured payment source, Klarna will instruct to pre-select Klarna. This pre-selection needs to be respected whenever the Partner has shared an interoperability_token with the Acquiring Partner, which highlights that they want to optimize for the Klarna integration.

Presentation InstructionUse casesDescription
SHOW_ONLY_KLARNAExpress Checkout, PrequalificationThe customer has already approved the purchase or shown clear intent for paying with Klarna.
The payment selector must show only Klarna and collapse all other options with a UX pattern implying that no choice needs to be made as it was done previously.Other options can be uncollapsed if the purchase with Klarna fails.
PRESELECT_KLARNASign-in with KlarnaThe customer is recognized by Klarna and likely to pay with Klarna.
The payment selector must pre-select Klarna and be listed as the first option to optimize conversion rates.Klarna suggests collapsing all other payment methods.
SHOW_KLARNA
(default)
Standard checkoutThe customer is not recognized  by Klarna (yet).
Klarna should be available in the payment selector, respecting the ordering of the merchant and the Klarna guidelines.
HIDE_KLARNAStandard checkoutKlarna is not offered for the current payment context, due to currency not being supported for example.
Don't show a Klarna button or offer Klarna.

​By providing an Interoperability token at checkout Klarna can reference previous interactions and provide presentation instructions. Klarna will respond with one of the below, indicating what action should be taken by the Partner responsible for rendering the checkout:

  • SHOW_KLARNA – Klarna is available as a payment method alongside others.

  • PRESELECT_KLARNA – Klarna is preselected based on previous interactions, such as Sign in with Klarna (SIWK), which recognizes returning customers and skips authentication steps.
User prequalifies from the On-site messaging on the product pageinteroperability_token is recognized in the checkout. Klarna is preselected and pre-qualification messaging is exposed.
  • SHOWONLY_KLARNA – Klarna is the only payment method shown when the customer has pre-qualified or committed to using Klarna. This applies to multi-step Klarna Express Checkout, where Klarna is the only option in the selector.
  • HIDE_KLARNA – Klarna is not available for this transaction (e.g., unsupported currency).