Adding the SDK as a Dependency

Adding the SDK via npm

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

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

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

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

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

Adding the SDK manually

iOS Manual Installation

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.

Android Manual Installation

  1. Open up android/app/src/main/java/[…]/MainApplication.java

    1. Add import com.klarna.inapp.sdk.KlarnaPaymentViewPackage; to the imports at the top of the file
    2. Add new KlarnaPaymentViewPackage() to the list returned by the getPackages() method
  2. Append the following lines to android/settings.gradle:

    1
    2
    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:

    1
    compile project(':react-native-klarna-inapp-sdk')
    

Warning regarding Android integration

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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
        maven {
            url 'https://x.klarnacdn.net/mobile-sdk/'
        }
        // Add the lines above ^^^
    }
}

Configure Your App

Return URL

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.

Import the SDK

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

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