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
Link the SDK automatically
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.
- After running
npm install react-native-klarna-inapp-sdk --save
go to[your project]/ios
folder. - Make sure you have a Podfile ready, if not use pod init. Check that platform
:ios, ‘10.0’
. - Go to
[your project]/node_modules/react-native-klarna-inapp-sdk/react-native-klarna-inapp-sdk.podspec
and make sure thats.dependency ‘KlarnaMobileSDK’, ’~> 2.0.11
ands.platform = :ios, “10.0”
. - 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’
. - Go back to
[your project]/ios
and runpod install
.
Android Manual Installation
Open up android/app/src/main/java/[…]/MainApplication.java
- Add
import com.klarna.inapp.sdk.KlarnaPaymentViewPackage;
to the imports at the top of the file - Add
new KlarnaPaymentViewPackage()
to the list returned by thegetPackages()
method
- Add
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')
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 ^^^ } }
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';