Klarna Docs - React Native: Getting Started

React Native: Getting Started

If you want to add the SDK via npm use the following command to install and save it.

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

If you want to add the SDK automatically to your React Native project use the following command.

react-native link react-native-klarna-inapp-sdk

This will configure your iOS project with Cocoapods and Android project with Gradle.

We strongly encourage you to use CocoaPods to manage the library and follow the instructions below to add the SDK as a dependency to the React Native app. If you add the SDK to CocoaPods elsewhere in the application it may cause the SDK to not be visible to the library.

  1. After running npm install react-native-klarna-inapp-sdk --save go to [your project]/ios folder.
  2. Make sure you have a Podfile ready, if not use pod init. Check that platform :ios, ‘10.0’.
  3. Go to [your project]/node_modules/react-native-klarna-inapp-sdk/react-native-klarna-inapp-sdk.podspec and make sure that s.dependency ‘KlarnaMobileSDK’, ’~> 2.0.11 and s.platform = :ios, “10.0”.
  4. Add react-native-klarna-inapp-sdk as a dependency to your podfile ([your project]/ios folder) pod ‘react-native-klarna-inapp-sdk’, :podspec => ‘../node_modules/react-native-klarna-inapp-sdk/react-native-klarna-inapp-sdk.podspec’.
  5. Go back to [your project]/ios and run pod install.
  1. Open up android/app/src/main/java/[…]/MainApplication.java
  2. Append the following lines to android/settings.gradle:
include ':react-native-klarna-inapp-sdk'
project(':react-native-klarna-inapp-sdk').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-klarna-inapp-sdk/android')

3. Insert the following lines inside the dependencies block in android/app/build.gradle:

compile project(':react-native-klarna-inapp-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 need to add a reference to the repository in your own app’s build.gradle which can be done by adding the lines between the comments below:

allprojects {
    repositories {
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        // Add the lines below vvv

Both the hybrid and native integrations might, at some point, open third-party applications. To automatically return the user, these third-party applications need to know how to build a return intent or URL.

To do that, you’ll need to provide the SDK with what we call the “Return URL” parameter. If you haven’t done so already, follow this documentation for Android and this documentation for iOS.

In order to use the SDK from your React Native application import it by:

import KlarnaPaymentView from 'react-native-klarna-inapp-sdk';