Klarna Docs - Hosted Checkout pages and embedded elements
API and SDKsSupport
Hosted Checkout pages and embedded elements

Enable Klarna as a payment method within Hosted Checkout experiences or embedded checkout elements by leveraging Klarna’s API, SDK and webhook infrastructure. This approach ensures a smooth and responsive customer experience while maintaining full control over the payment flow.

This guide is intended for Acquiring Partners who provide APIs and/or SDKs to their Partners, allowing them to integrate a Hosted Checkout or drop-in embedded checkout component. Typically, this integration requires both client-side and server-side components to render and manage the checkout experience, with the Acquiring Partner responsible for hosting and controlling the payment form.

To support Klarna in this setup, Acquiring Partners are expected to:

  • Support Klarna's interoperability data points as part of their own API offerings.
  • Implement interoperability logic and optionally support Express Checkout-style flows.
  • Dynamically retrieve Klarna’s presentation instructions to build the payment selector.
  • Initiate the Klarna Purchase Journey via a pop-up using Klarna’s SDK (avoiding full-page redirects).
  • Authorize the payment using Klarna’s APIs.
  • A payment server to interact with Klarna’s Payment Authorize API.
  • A client-side component that integrates Klarna’s SDK and launches the Klarna purchase window as a pop-up.
  • A webhook listener to receive and handle asynchronous payment status updates from Klarna.
  1. The customer navigates to the Partner’s checkout page.
  2. The Partner initiates a checkout session with the Acquiring Partner and sends the interoperability data points.
  3. The Partner either redirects the customer to the Acquiring Partner’s Hosted Checkout Page URL or embeds the checkout element directly on the page.
  4. The Acquiring Partner’s client-side component initializes Klarna’s SDK and integrates it into the payment selector interface.
  5. The customer selects Klarna as their payment method and clicks the Klarna Payment button.
  6. The Acquiring Partner uses a combination of the Authorize Payment API and Klarna’s SDK to initiate the Klarna purchase flow. The interoperability data points shared by the Partner is also forwarded at this stage.

    • Happy Path: The payment transaction is created immediately, and the customer is redirected to the order confirmation page.

    • Step-Up Required: Klarna’s purchase flow is launched in a pop-up window for additional verification.
  7. (If Step-Up is Required) The Acquiring Partner monitors the payment status asynchronously via Klarna Webhooks.
  8. (If Step-Up is Required) Once the step-up flow is completed, the Acquiring Partner calls Klarna’s Payment Authorize API again to finalize and create the payment transaction.
sequenceDiagram autonumber participant C as Customer participant P as Partner participant AP as Acquiring Partner participant K as Klarna C->>P: Visit checkout page P->>AP: Create checkout session Note over P,AP: Share interoperability data points AP->>P: Return checkout session P->>AP: Load embedded element or redirect to hosted checkout AP->>K: Initialize Klarna SDK Note over AP,K: Share interoperability data points AP->>K: Request presentation instructions (SDK) K->>AP: Return assets and instructions AP->>AP: Render payment selector C->>AP: Select Klarna payment method AP->>AP: Update Klarna presentation<br>Show Klarna payment button C->>AP: Click Klarna payment button AP->>+K: Trigger authorize handler (SDK) Note over AP,K: First Authorize API call with interoperability data points alt Step-up required K->>-K: Start Klarna purchase journey C->>K: Complete purchase on Klarna K->>AP: Webhook + client notification Note over K,AP: Payment request completed AP->>K: Authorize Payment API (final) K->>AP: Payment approved AP->>P: Webhook + client notification Note over P,AP: Order completed AP->>C: Redirect to confirmation page else Instant approval K->>AP: Payment approved AP->>P: Webhook + client notification Note over P,AP: Order completed AP->>C: Redirect to confirmation page else Declined K->>AP: Payment declined AP->>P: Webhook + client notification Note over P,AP: Payment declined AP->>C: Return to checkout Note over C,AP: Display error message end
  1. Accept data points from the Partner
  2. Load and initialize Klarna SDK
  3. Build the payment selector
  4. Initiation of the payment with Klarna: First authorization
  5. Handle step-up scenario
  6. Monitor the payment request state
  7. Final authorization