Klarna Network Payment SDK React Native

React Native package for Klarna Network Payment. This library wraps KlarnaNetworkPayment and exposes payment request functionality directly on the Klarna instance via klarna.payment.

Requires @klarna/react-native-klarna-network-core to be installed and initialized first.

New Architecture only (TurboModule).

Requirements

• iOS 13 or later.
• Android 5.0 (API 21) or later.
• React Native 0.76.0 or later (New Architecture required).
• @klarna/react-native-klarna-network-core installed and initialized.

Getting started

Add Dependency

NPM

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

Yarn

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

Usage

Import this package once at app startup (e.g. in your root index.js) to activate the payment property on Klarna. After that, klarna.payment is available anywhere you have a Klarna instance.

import '@klarna/react-native-klarna-network-payment';

Initiate with a payment request ID

Use this when a payment request already exists on the server side.

import { Klarna } from '@klarna/react-native-klarna-network-core';

const klarna = await Klarna.initialize({
  clientId: '...',
  appReturnUrl: '...',
});

const paymentRequest = await klarna.payment.initiate('payment-request-id');
console.log(paymentRequest.state); // 'IN_PROGRESS'

Initiate with payment request data

Use this to create and initiate a payment request in one step.

import type { KlarnaPaymentRequestData } from '@klarna/react-native-klarna-network-payment';

const data: KlarnaPaymentRequestData = {
  amount: 10000, // in minor currency units (e.g. cents)
  currency: 'SEK',
  paymentOptionId: 'option-id', // optional
  paymentRequestReference: 'ref-123', // optional
};

const paymentRequest = await klarna.payment.initiate(data);

Fetch a payment request

const paymentRequest = await klarna.payment.fetch('payment-request-id');

Cancel a payment request

const paymentRequest = await klarna.payment.cancel('payment-request-id');

API

klarna.payment

Accessible on any initialized Klarna instance after importing this package.

| Method | Signature | Description | | ---------- | ----------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- | | initiate | (paymentRequestIdOrData: string \| KlarnaPaymentRequestData) => Promise<KlarnaPaymentRequest> | Initiates a payment request by ID or creates and initiates one from data. | | fetch | (paymentRequestId: string) => Promise<KlarnaPaymentRequest> | Fetches the current state of a payment request. | | cancel | (paymentRequestId: string) => Promise<KlarnaPaymentRequest> | Cancels a payment request. |

KlarnaPaymentRequest

| Field | Type | Description | | ------------------------- | ------------------------------------------ | ---------------------------------------------- | | paymentRequestId | string | Unique identifier for the payment request. | | state | KlarnaPaymentRequestState | Current state of the payment request. | | previousState | KlarnaPaymentRequestState \| null | Previous state, if any. | | stateContext | KlarnaPaymentRequestStateContext \| null | Additional context for the current state. | | stateReason | KlarnaPaymentRequestStateReason \| null | Reason for the current state, if any. | | paymentRequestReference | string \| null | Partner-supplied reference for reconciliation. |

KlarnaPaymentRequestState

'SUBMITTED' | 'IN_PROGRESS' | 'COMPLETED' | 'EXPIRED' | 'CANCELED' | 'DECLINED'

KlarnaPaymentRequestStateReason

'PARTNER_CANCELED' | 'PURCHASE_FLOW_ABORTED' | 'TECHNICAL_ERROR' | 'PAYMENT_DECLINED' | 'PAYMENT_REQUEST_SUBMITTED'

KlarnaPaymentRequestData

| Field | Type | Required | Description | | --------------------------- | ------------------------------------ | -------- | ----------------------------------------------------------- | | amount | number | Yes | Total amount in minor currency units (e.g. cents). | | currency | string | Yes | ISO 4217 currency code (e.g. "SEK"). | | paymentOptionId | string | No | Pre-select a specific payment option in the flow. | | paymentRequestReference | string | No | Partner reference for webhook correlation. | | requestCustomerToken | KlarnaRequestCustomerToken | No | Request a customer token to be returned on completion. | | shippingConfig | KlarnaShippingConfig | No | Configure shipping address collection. | | collectCustomerProfile | KlarnaCollectCustomerProfileType[] | No | Customer profile fields to collect during the flow. | | supplementaryPurchaseData | KlarnaSupplementaryPurchaseData | No | Line items, shipping, subscriptions, and on-demand details. |

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.