Mobile SDK integration

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

1. 1.
   Ensure that you have Klarna enabled with your Acquiring Partner.
2. 2.
   Confirm you have access to the Klarna Portal.
3. 3.
   Inside Klarna Portal:

   1. 3.1.
      Confirm that you have generated a client identifier.
   2. 3.2.
      Confirm that you have generated an API key.
4. 4.
   Confirm that you have registered webhooks for payment.request.state-change.completed events following Webhooks guidelines.
5. 5.
   Add Terms and Conditions for client-side SDK usage.
6. 6.
   Your Acquiring Partner supports interoperability_token exchange for client-side use with Klarna.

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

1. 1.
   Present Klarna as a payment option in the payment form.
2. 2.
   Customer clicks the Klarna payment button in your checkout.
3. 3.
   You create either a server-side payment request with your Acquiring Partner or use the Klarna Mobile SDK to initiate the payment request, sharing all available interoperability data points.
4. 4.
   If customer interaction is required:

   • 4.1.
     The Klarna Purchase Journey is launched.
   • 4.2.
     The customer completes the Klarna Purchase Journey.
5. 5.
   Klarna returns an interoperability_token via a webhook.
6. 6.
   You create an authorization request with your Acquiring Partner and share the required interoperability data points.
7. 7.
   Acquiring Partner responds with an approval and order completion.
8. 8.
   Customer is redirected to your confirmation page.

Integrate the Klarna Mobile SDK to display Klarna as a payment option within your own payment form. This approach lets you fully control the checkout experience while using Klarna’s ready-made UI components for secure payment handling.

This guide explains how to present Klarna in your payment form, both during the initial load and after the customer selects Klarna. By following these steps, you’ll ensure the payment flow meets Klarna’s design and functionality standards:

Initial presentation	When Klarna is selected

It's crucial that Klarna payment presentation is dynamic and not hardcoded on your server to deliver the best conversion outcome.

To add the required dependency, do the following steps:

1. 1.
   In Xcode, select File → Add Package Dependencies...
2. 2.
   In the opened window, enter https://github.com/klarna/klarna-mobile-sdk-ios in the search bar.
3. 3.
   For Dependency Rule, select Up to Next Major Version and leave the default version as is.
4. 4.
   For Add to Project, select your project.
5. 5.
   Click Add Package.
6. 6.
   In the new window that opens, add KlarnaNetworkPayment to your desired target.

First, add the Klarna Mobile SDK's Payment module dependency to your Podfile by running the following command:

 pod "KlarnaMobileSDK/KlarnaNetworkPayment"

Next, run the command below and then you should be able to import KlarnaMobileSDK module in your workspace and start using it.

 pod install

First, add the Klarna Mobile SDK Maven repository:

repositories {
    maven("https://x.klarnacdn.net/mobile-sdk/")
}

Next, add the Klarna Mobile SDK's Payment library as a dependency to your application:

dependencies {
     implementation("com.klarna.mobile.sdk:klarna-network-payment:<LATEST_VERSION>")
}

To find the latest version you can always refer to this link.

First, add the Klarna Mobile SDK Maven repository:

repositories {
    maven {
        url 'https://x.klarnacdn.net/mobile-sdk/'
    }
}

Next, add the Klarna Mobile SDK's Payment library as a dependency to your application:

dependencies {
    implementation 'com.klarna.mobile.sdk:klarna-network-payment:<LATEST_VERSION>'
}

To find the latest version you can always refer to this link.

The first step to add Klarna Payment to your application is to initialize the Klarna SDK:

// Create an instance of KlarnaConfiguration
let configuration = KlarnaConfiguration(
    clientId: <CLIENT_ID>,
    locale: <LOCALE>,
    sdkToken: <SDK_TOKEN>
)

// Initialize Klarna
let klarnaResult = Klarna.initialize(configuration: config)
switch klarnaResult {
case .success(let klarnaInstance):
    // Initialization succeeded. klarnaInstance is a ready-to-use instance of Klarna.

The following table lists the properties of KlarnaConfiguration.

This step is only applicable if you are in possession of an interoperability token.

The SDK token is a single-use, browser-bound credential that restores the customer’s checkout context when Klarna’s Mobile SDK is initialized. This token should be exchanged server-side before initializing the SDK and displaying the checkout view to the customer.

You must exchange the acquired interoperability token for a short-lived SDK token using the generateSdkToken endpoint.

Consult the API reference for generateSdkToken API call, to find a complete description of the parameters.

Klarna payment presentation provides all the visual assets, localized texts, and instructions needed to correctly display Klarna in your checkout screen. To fetch the payment presentation, you need to call the KlarnaPaymentPresentation.fetch() method like below:

// Create an instance of KlarnaPaymentPresentationData
let paymentPresentationData = KlarnaPaymentPresentationData(
    amount = <AMOUNT>,
    currency = <CURRENCY>,
    intents = <INTENTS>,
    paymentProgramEnablementCodes = <PAYMENT_PROGRAM_ENABLEMENT_CODES>,
    subscriptionBillingInterval = <SUBSCRIPTION_BILLING_INTERVAL>,
    subscriptionBillingIntervalFrequency = <SUBSCRIPTION_BILLING_INTERVAL_FREQUENCY>
)

// Fetch the payment presentation
klarna.payment.presentation.fetch(data: paymentPresentationData) { (result: Result<KlarnaPaymentPresentationContent, KlarnaSDKError>) in

The following table lists the parameters of KlarnaPaymentPresentation.fetch() method.

The table below lists the properties of KlarnaPaymentPresentationData:

After a successful payment presentation fetch, you will get an instance of KlarnaPaymentPresentationContent containing the full Klarna branding package and instructions that can be used to present Klarna as a payment option.

This section explains how to handle Klarna’s payment presentation instructions, which define how Klarna should appear within the checkout form. Adhering to these instructions is essential to maintain a consistent and optimized user experience—whether Klarna is displayed alongside other payment methods, preselected, or shown as the only available option.

Compliance with Klarna’s presentation instructions is especially important when integrating Klarna Conversion Boost features, such as Express Checkout or Sign in with Klarna, to ensure a seamless and unified customer experience.

The instruction property available in KlarnaPaymentPresentationContent can have the following possible values:

Here are example outcomes illustrating how Klarna should be displayed for each instruction:

Show Klarna	Preselect Klarna	Show only Klarna

The presentation instructions are derived from possible customer purchase journeys described in the following article.

The following code snippet shows an example of how instruction can be used to decide how to present Klarna as a payment option.

private func renderKlarnaPresentation(content: KlarnaPaymentPresentationContent) {
    let instruction: KlarnaPaymentPresentationInstruction = content.instruction
    switch instruction {
    case .showKlarna:
        // Show Klarna alongside other payment options
    case .preselectKlarna:
        // Preselect Klarna as the default payment option
    case .showOnlyKlarna:
        // Show only Klarna as the payment option
    }
    // The rest of the code for rendering Klarna presentation.
}

After fetching the payment presentation, you have access to an instance of KlarnaPaymentPresentationContent. It can be used to present Klarna as a payment option. The Klarna payment option must be rendered in the payment selector according to Klarna’s presentation guidelines.

The following table lists the properties of KlarnaPaymentPresentationContent.

The KlarnaPaymentPresentationPaymentOption type has the following properties:

1. 1.
   icon
2. 2.
   badge
3. 3.
   header
4. 4.
   subheader
5. 5.
   message
6. 6.
   terms
7. 7.
   button

Present the Klarna payment option elements within your Klarna payment method view to render them in the payment form. The code snippet below shows a very basic sample of how you can do so:

private func renderKlarnaPresentation(content: KlarnaPaymentPresentationContent) {
    if let headerText = content.paymentOption?.header, case .plainText(let text) = headerText {
        // Show the header text in the UI (for example in a UITextView)
    }
    if let subheaderText = content.paymentOption?.subheader, case .plainText(let text) = subheaderText {
        // Show the subheader text in the UI (for example in a UITextView)
    }
    if let badgeText = content.paymentOption?.badge, case .plainText(let text) = badgeText {
        // Show the badge text in the UI (for example in a UITextView)
    }
    if let messageText = content.paymentOption?.message, case .attributedText(let parts) = messageText {
        let message = getAttributedString(parts: parts)

When a Klarna payment option is selected/deselected, ensure the additional visual components are shown/hidden properly.

// UIKit approach
func toggleKlarnaPaymentOptionSelection(isSelected: Bool) {
    // In this example, klarnaPresentationContainer is a view containing
    // presentation message, terms and button
    klarnaPresentationContainer.isHidden = !isSelected
}

// SwiftUI approach
struct KlarnaPaymentOption: View {
    @State var isSelected: Bool

    var body: some View {

The message contained within the payment object contains two different classifications of links as set forth by the context value.

Due to the authentication requirements associated with the auth context, it is necessary for the link to be opened in a non-ephemeral ASWebAuthenticationSession on iOS and a CustomTab on Android. By contrast, info context links can be opened in any WebView. To simply the requirements associated with properly handling these links, we have created the following method for you to call.

// Handle the presentation link
klarna.payment.presentation.handleLink(
    content: <PAYMENT_PRESENTATION_CONTENT>,
    url: <URL>)
{ (result: Result<KlarnaPaymentPresentationContent, KlarnaSDKError>) in
    switch result {
    case .success(let paymentPresentationContent):
        // Payment presentation link handling was successful. paymentPresentationContent contains
        // the latest payment presentation information.
        print("Payment presentation link handling succeeded.")
    case .failure(let error):
        // Payment presentation link handling failed. More information about the failure

The following table lists the parameters of KlarnaPaymentPresentation.handleLink() method.

The Mobile SDK provides a native UI view called KlarnaPaymentButton that follows Klarna's visual identity.

Choose the theme and shape of the payment button to best fit into your online store in a way that complements your brand and encourages user engagement. More details on the button styling can be found here.

To add the Klarna payment button to your app you can do something like below:

// Create an instance of KlarnaPaymentButtonConfiguration
let paymentButtonConfiguration = KlarnaPaymentButtonConfiguration(
    state: .default,
    intents: [.pay],
    shape: .pill,
    style: .outlined,
    theme: .light
)

// Create the payment button
let paymentButton = KlarnaPaymentButton(
    klarna: <KLARNA_INSTANCE>,

The table below list the properties of KlarnaPaymentButtonConfiguration:

When the payment button is tapped, you should initiate the payment request process. This is done by calling the KlarnaPayment.initiate() method. There are two options for initiating the payment request using the initiate() method:

• Client-side, sharing the details of customer's checkout session (paymentRequestData) when calling the initiate() method.
• Using the Klarna payment_request_id associated with the customer's checkout session that was generated server-side via your Acquiring Partner.

In client-side payment request initiation, you pass all the data needed to create and initiate a payment request to the Mobile SDK and the Mobile SDK takes care of creating and initiating the payment request. The following table lists the parameters of KlarnaPayment.initiate() method.

The table below lists all the properties of KlarnaPaymentRequestData.

// Create an instance of KlarnaPaymentRequestData
let paymentRequestData = KlarnaPaymentRequestData(
    amount: <AMOUNT>,
    currency: <CURRENCY>,
    paymentRequestReference: <PAYMENT_REQUEST_REFERENCE>,
    requestCustomerToken: <REQUETS_CUSTOMER_TOKEN>,
    shippingConfig: <SHIPPING_CONFIG>,
    collectCustomerProfile: <COLLECT_CUSTOMER_PROFILE>,
    supplementaryPurchaseData: <SUPPLEMENTARY_PURCHASE_DATA>
)

@objc func didTapPaymentButton() {

Call the Payment Request API to initiate a transaction. If customer verification is required, Klarna processes the request and creates a unique payment identifier for tracking. The payment request is then returned in the SUBMITTED state with the interaction details needed to complete the payment flow.

{{#lst:Klarna Docs - Payment Request - Content Source|payment request: create: request: one-time payment}}

Configure customer interaction parameters

When integrating Klarna’s purchase flow, it’s essential to define how the customer should be redirected after completing or exiting the Klarna experience. Depending on whether the flow runs in a web or mobile app environment, Klarna uses one or both return URLs to ensure a seamless handoff back to the Partner’s experience.

The parameters return_url and app_return_url specify where Klarna should redirect the customer once the interaction ends—whether they’ve approved or aborted the purchase. Correctly configuring these URLs ensures that customers always return to the appropriate context (webpage or mobile app) and can smoothly continue the checkout or post-purchase process.

Visual representations for Web flow and App handover flow:

Web handover	App handover

Provide supplementary purchase data

Supplementary Purchase Data refers to additional transaction details shared with Klarna that provide greater context about a purchase. These data points—such as line items, subscription details, or industry-specific attributes—help improve underwriting accuracy, fraud assessment, and the customer’s post-purchase experience. They may be required in certain industries and support multiple use cases, including better acceptance rates, enhanced fraud prevention, improved customer experiences within the Klarna app, and more effective risk monitoring.

When the request succeeds, Klarna returns a payment request in the SUBMITTED state.

The response includes:

1. 1.
   payment_request_id — a unique identifier for the payment request.
2. 2.
   payment_request_url — the URL used to initiate the customer’s purchase journey.

Sample payload

{
  "payment_request_id": "krn:payment:eu1:request:10be1d49-7beb-6b24-b9dd-8c14d0528503",
  "state": "SUBMITTED",
  "state_context": {
    "customer_interaction": {
      "method": "HANDOVER",
      "payment_request_id": "krn:payment:eu1:request:10be1d49-7beb-6b24-b9dd-8c14d0528503",
      "payment_request_url": "https://pay.klarna.com/l/ZjW2Xipgh0tjbrBGD7hzJM"
    }
  },
  "expires_at": "2025-02-26T17:25:34.534721775Z",
  "created_at": "2025-02-24T17:25:34.534721775Z",

Once you have created the payment request, take the payment_request_id from the server-side response and provide it in the Mobile SDK initiate method as highlighted in the code below.

@objc func didTapPaymentButton() {
    // Initiate the payment request
    klarna.payment.initiate(paymentRequestId: <PAYMENT_REQUEST_ID>) { (result: Result<KlarnaPaymentRequest, KlarnaSDKError>) in
        switch result {
        case .success(let paymentRequest):
            // Payment request initiation was successful. paymentRequest contains the
            // information about the payment request.
            print("Payment request initiation succeeded.")
        case .failure(let error):
            // Payment request initiation failed. More information about the failure
            // is available in the error object.
            print("Payment request initiation failed: \(error.localizedDescription)")

To get the information associated with a payment request, you can use the KlarnaPayment.fetch() method. The following code shows a sample implementation:

// Fetch the payment request
klarna.payment.fetch(paymentRequestId: <PAYMENT_REQUEST_ID>) { (result: Result<KlarnaPaymentRequest, KlarnaSDKError>) in
    switch result {
    case .success(let paymentRequest):
        // Payment request fetch was successful. paymentRequest contains the
        // information about the payment request.
        print("Payment request fetch succeeded.")
    case .failure(let error):
        // Payment request fetch failed. More information about the failure
        // is available in the error object.
        print("Payment request fetch failed: \(error.localizedDescription)")
    }

The following table lists the parameters of KlarnaPayment.fetch() method.

To cancel a payment request, you can use the KlarnaPayment.cancel() method. The following code shows a sample implementation:

// Cancel the payment request
klarna.payment.cancel(paymentRequestId: <PAYMENT_REQUEST_ID>) { (result: Result<KlarnaPaymentRequest, KlarnaSDKError>) in
    switch result {
    case .success(let paymentRequest):
        // Payment request cancelation was successful. paymentRequest contains the
        // information about the canceled payment request.
        print("Payment request cancelation succeeded.")
    case .failure(let error):
        // Payment request cancelation failed. More information about the failure
        // is available in the error object.
        print("Payment request cancelation failed: \(error.localizedDescription)")
    }

The following table lists the parameters of KlarnaPayment.cancel() method.