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.

BASH
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.

BASH
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
    undefinedundefined
  2. Append the following lines to android/settings.gradle:
BASH
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:

BASH
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:

JAVASCRIPT
allprojects {
    repositories {
        mavenLocal()
        google()
        jcenter()
        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:

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