klarna / react-native-klarna-inapp-sdk

Klarna's React Native wrapper for the In-App SDK

Klarna Mobile SDK React Native

This library wraps Klarna Mobile SDK and exposes its functionality as React Native components. It currently supports Klarna Payments via a Payment View component.

This repository also includes a test application that you can use to see how it works.

SDK for Other Platforms

• Android
• iOS
• Flutter

Requirements

• iOS 10 or later.
• Android 4.4 or later.

Documentations

• Overview
• Android
• iOS
• React Native

Getting started

Add Dependency

NPM

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

Yarn

yarn add react-native-klarna-inapp-sdk

Warning regarding Android integration

Both the iOS and Android integrations depend on the native SDK.

We've experienced issues with React Native 59 and above where 3rd party Gradle repositories won't be recognized in the Android project's build.gradle. To address this, you'll need to add a reference to the repository in your own app's build.gradle.

You can do it by adding the lines between the comments below:

allprojects {
    repositories {
        ...
        // Add the lines below
        maven {
            url 'https://x.klarnacdn.net/mobile-sdk/'
        }
    }
}

---

Usage

You can import the KlarnaPaymentView from the library. You'll then be able to add it as a component to your app. This component exposes callbacks as props and methods you can call via the component's ref.

The view will self-size height-wise and grow it fill it containing view's width.

Props

It has the following props:

Name	Type	Description
category	String	The payment method category you want to render in your view.
returnUrl	String	An app-defined URL scheme the component uses to return customers to your app.
onInitialized	() => {}	The initialize call completed.
onLoaded	() => {}	The load call completed.
onLoadedPaymentReview	() => {}	The load payment review call completed.
onAuthorized	(approved, authToken, finalizeRequired) => {}	The authorize call completed.
onReauthorized	(approved, authToken) => {}	The reauthorize call completed.
onFinalized	(approved, authToken) => {}	The finalize call completed.
onError	(error) => {}	An error occurred.

---

Return URL

You can read more about how the return URL works and how to add it tou your iOS application here and for your Android application here.

---

Prop callback parameters

---

approved: boolean

Determines whether the previous operation was successful and yielded an authorization token.

Available on:

• onAuthorized
• onReauthorized
• onFinalized

---

authToken: string | null

If authorize(), reauthorize() or finalize() succeeded, they will return a token you can submit to your backend.

Available on:

• onAuthorized
• onReauthorized
• onFinalized

---

finalizeRequired: boolean | null

If authorize() requires that you additionally call finalize(), .

Available on:

• onAuthorized

---

error: KlarnaPaymentsSDKError

If a method failed, onError() will let you know via an error object. Contains name, message, action, isFatal, sessionId properties.

Available on:

• onError

---

---

View methods

Each payment view exposes a set of methods via a view's ref. You can see in the test app or in the below example how these can be called. The methods are the following:

---

initialize()

Initializes the view with a session token. You have to have added the view to your application and supplied a payment method category.

Parameters

Name	Type	Description
clientToken	string	The client token you get from Klarna Payments API.

---

load()

Loads the view. This will render content in the view.

Parameters

Name	Type	Description
sessionData	string | undefined	A JSON object with updated session data serialized into a string.

---

loadPaymentReview()

Renders a description of the payment terms your customer has agreed to.

Once a session is authorized, you can then either render a payment review in the existing payment view or initialize() a new payment view with the same session token and call this method.

Note:

This only works with specific payment methods and countries.

---

authorize()

Authorizes the payment session.

Parameters

Name	Type	Description
autoFinalize	boolean | undefined	A flag used to turn on/off auto-finalization for direct bank transfer.
sessionData	string | undefined	A JSON object with updated session data serialized into a string.

---

reauthorize()

If the details of the session (e.g. cart contents, customer data) have changed, call this to update the session and get a new authorization token.

Parameters

Name	Type	Description
sessionData	string | undefined	A JSON object with updated session data serialized into a string.

---

finalize()

If a specific payment method needs you to trigger a second authorization, call finalize when you're ready.

Parameters

Name	Type	Description
sessionData	String | undefined	A JSON object with updated session data serialized into a string.

---

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.