Mobile SDK integration

Integrate Klarna via Mobile SDK by embedding the payment form, tracking payment status, and completing authorization flows for a smoooth mobile checkout experience.

312 min read

Prerequisites

Before you integrate, check that you meet the following prerequisites:

1.
Ensure that you have Klarna enabled with Worldpay.
2.
Confirm you have access to the Klarna Partner Portal.
3.
Inside Klarna Partner Portal:
1. 3.1.
  Confirm that you have generated a client identifier.
2. 3.2.
  Confirm that you have generated an API key.
4.
Confirm that you have registered webhooks for payment.request.state-change.completed events following Webhooks guidelines.
5.
Add Terms and Conditions for client-side SDK usage.
6.
Worldpay supports klarna_network_session_token exchange for client-side use with Klarna.

Integration overview

This guide covers iOS, Android, React Native, and Flutter integrations.

Here's an overview of all the steps to processing a payment with Klarna via the Mobile SDK:

1.
Present Klarna as a payment option in the payment form.
2.
Customer clicks the Klarna payment button in your checkout.
3.
You create either a server-side payment request with Worldpay or use the Klarna Mobile SDK to initiate the payment request, sharing all available interoperability data points.
4.
If customer interaction is required:
- 4.1.
  The Klarna Purchase Journey is launched.
- 4.2.
  The customer completes the Klarna Purchase Journey.
5.
Klarna returns a klarna_network_session_token via a webhook.
6.
You create an authorization request with Worldpay and share the required interoperability data points.
7.
Worldpay responds with an approval and order completion.
8.
Customer is redirected to your confirmation page.

sequenceDiagram participant C as Customer participant P as Partner participant K as Klarna participant AP as Worldpay C->>P: Visit checkout page P->>K: Initialize Klarna Mobile SDK P->>K: Request presentation instructions K->>P: Return assets and instructions P->>P: Render payment selector C->>P: Select Klarna payment method P->>P: Update Klarna presentation<br>Show Klarna payment button C->>P: Click Klarna payment button Note over P,AP: Handle the "Pay with Klarna" button click P->>K: Initiate Payment Request K->>C: Start Klarna purchase flow C->>K: Complete Klarna purchase flow K->>P: Payment request completed event via webhook Note over P,K: klarna_network_session_token P->>AP: Authorize payment Note over P,AP: Share interoperability data points AP->>P: Respond with approval Note over P,AP: Order completed P->>C: Redirect to confirmation page

Platform integration

1. General

Checkout Styling

Klarna Buttons Styling

API & SDK references

Generate SDK token

Payment Request API

Jump to section...