Integrate On-site messaging with Klarna mobile SDK

Boost transparency and conversions by integrating Klarna’s Mobile SDK to display payment messaging and pre-qualification, letting customers check financing eligibility before they buy.

6 min read


Messaging on the product detail page	Messaging in the checkout

Prerequisites

Before integrating On-site messaging, the following conditions must be met:

1.
A Klarna payment solution is in place.
2.
Access to the Klarna Partner Portal is available.
3.
Inside the Klarna Partner Portal:
1. 3.1.
  A client identifier has been generated with the domain URL allowlisted.
2. 3.2.
  An API key has been generated.

Integration overview

This guide covers both iOS (Swift) and Android (Kotlin) integrations.

Adding On-site messaging to a native app is a straightforward process. At a high level, achieving this tailored experience requires the following 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 the screen.

sequenceDiagram participant C as Customer participant P as Partner participant K as Klarna P->>K: Initialize Klarna SDK P->>K: Get OSM placement K->>P: Return 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->>P: Send approval event & updated messaging K->>C: Update placement to show approval Note over P,K: Prequalification state preserved via Klarna Network Session Token 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 KlarnaNetworkMessaging in the Package Product column.

Cocoapods

When using Cocoapods, the SDK can be added by including the dependency in the Podfile:

SWIFT

1 2

 pod "KlarnaNetworkMessaging"

Followed by performing:

SWIFT

1 2

 pod install

The KlarnaNetworkMessaging module can then be imported in the 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 the application:

KOTLIN

1 2 3 4

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

Initialize the Klarna SDK

The first step to add On-site messaging to an application is to initialize the Klarna SDK and provide the required configuration:

SWIFT

1 2 3 4 5 6 7 8 9 10

// Create an instance of KlarnaConfiguration
let configuration = KlarnaConfiguration(
    clientId: clientId,
    locale: locale,
    klarnaNetworkSessionToken: klarnaNetworkSessionToken
)
// Initialize Klarna
let klarnaResult = Klarna.initialize(configuration: configuration)
do {
    self?.klarnaInstance = try klarnaResult.get()

Parameters

Param	Type	Presence	Description
clientId	String	Required	The client ID of the partner account that is integrating the Mobile SDK.
locale	String	Optional	Set the default locale (IETF BCP 47) for the SDK. System default locale will be 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 retrievable server-side via the Network Session API.

Create the Native View

The On-site messaging native view is called KlarnaMessagingPlacementView. This view can be created programmatically and added to the layout with the 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

Parameters	Type	Presence	Description	- style="height:25px;"	`theme`	KlarnaTheme	Optional	Enumerated theme value to specify how to stylize the view on light, dark or automatic (system) configurations.
`amount`	Long	Required	Amount for the placement. Set in micro units ($120.00 = 12000), used for amount based credit promotions.
`currency`	String	Required	3-letter ISO 4217 currency code

CreditPromotionAutoSize

Parameters	Type	Presence	Description	- style="height:25px;"	`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. Set in micro units ($120.00 = 12000), 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...