Payment Presentation Overview
Integrate Klarna Payment Presentation in the checkout. There are two ways for Partners to present Klarna: the Klarna Web SDK (recommended) or a server-side integration via the Payment Presentation API.
Payment Presentation is the first step in the Klarna flow. It controls how Klarna appears as a payment method during checkout, including the headers, subheaders, badges, buttons, icons, and messaging customers see before they click the Klarna button. Presenting Klarna correctly helps customers recognize Klarna, see the offer that applies to their basket, and decide to pay with Klarna.
This page summarizes the two integration paths available to Partners. For the underlying concept (the presentation instructions returned by Klarna, dynamic adaptation, refresh requirements, and the Web SDK flow in detail), see Payment Presentation.
Klarna recommends the Klarna Web SDK as the default integration path. It delivers the most optimized customer experience, keeps the Klarna UI aligned with Klarna's standards (localized text, branding, button shape), and ships the prebuilt payment button. A server-side integration via the Payment Presentation API is available when the checkout is fully server-rendered or client-side SDK dependencies are not an option.
Integration paths and flow
The recommended way to integrate Klarna Payment Presentation is the Klarna Web SDK. Partners that cannot embed the SDK can fall back to a server-side integration via the Payment Presentation API. Both paths use the same underlying Klarna presentation data; what differs is how that data is retrieved and where the payment selector is rendered.
Klarna Web SDK (recommended)
In a Klarna Web SDK integration, the Partner's frontend loads the Klarna Web SDK, calls
klarna.Payment.presentation() with the current payment context, and renders the returned paymentOption (and optional savedPaymentOption) in the Partner's own payment selector. The Web SDK also delivers the prebuilt Klarna payment button that launches the Klarna Purchase Journey when the customer clicks it.When to use: Choose this path to deliver the most optimized customer experience. The Web SDK keeps the Klarna UI aligned with Klarna's UI requirements, applies localized text and branding automatically, and includes the prebuilt payment button.
- For the presentation step (initialize the SDK, retrieve presentation, render the payment selector and the Klarna payment button), see Build Payment Presentation with the Klarna Web SDK.
- For the post-click flow (Payment Request, Klarna Network Session Token handling, and authorization), see Authorize a customer-initiated payment (Web SDK).
Sequence diagram
sequenceDiagram
autonumber
participant C as Customer
participant P as Partner
participant K as Klarna
C->>P: Visit checkout page
P->>K: Initialize Klarna Web SDK (clientId)
P->>K: klarna.Payment.presentation()
Note over P,K: amount, currency, locale, intent
K-->>P: PaymentPresentation (instruction, paymentOption, savedPaymentOption?)
P->>P: Render Klarna in the payment selector
C->>P: Select Klarna and click the payment button
Note over P,K: Continue with Payment Request and authorization
Server-side integration via the Payment Presentation API
In a server-side integration, the Partner's backend calls Klarna's Payment Presentation API to retrieve presentation instructions, then renders the payment selector server-side without embedding the Klarna Web SDK on the frontend.
When to use: Choose this path only when the Klarna Web SDK cannot be embedded, for example, fully server-rendered checkouts, environments that disallow client-side SDK dependencies, or back-office channels where the payment selector must stay entirely under server control.
- For the implementation walkthrough (request the API, render the instruction, render the Klarna payment button), see Build Payment Presentation with the Payment Presentation API.
- For the post-click flow (Payment Request, Klarna Network Session Token handling, and authorization), see Authorize a customer-initiated payment (server-side).
Next steps
- Implement Payment Presentation with the Klarna Web SDK. See Build Payment Presentation with the Klarna Web SDK.
- Continue with Payment Request creation, Klarna Network Session Token handling, and authorization. See Authorize a customer-initiated payment (Web SDK).
- Style the Klarna payment button to match the checkout. See Checkout styling.