On-site Messaging for React Native

Messaging on the homepage	Messaging on the product detail page	Messaging in the checkout

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

1. Ensure that you have Klarna enabled.
2. Confirm you have access to the Klarna Portal.
3. Inside Klarna Portal:
   1. Confirm that you have generated a client identifier with your domain URL allowlisted.
   2. Confirm that you have generated an API key.
4. Your project meets the minimum platform requirements:
   1. React Native ≥ 0.57
   2. iOS 10 or later
   3. Android 4.4 (API 19) or later
   4. Node.js ≥ 16

​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.
• Install the react-native-klarna-inapp-sdk npm package.
• Complete platform-specific setup (Android Maven repo, iOS CocoaPods).
• Add the KlarnaOSMView component to your screen and provide the required props.

NPM

npm install react-native-klarna-inapp-sdk --save

Yarn

yarn add react-native-klarna-inapp-sdk

The Android integration depends on the native Klarna Mobile SDK hosted on Klarna's Maven repository. Add the repository to your app's android/build.gradle:

allprojects {
    repositories {
        // ... existing repositories ...

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

Install the CocoaPods dependencies:

cd ios && pod install

No additional configuration is required. The podspec in react-native-klarna-inapp-sdk automatically pulls the correct native iOS SDK.

Import KlarnaOSMView from the SDK and add it to your screen. The component handles initialization, rendering, and auto-resizing internally.

import React from 'react';
import { View, StyleSheet } from 'react-native';
import {
  KlarnaOSMView,
  KlarnaEnvironment,
  KlarnaRegion,
  KlarnaTheme,
} from 'react-native-klarna-inapp-sdk';

function ProductScreen() {
  return (
    <View style={styles.container}>

Provide an onError callback to handle errors from the OSM view. The callback receives a KlarnaMobileSDKError object:

interface KlarnaMobileSDKError {
  readonly isFatal: boolean;   // Whether the error is unrecoverable
  readonly message: string;    // Human-readable error description
  readonly name: string;       // Error type identifier
}

Sample code

<KlarnaOSMView
  clientId="your-client-id"
  placementKey="credit-promotion-badge"
  locale="en-US"
  purchaseAmount="12000"
  environment={KlarnaEnvironment.Production}
  region={KlarnaRegion.NA}
  onError={(error) => {
    if (error.isFatal) {
      // Fatal error — OSM cannot render
      // Consider hiding the placement or showing a fallback
      console.error(`[OSM Fatal] ${error.name}: ${error.message}`);

• Your clientId is valid and the domain is allowlisted in the Klarna Portal.
• The purchaseAmount is a numeric string in minor units (e.g. "12000" for $120.00).
• The environment is set to Playground for testing and Production for live.
• The region matches the market of the customer (EU, NA, or OC).
• The locale matches the region and language of the customer.
• On Android: the Klarna Maven repository is added to build.gradle.
• On iOS: pod install has been run after adding the dependency.
• The onError callback is wired up and errors are logged.
• The placement renders correctly on both iOS and Android.
• The placement auto-sizes and doesn't overflow or clip content.
• Dark mode: test with KlarnaTheme.Automatic to verify correct appearance.
• Tapping the placement opens the pre-qualification flow.

Use KlarnaEnvironment.Playground during development and testing. The playground environment returns simulated messaging content without requiring a live merchant account.

<KlarnaOSMView
  clientId="your-client-id"
  placementKey="credit-promotion-badge"
  locale="en-US"
  purchaseAmount="12000"
  environment={KlarnaEnvironment.Playground}
  region={KlarnaRegion.NA}
/>