Integrate On-site messaging with Klarna mobile SDK

Boost transparency and conversions by integrating Klarna's Mobile SDK to display payment messaging.

8 min read


Messaging on the product detail page	Messaging in the checkout

Prerequisites

Before you integrate On-site messaging, please check that you meet the following conditions:

1.
Ensure that you have Klarna enabled with Cybersource.
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 with your domain URL allowlisted.
2. 3.2.
  Confirm that you have generated an API key.

Integration overview

This guide covers iOS (Swift and SwiftUI) and Android (Kotlin and Jetpack Compose) integrations.

Adding On-Site Messaging to your native app is a straightforward process. At a high level, to achieve this tailored experience for your users, you will need to follow these steps:

Request access to On-Site Messaging.
Add the Mobile SDK Messaging library.
Initialize the Klarna SDK.
Create the native messaging view and add it to your screen.

sequenceDiagram participant C as Customer participant P as Partner participant K as Klarna participant AP as Cybersource P->>K: Initialize Klarna SDK P->>K: Create OSM placement K->>P: Render messaging/prequalification content P->>C: Display messaging/prequalification content alt Prequalification flow - Approved C->>K: Clicks to check purchase power K->>C: Start prequalification journey C->>K: Completes prequalification K->>C: Update placement to show approval alt Partner builds checkout form K->>P: Prequalification state preserved else Checkout form via Cybersource P->>K: Fetch Klarna Network Session Token P->>AP: Share Klarna Network Session Token end end

Add Mobile SDK Messaging Library

iOS

Swift Package Manager

In Xcode, navigate to File → Swift Packages → Add Package Dependency and enter the repository URL: https://github.com/klarna/klarna-mobile-sdk-spm

In Version, select Up to Next Major and take the default option. Then choose the product you need in the Package Product column: KlarnaNetworkMessaging for UIKit, or KlarnaNetworkMessagingSwiftUI for SwiftUI.

Info

KlarnaNetworkMessagingSwiftUI provides the complete SwiftUI interface. Add the SwiftUI product instead of the UIKit product; it includes the underlying messaging module. In code, import KlarnaNetworkCore for the Klarna instance, KlarnaNetworkMessaging for configuration types, and KlarnaNetworkMessagingSwiftUI for the wrapper.

CocoaPods

If you’re using CocoaPods, add the dependency for your UI framework to your Podfile:

RUBY

1 2 3 4 5

# UIKit
pod "KlarnaMobileSDK/KlarnaNetworkMessaging"

# SwiftUI
pod "KlarnaMobileSDK/KlarnaNetworkMessagingSwiftUI"

Followed by performing:

BASH

1 2

pod install

You should then be able to import the KlarnaNetworkMessaging module, or KlarnaNetworkMessagingSwiftUI for SwiftUI apps, in your workspace.

Android

First, add the Klarna Mobile SDK Maven repository:

KOTLIN

1 2 3 4

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

Next, add the Klarna Mobile SDK Messaging Library as a dependency to your application:

KOTLIN

1 2 3 4

dependencies {
    implementation("com.klarna.mobile.sdk:klarna-network-messaging:2.x.x")
}

If your app is built with Jetpack Compose, add the Compose wrapper library instead, which provides a KlarnaMessagingPlacement composable:

KOTLIN

1 2 3 4

dependencies {
    implementation("com.klarna.mobile.sdk:klarna-network-messaging-compose:2.x.x")
}

Initialize the Klarna SDK

The first step to add On-Site Messaging to your application is to initialize the Klarna SDK and provide the required configuration. Initialization is the same whether you use UIKit or SwiftUI on iOS, and the View system or Jetpack Compose on Android.

SWIFT

1 2 3 4 5 6 7 8 9 10

// Create an instance of KlarnaConfiguration
let configuration = KlarnaConfiguration(
    clientId: clientId,
    locale: locale,
    appReturnUrl: appReturnUrl,
    klarnaNetworkSessionToken: klarnaNetworkSessionToken
)
// Initialize Klarna
let klarnaResult = Klarna.initialize(configuration: configuration)
do {

On iOS, register the scheme in appReturnUrl as a URL type in your app, then pass incoming app URLs to the SDK from your app or scene delegate:

SWIFT

1 2 3 4 5 6 7

func application(
    _ app: UIApplication,
    open url: URL,
    options: [UIApplication.OpenURLOptionsKey: Any] = [:]
) -> Bool {
    Klarna.handleReturnUrl(url: url)
}

Parameters

Param	Type	Presence	Description
clientId	String	Required	The client ID of the partner account that is integrating the Mobile SDK. If the integration is done by a PSP/DP then this must be set to the distribution partners own client ID.
appReturnUrl	String	Required (iOS)	Registered app URL used to return customers to your iOS app after an external handover.
locale	String	Optional	Locale identifier for the SDK (for example, `en-US`). The system default locale is used if not set.
klarnaNetworkSessionToken	String	Optional	The klarna network session token allows the SDK to be initialized with an existing session. The token is only retrievable server-side via the Network Session API.

Create the Native View

The On-Site Messaging native view is called KlarnaMessagingPlacementView. You can create this view programmatically and add it to your layout with your desired layout options.

SWIFT

1 2 3 4 5 6 7 8 9 10

// Create an instance of KlarnaMessagingPlacementConfiguration
// Depending on your requirements, you can create `CreditPromotionBadge` or
// `CreditPromotionAutoSize` configuration
let placementConfiguration = KlarnaMessagingPlacementConfiguration.creditPromotionBadge(
    theme: .automatic,
    amount: 10000,
    currency: "USD"
)
// Create an instance of the view
let placementView = KlarnaMessagingPlacementView(

Parameters

CreditPromotionBadge

Parameter	Type	Presence	Description
`theme`	KlarnaTheme	Optional	Enumerated theme value to specify how to stylize the view on light, dark or automatic (system) configurations. Default value is `light` / `LIGHT`.
`amount`	Long	Required	Amount for the placement, in minor units / cents ($100.00 = 10000), used for amount based credit promotions.
`currency`	String	Required	3-letter ISO 4217 currency code.

CreditPromotionAutoSize

Parameter	Type	Presence	Description
`theme`	KlarnaTheme	Optional	Enumerated theme value to specify how to stylize the view on light, dark or automatic (system) configurations. Default value is `light` / `LIGHT`.
`amount`	Long	Required	Amount for the placement, in minor units / cents ($100.00 = 10000), used for amount based credit promotions.
`currency`	String	Required	3-letter ISO 4217 currency code.

KlarnaTheme

Swift Value	Kotlin Value	Descriptions
`light`	`LIGHT`	Light style for placement view.
`dark`	`DARK`	Dark style for placement view.
`automatic`	`AUTOMATIC`	Automatic theme that will use the system’s user interface style.

Jump to section...