react-native-klarna
Getting started
$ yarn add react-native-klarna
or
$ npm install react-native-klarna --save
Mostly automatic installation (pre RN 0.60)
$ react-native link react-native-klarna
For RN >= 0.60 please follow After either route
step for iOS and for Android within repositories block of the dependencies block add:
gradle maven { url 'https://x.klarnacdn.net/mobile-sdk/'}
Manual installation
iOS
CocoaPods route
- In Podfile add
pod 'RNKlarna', :path => '../node_modules/react-native-klarna'
- Run
pod install
.
Manual route (only available for version < 0.2.1)
- In XCode, in the project navigator, right click
Libraries
➜Add Files to [your project's name]
- Go to
node_modules
➜react-native-klarna
and addRNKlarna.xcodeproj
- In XCode, in the project navigator, select your project. Add
libRNKlarna.a
to your project'sBuild Phases
➜Link Binary With Libraries
- Drag and drop
KlarnaCheckoutSDK.framework
fromnode_modules/react-native-klarna/ios/Frameworks
, (deselct copy resources) make sure that it appears in project'sBuild Phases
➜Link Binary With Libraries
- Check that Framework and Header search paths in Build Settings contain
$(SRCROOT)/../node_modules/react-native-klarna/ios/Frameworks
After either route
Add the following key with your bundle name to your Info.plist:
<key>ReturnURLKlarna</key>
<string>YOUR_BUNDLE_NAME</string>
Android
- Open
android/app/src/main/java/[...]/MainActivity.java
- Add
import com.rnklarna.RNKlarnaPackage;
to the imports at the top of the file - Add
new RNKlarnaPackage()
to the list returned by thegetPackages()
method
-
Append the following lines to
android/settings.gradle
:include ':react-native-klarna'project(':react-native-klarna').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-klarna/android') -
Insert the following lines inside the android block in
android/app/build.gradle
:compileOptions {sourceCompatibility JavaVersion.VERSION_1_8targetCompatibility JavaVersion.VERSION_1_8}add the following line inside the dependencies block:
implementation project(':react-native-klarna')and within repositories block of the dependencies block add:
maven { url 'https://x.klarnacdn.net/mobile-sdk/'}In summary, the following changes should be made:
android {...compileOptions {sourceCompatibility JavaVersion.VERSION_1_8targetCompatibility JavaVersion.VERSION_1_8}...}dependencies {...implementation project(':react-native-klarna')...repositories {...maven { url 'https://x.klarnacdn.net/mobile-sdk/'}...}} -
Register an
intent-filter
: -
Make sure that activity is using
launchMode
singleTask
orsingleTop
:
Usage Example
Typical usage example is shown below, there is also an example app in example/basic
; ;;... state snippet: '' // <- or initial snippet from your backend loadError: false onComplete = async { const signalType = event; if signalType === 'complete' const orderId = thisprops; /* 1. Perform call to the backend 2. Retrieve the order status and confirmation snippet. 3. Update the Klarna component with the confirmation snippet once the order status is final 4*. If an error occurs, set snippet to 'error' to dismiss loading screen */ try const result = await ; const newSnippet orderStatus loadError = result; if orderStatus this; catch error this; }; { let snippet = thisstate; const loadError = thisstate; if loadError snippet = 'error'; return <View> <RNKlarna snippet=snippet onComplete=thisonComplete /> ... </View> ; }