@klarna/react-native-klarna-network-messaging

React Native bindings for Klarna messaging placements: a Fabric-native KlarnaMessagingPlacementView that renders on-device messaging (for example credit promotion placements) with amount, currency, and placement type, an optional theme, automatic height from native resize events, and error callbacks.

This package builds on @klarna/react-native-klarna-network-core: initialize Klarna from core before showing placements; this module re-exports KlarnaTheme for convenience.

Requirements

• iOS 13 or later.
• Android 5.0 (API 21) or later.
• React Native 0.76.0 or later.
• React Native New Architecture enabled.

NPM

npm install @klarna/react-native-klarna-network-messaging --save

Yarn

yarn add @klarna/react-native-klarna-network-messaging

You also need @klarna/react-native-klarna-network-core (peer dependency) for initialization and shared types.

Usage

Initialize a Klarna instance from core (see the core package README) and pass it to the placement view along with its configuration:

import {
  KlarnaMessagingPlacementView,
  KlarnaMessagingPlacementType,
  KlarnaTheme,
} from '@klarna/react-native-klarna-network-messaging';
import type { Klarna } from '@klarna/react-native-klarna-network-core';

export function CheckoutMessaging({ sdk }: { sdk: Klarna }) {
  return (
    <KlarnaMessagingPlacementView
      instance={sdk}
      configuration={{
        type: KlarnaMessagingPlacementType.CreditPromotionAutoSize,
        amount: 19900,
        currency: 'EUR',
        theme: KlarnaTheme.Automatic,
      }}
      onError={(error) => {
        console.warn(error.name, error.message);
      }}
    />
  );
}

Props (high level)

| Prop | Notes | | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | instance | Required. A Klarna instance obtained from @klarna/react-native-klarna-network-core after initialization. | | configuration | Required. { type, amount, currency, theme? }. type is a KlarnaMessagingPlacementType; theme is optional — when omitted, the native SDK chooses the default. | | onError | Optional. Receives KlarnaMessagingError (name, message) when native messaging fails. | | style | Optional. Passed through; height is driven by native content after load. |

Support

If you are having any issues using the SDK in your project or if you think that something is wrong with the SDK itself, please follow our support guide.

Contribution

If you want to contribute to this project please follow our contribution guide.

License

This project is licensed under Apache License, Version 2.0.