react-native-klarna-inapp-sdk 2.1.13 → 2.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +100 -270
- package/android/build.gradle +84 -106
- package/android/gradle.properties +7 -0
- package/android/src/main/AndroidManifest.xml +2 -1
- package/android/src/main/AndroidManifestNew.xml +4 -0
- package/android/src/main/java/com/klarna/mobile/sdk/reactnative/KlarnaMobileSDKPackage.java +33 -0
- package/android/src/main/java/com/klarna/mobile/sdk/reactnative/common/ArgumentsUtil.java +62 -0
- package/android/src/main/java/com/klarna/mobile/sdk/reactnative/common/WebViewResizeObserver.java +100 -0
- package/android/src/main/java/com/klarna/{inapp/sdk → mobile/sdk/reactnative/payments}/KlarnaPaymentEvent.java +9 -19
- package/android/src/main/java/com/klarna/mobile/sdk/reactnative/payments/KlarnaPaymentViewManager.java +346 -0
- package/android/src/main/java/com/klarna/mobile/sdk/reactnative/payments/PaymentViewWrapper.java +78 -0
- package/android/src/main/java/com/klarna/mobile/sdk/reactnative/standalonewebview/KlarnaStandaloneWebViewEvent.java +67 -0
- package/android/src/main/java/com/klarna/mobile/sdk/reactnative/standalonewebview/KlarnaStandaloneWebViewEventSender.java +139 -0
- package/android/src/main/java/com/klarna/mobile/sdk/reactnative/standalonewebview/KlarnaStandaloneWebViewManager.java +205 -0
- package/android/src/newarch/java/com/klarna/mobile/sdk/reactnative/spec/RNKlarnaPaymentViewSpec.java +32 -0
- package/android/src/newarch/java/com/klarna/mobile/sdk/reactnative/spec/RNKlarnaStandaloneWebViewSpec.java +33 -0
- package/android/src/oldarch/java/com/klarna/mobile/sdk/reactnative/spec/RNKlarnaPaymentViewSpec.java +25 -0
- package/android/src/oldarch/java/com/klarna/mobile/sdk/reactnative/spec/RNKlarnaStandaloneWebViewSpec.java +19 -0
- package/android/src/test/java/com/klarna/{inapp/sdk/KlarnaPaymentViewPackageTest.java → mobile/sdk/reactnative/KlarnaMobileSDKPackageTest.java} +9 -4
- package/android/src/test/java/com/klarna/{inapp/sdk → mobile/sdk/reactnative/payments}/KlarnaPaymentEventTest.java +17 -20
- package/android/src/test/java/com/klarna/{inapp/sdk → mobile/sdk/reactnative/payments}/KlarnaPaymentViewManagerTest.java +72 -29
- package/ios/{KlarnaInAppSDK.xcodeproj → RNKlarnaMobileSDK.xcodeproj}/project.pbxproj +147 -87
- package/ios/{KlarnaInAppSDK.xcodeproj/xcshareddata/xcschemes/KlarnaInAppSDK.xcscheme → RNKlarnaMobileSDK.xcodeproj/xcshareddata/xcschemes/RNKlarnaMobileSDK.xcscheme} +9 -9
- package/ios/{KlarnaInAppSDK.xcodeproj/xcshareddata/xcschemes/KlarnaInAppSDKTests.xcscheme → RNKlarnaMobileSDK.xcodeproj/xcshareddata/xcschemes/RNKlarnaMobileSDKTests.xcscheme} +3 -3
- package/ios/Sources/KlarnaPaymentViewManager.h +5 -0
- package/ios/Sources/{KlarnaPaymentView.m → KlarnaPaymentViewManager.mm} +10 -15
- package/ios/Sources/KlarnaStandaloneWebViewManager.h +5 -0
- package/ios/Sources/KlarnaStandaloneWebViewManager.mm +77 -0
- package/ios/Sources/view/newarch/KlarnaStandaloneWebViewWrapper.h +29 -0
- package/ios/Sources/view/newarch/KlarnaStandaloneWebViewWrapper.mm +265 -0
- package/ios/Sources/view/newarch/PaymentViewWrapper.h +33 -0
- package/ios/Sources/view/newarch/PaymentViewWrapper.mm +240 -0
- package/ios/Sources/view/oldarch/KlarnaStandaloneWebViewWrapper.h +42 -0
- package/ios/Sources/view/oldarch/KlarnaStandaloneWebViewWrapper.mm +195 -0
- package/ios/Sources/view/{PaymentViewWrapper.h → oldarch/PaymentViewWrapper.h} +9 -7
- package/ios/Sources/view/{PaymentViewWrapper.m → oldarch/PaymentViewWrapper.mm} +40 -27
- package/ios/Tests/PaymentViewWrapperTests.m +8 -10
- package/lib/commonjs/KlarnaPaymentView.js +192 -0
- package/lib/commonjs/KlarnaPaymentView.js.map +1 -0
- package/lib/commonjs/KlarnaStandaloneWebView.js +81 -0
- package/lib/commonjs/KlarnaStandaloneWebView.js.map +1 -0
- package/lib/commonjs/index.js +28 -0
- package/lib/commonjs/index.js.map +1 -0
- package/lib/commonjs/specs/KlarnaPaymentViewNativeComponent.js +16 -0
- package/lib/commonjs/specs/KlarnaPaymentViewNativeComponent.js.map +1 -0
- package/lib/commonjs/specs/KlarnaStandaloneWebViewNativeComponent.js +16 -0
- package/lib/commonjs/specs/KlarnaStandaloneWebViewNativeComponent.js.map +1 -0
- package/lib/module/KlarnaPaymentView.js +182 -0
- package/lib/module/KlarnaPaymentView.js.map +1 -0
- package/lib/module/KlarnaStandaloneWebView.js +71 -0
- package/lib/module/KlarnaStandaloneWebView.js.map +1 -0
- package/lib/module/index.js +3 -0
- package/lib/module/index.js.map +1 -0
- package/lib/module/specs/KlarnaPaymentViewNativeComponent.js +7 -0
- package/lib/module/specs/KlarnaPaymentViewNativeComponent.js.map +1 -0
- package/lib/module/specs/KlarnaStandaloneWebViewNativeComponent.js +7 -0
- package/lib/module/specs/KlarnaStandaloneWebViewNativeComponent.js.map +1 -0
- package/lib/typescript/KlarnaPaymentView.d.ts +51 -0
- package/lib/typescript/KlarnaPaymentView.d.ts.map +1 -0
- package/lib/typescript/KlarnaStandaloneWebView.d.ts +46 -0
- package/lib/typescript/KlarnaStandaloneWebView.d.ts.map +1 -0
- package/lib/typescript/index.d.ts +3 -0
- package/lib/typescript/index.d.ts.map +1 -0
- package/lib/typescript/specs/KlarnaPaymentViewNativeComponent.d.ts +49 -0
- package/lib/typescript/specs/KlarnaPaymentViewNativeComponent.d.ts.map +1 -0
- package/lib/typescript/specs/KlarnaStandaloneWebViewNativeComponent.d.ts +65 -0
- package/lib/typescript/specs/KlarnaStandaloneWebViewNativeComponent.d.ts.map +1 -0
- package/package.json +86 -14
- package/react-native-klarna-inapp-sdk.podspec +32 -13
- package/src/KlarnaPaymentView.tsx +323 -0
- package/src/KlarnaStandaloneWebView.tsx +217 -0
- package/src/index.tsx +2 -0
- package/src/specs/KlarnaPaymentViewNativeComponent.ts +99 -0
- package/src/specs/KlarnaStandaloneWebViewNativeComponent.ts +96 -0
- package/.gitattributes +0 -3
- package/.watchmanconfig +0 -1
- package/.yarnrc +0 -5
- package/CHANGELOG.md +0 -116
- package/android/README.md +0 -14
- package/android/gradle/wrapper/gradle-wrapper.jar +0 -0
- package/android/gradle/wrapper/gradle-wrapper.properties +0 -6
- package/android/gradlew +0 -172
- package/android/gradlew.bat +0 -84
- package/android/src/main/java/com/klarna/inapp/sdk/HeightListener.java +0 -159
- package/android/src/main/java/com/klarna/inapp/sdk/KlarnaPaymentViewManager.java +0 -282
- package/android/src/main/java/com/klarna/inapp/sdk/KlarnaPaymentViewPackage.java +0 -25
- package/android/src/main/java/com/klarna/inapp/sdk/Mappable.java +0 -10
- package/android/src/main/java/com/klarna/inapp/sdk/MappableKlarnaPaymentsSDKError.java +0 -31
- package/android/src/main/java/com/klarna/inapp/sdk/PaymentViewWrapper.java +0 -131
- package/android/src/test/java/com/klarna/inapp/sdk/MappableKlarnaPaymentsSDKErrorTest.java +0 -45
- package/babel.config.js +0 -3
- package/integration-tests/build.gradle +0 -59
- package/integration-tests/gradle/wrapper/gradle-wrapper.jar +0 -0
- package/integration-tests/gradle/wrapper/gradle-wrapper.properties +0 -6
- package/integration-tests/gradlew +0 -172
- package/integration-tests/gradlew.bat +0 -84
- package/integration-tests/settings.gradle +0 -2
- package/integration-tests/src/test/resources/junit-platform.properties +0 -4
- package/ios/KlarnaInAppSDK.xcworkspace/contents.xcworkspacedata +0 -10
- package/ios/KlarnaInAppSDK.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist +0 -8
- package/ios/Podfile +0 -73
- package/ios/Sources/KlarnaPaymentView.h +0 -5
- package/scripts/bootstrap.js +0 -29
- package/src/index.js +0 -72
package/README.md
CHANGED
|
@@ -1,177 +1,133 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Klarna Mobile SDK React Native
|
|
2
2
|
|
|
3
|
-
![]
|
|
4
|
-
![]
|
|
5
|
-
![]
|
|
3
|
+
[![NPM][npm-badge]][npm-url]
|
|
4
|
+
[![React Native][dependency-badge]][dependency-url]
|
|
5
|
+
[![Platforms][platforms-badge]][platforms-url]
|
|
6
|
+
[![License][license-badge]][license-url]
|
|
7
|
+
[![Developed at Klarna][klarna-badge]][klarna-url]
|
|
6
8
|
|
|
7
|
-
This library wraps Klarna
|
|
9
|
+
This library wraps Klarna Mobile SDK and exposes its functionality as React Native components. It
|
|
8
10
|
currently supports Klarna Payments via a Payment View component.
|
|
9
11
|
|
|
10
12
|
This repository also includes a test application that you can use to see how it works.
|
|
11
13
|
|
|
12
|
-
|
|
14
|
+
### SDK for Other Platforms
|
|
15
|
+
|
|
16
|
+
* [Android](https://github.com/klarna/klarna-mobile-sdk)
|
|
17
|
+
* [iOS](https://github.com/klarna/klarna-mobile-sdk)
|
|
18
|
+
* [Flutter](https://github.com/klarna/klarna-mobile-sdk-flutter)
|
|
13
19
|
|
|
14
20
|
## Requirements
|
|
15
21
|
* iOS 10 or later.
|
|
16
22
|
* Android 4.4 or later.
|
|
17
23
|
|
|
18
|
-
###
|
|
19
|
-
[Overview of the SDK](https://developers.klarna.com/documentation/in-app/)
|
|
20
|
-
|
|
21
|
-
## What Does React Native Klarna In-App SDK Offer?
|
|
22
|
-
This library allows React Native apps to add views with Klarna content to their app. We currently support Klarna Payments, allowing you to add payment views to your checkout and authorizing a session to create an order natively.
|
|
23
|
-
|
|
24
|
-
### Why should you use the SDK?
|
|
25
|
-
The SDK removes any possible friction in your app's checkout flow by leveraging native functionality in iOS and Android. Some of the things the SDK does are:
|
|
24
|
+
### Documentations
|
|
26
25
|
|
|
27
|
-
*
|
|
28
|
-
*
|
|
29
|
-
*
|
|
30
|
-
*
|
|
26
|
+
* [Overview](https://docs.klarna.com/mobile-sdk/)
|
|
27
|
+
* [Android](https://docs.klarna.com/mobile-sdk/android/)
|
|
28
|
+
* [iOS](https://docs.klarna.com/mobile-sdk/ios/)
|
|
29
|
+
* [React Native](https://docs.klarna.com/mobile-sdk/reactnative/)
|
|
31
30
|
|
|
32
31
|
## Getting started
|
|
33
32
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
### Mostly automatic installation
|
|
37
|
-
|
|
38
|
-
`$ react-native link react-native-klarna-inapp-sdk`
|
|
39
|
-
|
|
40
|
-
### Manual installation
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
#### iOS
|
|
44
|
-
|
|
45
|
-
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.
|
|
33
|
+
### Add Dependency
|
|
46
34
|
|
|
47
|
-
|
|
48
|
-
2. Make sure you have a Podfile ready, if not use `pod init`. Check that `platform :ios, ‘10.0’`.
|
|
49
|
-
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.12` and `s.platform = :ios, “10.0”`.
|
|
50
|
-
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’`.
|
|
51
|
-
5. Go back to `[your project]/ios` and run `pod install`.
|
|
35
|
+
#### NPM
|
|
52
36
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
* Clean the project and DerivedData.
|
|
57
|
-
* Build the project.
|
|
37
|
+
```shell
|
|
38
|
+
npm install react-native-klarna-inapp-sdk --save
|
|
39
|
+
```
|
|
58
40
|
|
|
59
|
-
####
|
|
41
|
+
#### Yarn
|
|
60
42
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
2. Append the following lines to `android/settings.gradle`:
|
|
65
|
-
```
|
|
66
|
-
include ':react-native-klarna-inapp-sdk'
|
|
67
|
-
project(':react-native-klarna-inapp-sdk').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-klarna-inapp-sdk/android')
|
|
68
|
-
```
|
|
69
|
-
3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:
|
|
70
|
-
```
|
|
71
|
-
implementation project(':react-native-klarna-inapp-sdk')
|
|
72
|
-
```
|
|
73
|
-
|
|
74
|
-
**Note:** If you encounter any build failure errors regarding the `androidx.annotations` package missing, you should enable `react-native-jetifier` in the `gradle.properties` file inside your project. See how to enable this [here](https://github.com/jumpn/react-native-jetifier).
|
|
43
|
+
```shell
|
|
44
|
+
yarn add react-native-klarna-inapp-sdk
|
|
45
|
+
```
|
|
75
46
|
|
|
76
47
|
### Warning regarding Android integration
|
|
77
48
|
|
|
78
|
-
Both the iOS and Android integrations depend on the native SDK.
|
|
49
|
+
Both the iOS and Android integrations depend on the native SDK.
|
|
79
50
|
|
|
80
51
|
We've experienced issues with React Native 59 and above where 3rd party Gradle repositories won't
|
|
81
|
-
be recognized in the Android project's `build.gradle`. To address this, you'll need to add a
|
|
82
|
-
reference to the repository in your own app's `build.gradle`.
|
|
52
|
+
be recognized in the Android project's `build.gradle`. To address this, you'll need to add a
|
|
53
|
+
reference to the repository in your own app's `build.gradle`.
|
|
83
54
|
|
|
84
|
-
You can do it by adding the lines between the comments below:
|
|
55
|
+
You can do it by adding the lines between the comments below:
|
|
85
56
|
|
|
86
|
-
```
|
|
57
|
+
```groovy
|
|
87
58
|
allprojects {
|
|
88
59
|
repositories {
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
|
|
92
|
-
url("$rootDir/../node_modules/react-native/android")
|
|
93
|
-
}
|
|
94
|
-
maven {
|
|
95
|
-
// Android JSC is installed from npm
|
|
96
|
-
url("$rootDir/../node_modules/jsc-android/dist")
|
|
97
|
-
}
|
|
98
|
-
google()
|
|
99
|
-
mavenCentral {
|
|
100
|
-
// We don't want to fetch react-native from Maven Central as there are
|
|
101
|
-
// older versions over there.
|
|
102
|
-
content {
|
|
103
|
-
excludeGroup "com.facebook.react"
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
// Add the lines below vvv
|
|
60
|
+
...
|
|
61
|
+
// Add the lines below
|
|
107
62
|
maven {
|
|
108
63
|
url 'https://x.klarnacdn.net/mobile-sdk/'
|
|
109
64
|
}
|
|
110
|
-
// Add the lines above ^^^
|
|
111
65
|
}
|
|
112
66
|
}
|
|
113
|
-
|
|
114
67
|
```
|
|
115
68
|
|
|
116
69
|
---
|
|
117
70
|
|
|
118
71
|
## Usage
|
|
119
72
|
|
|
120
|
-
You can import the `KlarnaPaymentView` from the library. You'll then be able to add it as a
|
|
73
|
+
You can import the `KlarnaPaymentView` from the library. You'll then be able to add it as a
|
|
121
74
|
component to your app. This component exposes callbacks as props and methods you can call via the
|
|
122
|
-
|
|
75
|
+
component's ref.
|
|
123
76
|
|
|
124
|
-
The view will self-size height-wise and grow it fill it containing view's width.
|
|
77
|
+
The view will self-size height-wise and grow it fill it containing view's width.
|
|
125
78
|
|
|
126
79
|
### Props
|
|
127
80
|
|
|
128
81
|
It has the following props:
|
|
129
82
|
|
|
130
|
-
| Name
|
|
131
|
-
|
|
132
|
-
| `category` | `String`
|
|
133
|
-
| `
|
|
134
|
-
| `
|
|
135
|
-
| `
|
|
136
|
-
| `
|
|
137
|
-
| `
|
|
138
|
-
| `
|
|
139
|
-
| `
|
|
83
|
+
| Name | Type | Description |
|
|
84
|
+
|-------------------------| --- |-------------------------------------------------------------------------------|
|
|
85
|
+
| `category` | `String` | The payment method category you want to render in your view. |
|
|
86
|
+
| `returnUrl` | `String` | An app-defined URL scheme the component uses to return customers to your app. |
|
|
87
|
+
| `onInitialized` | `() => {}` | The initialize call completed. |
|
|
88
|
+
| `onLoaded` | `() => {}` | The load call completed. |
|
|
89
|
+
| `onLoadedPaymentReview` | `() => {}` | The load payment review call completed. |
|
|
90
|
+
| `onAuthorized` | `(approved, authToken, finalizeRequired) => {}` | The authorize call completed. |
|
|
91
|
+
| `onReauthorized` | `(approved, authToken) => {}` | The reauthorize call completed. |
|
|
92
|
+
| `onFinalized` | `(approved, authToken) => {}` | The finalize call completed. |
|
|
93
|
+
| `onError` | `(error) => {}` | An error occurred. |
|
|
140
94
|
|
|
141
95
|
---
|
|
96
|
+
|
|
97
|
+
#### Return URL
|
|
98
|
+
|
|
99
|
+
You can read more about how the return URL works and how to add it tou your iOS application [here](https://developers.klarna.com/documentation/in-app/ios/getting-started/#return-url) and for your Android application [here](https://developers.klarna.com/documentation/in-app/android/getting-started/#return-url).
|
|
100
|
+
|
|
142
101
|
---
|
|
143
102
|
|
|
144
103
|
### Prop callback parameters
|
|
145
104
|
|
|
146
|
-
The `onAuthorized`, `onReauthorized`, `onFinalized` and `onError` will provide an object (via
|
|
147
|
-
`nativeEvent`) with the following parameters:
|
|
148
|
-
|
|
149
105
|
---
|
|
150
106
|
|
|
151
|
-
####
|
|
107
|
+
#### approved: `boolean`
|
|
152
108
|
|
|
153
|
-
Determines whether the previous operation was successful and yielded an authorization token.
|
|
109
|
+
Determines whether the previous operation was successful and yielded an authorization token.
|
|
154
110
|
|
|
155
111
|
##### Available on:
|
|
156
112
|
- `onAuthorized`
|
|
157
|
-
- `onReauthorized`
|
|
158
|
-
- `onFinalized`
|
|
113
|
+
- `onReauthorized`
|
|
114
|
+
- `onFinalized`
|
|
159
115
|
|
|
160
116
|
---
|
|
161
117
|
|
|
162
|
-
#### authToken: `
|
|
118
|
+
#### authToken: `string | null`
|
|
163
119
|
|
|
164
120
|
If `authorize()`, `reauthorize()` or `finalize()` succeeded, they will return a token you can submit
|
|
165
121
|
to your backend.
|
|
166
122
|
|
|
167
123
|
##### Available on:
|
|
168
124
|
- `onAuthorized`
|
|
169
|
-
- `onReauthorized`
|
|
170
|
-
- `onFinalized`
|
|
125
|
+
- `onReauthorized`
|
|
126
|
+
- `onFinalized`
|
|
171
127
|
|
|
172
128
|
---
|
|
173
129
|
|
|
174
|
-
#### finalizeRequired: `
|
|
130
|
+
#### finalizeRequired: `boolean | null`
|
|
175
131
|
|
|
176
132
|
If `authorize()` requires that you additionally call `finalize()`, .
|
|
177
133
|
|
|
@@ -180,9 +136,10 @@ If `authorize()` requires that you additionally call `finalize()`, .
|
|
|
180
136
|
|
|
181
137
|
---
|
|
182
138
|
|
|
183
|
-
#### error: `
|
|
139
|
+
#### error: `KlarnaPaymentsSDKError`
|
|
184
140
|
|
|
185
|
-
If a method failed, `onError()` will let you know via an error object.
|
|
141
|
+
If a method failed, `onError()` will let you know via an error object. Contains `name`, `message`,
|
|
142
|
+
`action`, `isFatal`, `sessionId` properties.
|
|
186
143
|
|
|
187
144
|
##### Available on:
|
|
188
145
|
- `onError`
|
|
@@ -198,19 +155,14 @@ below example how these can be called. The methods are the following:
|
|
|
198
155
|
---
|
|
199
156
|
|
|
200
157
|
#### initialize()
|
|
201
|
-
Initializes the view with a session token. You have to have added the view to your application and
|
|
158
|
+
Initializes the view with a session token. You have to have added the view to your application and
|
|
202
159
|
supplied a payment method category.
|
|
203
160
|
|
|
204
161
|
##### Parameters
|
|
205
162
|
|
|
206
|
-
| Name
|
|
207
|
-
|
|
208
|
-
|
|
|
209
|
-
| returnUrl | `String` | An app-defined URL scheme the component uses to return customers to your app.|
|
|
210
|
-
|
|
211
|
-
##### Return URL
|
|
212
|
-
|
|
213
|
-
You can read more about how the return URL works and how to add it tou your iOS application [here](https://developers.klarna.com/documentation/in-app/ios/getting-started/#return-url) and for your Android application [here](https://developers.klarna.com/documentation/in-app/android/getting-started/#return-url).
|
|
163
|
+
| Name | Type | Description |
|
|
164
|
+
|---------|----------|--------------------------------------------------|
|
|
165
|
+
| clientToken | `string` | The client token you get from Klarna Payments API. |
|
|
214
166
|
|
|
215
167
|
---
|
|
216
168
|
|
|
@@ -219,16 +171,16 @@ Loads the view. This will render content in the view.
|
|
|
219
171
|
|
|
220
172
|
##### Parameters
|
|
221
173
|
|
|
222
|
-
| Name | Type
|
|
223
|
-
| ----
|
|
224
|
-
| sessionData | `
|
|
174
|
+
| Name | Type | Description |
|
|
175
|
+
| ---- |-----------------------|------------|
|
|
176
|
+
| sessionData | `string \| undefined` | A JSON object with updated session data serialized into a string.|
|
|
225
177
|
|
|
226
178
|
---
|
|
227
179
|
|
|
228
180
|
#### loadPaymentReview()
|
|
229
|
-
Renders a description of the payment terms your customer has agreed to.
|
|
181
|
+
Renders a description of the payment terms your customer has agreed to.
|
|
230
182
|
|
|
231
|
-
Once a session is authorized, you can then either render a payment review in the existing
|
|
183
|
+
Once a session is authorized, you can then either render a payment review in the existing
|
|
232
184
|
payment view or `initialize()` a new payment view with the same session token and call this method.
|
|
233
185
|
|
|
234
186
|
##### Note:
|
|
@@ -241,10 +193,10 @@ Authorizes the payment session.
|
|
|
241
193
|
|
|
242
194
|
##### Parameters
|
|
243
195
|
|
|
244
|
-
| Name | Type
|
|
245
|
-
| ----
|
|
246
|
-
| autoFinalize | `
|
|
247
|
-
| sessionData | `
|
|
196
|
+
| Name | Type | Description |
|
|
197
|
+
| ---- |------------------------|----------------------------------------------------------------------|
|
|
198
|
+
| autoFinalize | `boolean \| undefined` | A flag used to turn on/off auto-finalization for direct bank transfer. |
|
|
199
|
+
| sessionData | `string \| undefined` | A JSON object with updated session data serialized into a string.|
|
|
248
200
|
|
|
249
201
|
---
|
|
250
202
|
|
|
@@ -254,9 +206,9 @@ the session and get a new authorization token.
|
|
|
254
206
|
|
|
255
207
|
##### Parameters
|
|
256
208
|
|
|
257
|
-
| Name | Type
|
|
258
|
-
| ----
|
|
259
|
-
| sessionData | `
|
|
209
|
+
| Name | Type | Description |
|
|
210
|
+
| ---- |-----------------------| ----------- |
|
|
211
|
+
| sessionData | `string \| undefined` | A JSON object with updated session data serialized into a string.|
|
|
260
212
|
|
|
261
213
|
---
|
|
262
214
|
|
|
@@ -266,155 +218,33 @@ ready.
|
|
|
266
218
|
|
|
267
219
|
##### Parameters
|
|
268
220
|
|
|
269
|
-
| Name | Type
|
|
270
|
-
| ----
|
|
271
|
-
| sessionData | `String
|
|
221
|
+
| Name | Type | Description |
|
|
222
|
+
| ---- |-----------------------|------------|
|
|
223
|
+
| sessionData | `String \| undefined` | A JSON object with updated session data serialized into a string.|
|
|
272
224
|
|
|
273
225
|
---
|
|
274
226
|
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
You can read more about refs and how they're used [here](https://reactjs.org/docs/refs-and-the-dom.html).
|
|
278
|
-
If you'd like to understand what each method does, you can read about it [on Klarna Developers](https://developers.klarna.com/documentation/in-app/overview/steps-klarna-payments/).
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
---
|
|
282
|
-
---
|
|
283
|
-
|
|
284
|
-
## Example
|
|
285
|
-
|
|
286
|
-
In addition to the test app in [/TestApp](https://github.com/klarna/react-native-klarna-inapp-sdk/tree/master/TestApp), the you can see an abridged version below.
|
|
287
|
-
|
|
288
|
-
```jsx
|
|
289
|
-
import KlarnaPaymentView from 'react-native-klarna-inapp-sdk';
|
|
290
|
-
|
|
291
|
-
class MyCheckoutView extends React.Component {
|
|
292
|
-
|
|
293
|
-
constructor(props) {
|
|
294
|
-
super(props);
|
|
295
|
-
this.state = {
|
|
296
|
-
paymentViewLoaded: false
|
|
297
|
-
};
|
|
298
|
-
}
|
|
299
|
-
|
|
300
|
-
componentDidMount() {
|
|
301
|
-
// To initialize the component, you'll need call the component's initialize method with your
|
|
302
|
-
// backend's session token and a return URL for your application.
|
|
303
|
-
//
|
|
304
|
-
// This should occur at some point when the payment view is added to your application's view,
|
|
305
|
-
// but it should only be repeated if initialization fails.
|
|
306
|
-
this.refs['my_ref'].initialize('my_session_token', 'my_apps_return_url')
|
|
307
|
-
}
|
|
308
|
-
|
|
309
|
-
onInitialized = () => {
|
|
310
|
-
// Once the view is initialized, you can render content into it.
|
|
311
|
-
this.refs['my_ref'].load()
|
|
312
|
-
}
|
|
313
|
-
|
|
314
|
-
onLoaded = () => {
|
|
315
|
-
// Once the view is loaded, the user should be able to see the payment method. They can then
|
|
316
|
-
// choose to use it (it's up to you to determine how that is recognized) and tap a "buy-like"
|
|
317
|
-
// button.
|
|
318
|
-
this.setState({paymentViewLoaded: true})
|
|
319
|
-
}
|
|
320
|
-
|
|
321
|
-
buyButtonPressed = () => {
|
|
322
|
-
// When the button is tapped, call authorize() on the view.
|
|
323
|
-
this.refs['my_ref'].authorize()
|
|
324
|
-
}
|
|
325
|
-
|
|
326
|
-
onAuthorized = (event) => {
|
|
327
|
-
// If successfully authorized, the authorization token can be used by your backend to create
|
|
328
|
-
// an order.
|
|
329
|
-
//
|
|
330
|
-
// You can also load a payment review view to allow the user to evaluate their
|
|
331
|
-
// payment choice.
|
|
332
|
-
let params = event.nativeEvent
|
|
333
|
-
|
|
334
|
-
if (params.authorized) {
|
|
335
|
-
submitAuthToken(params.authToken)
|
|
336
|
-
}
|
|
337
|
-
}
|
|
338
|
-
|
|
339
|
-
render() {
|
|
340
|
-
return(
|
|
341
|
-
// Other parts of the view
|
|
342
|
-
// ...
|
|
343
|
-
// The payment view
|
|
344
|
-
<KlarnaPaymentView
|
|
345
|
-
category={'pay_later'}
|
|
346
|
-
ref={'my_ref'}
|
|
347
|
-
onInitialized={this.onInitialized}
|
|
348
|
-
onLoaded={this.onLoaded}
|
|
349
|
-
onAuthorized={this.onAuthorized} />
|
|
350
|
-
// ...
|
|
351
|
-
// Your buy button
|
|
352
|
-
<Button
|
|
353
|
-
disabled={!this.state.paymentViewLoaded}
|
|
354
|
-
onPress={this.buyButtonPressed} />
|
|
355
|
-
);
|
|
356
|
-
}
|
|
357
|
-
}
|
|
358
|
-
|
|
359
|
-
```
|
|
227
|
+
## Support
|
|
360
228
|
|
|
361
|
-
|
|
229
|
+
If you are having any issues using the SDK in your project or if you think that something is wrong with the SDK itself, please follow our [support guide](https://github.com/klarna/react-native-klarna-inapp-sdk/blob/master/SUPPORT.md).
|
|
362
230
|
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
If you are having any issues using the SDK in your project or if you think that something is wrong with the SDK itself, please create an issue on [Github](https://github.com/klarna/react-native-klarna-inapp-sdk/issues) or report a bug by following the guidelines in the next section.
|
|
366
|
-
|
|
367
|
-
### How can I contribute?
|
|
368
|
-
|
|
369
|
-
Thank you for reading this and taking time to contribute to React Native Klarna In-App SDK! Below is a set of guidelines to help you contribute whether you want to report a bug, come with suggestions or modify code.
|
|
370
|
-
|
|
371
|
-
#### Reporting Bugs
|
|
372
|
-
This section will guide you through submitting a bug report for Klarna In-App SDK.
|
|
373
|
-
|
|
374
|
-
Before submitting a bug report, please check that the issue hasn't been reported before. If you find a *Closed* issue that seem to describe an issue that is similar to what you want to report, open a new issue and link to the original issue in the new one. When you have checked that the issue hasn't been reported before **fill out [the required template](https://github.com/klarna/react-native-klarna-inapp-sdk/blob/master/.github/ISSUE_TEMPLATE/bug_report.md)** which will help us resolve the issue faster.
|
|
375
|
-
|
|
376
|
-
##### Submitting a Bug Report
|
|
377
|
-
Bugs that are submitted are tracked as [GitHub issues](https://guides.github.com/features/issues/). To report a bug, create an issue and use [the template](https://github.com/klarna/react-native-klarna-inapp-sdk/blob/master/.github/ISSUE_TEMPLATE/bug_report.md) to provide information about the bug. Explain the problem thoroughly and include any additional information that you think might help the maintainers reproduce the issue. When creating the GitHub issue please make sure that you:
|
|
378
|
-
|
|
379
|
-
* **Use a clear and descriptive title** for the issue.
|
|
380
|
-
* **Describe the exact steps which reproduce the problem** with as many details as possible. It's generally better to provide too much than too little information.
|
|
381
|
-
* **Describe the behavior you observed after following the steps** and explain exactly what the problem is with that behavior.
|
|
382
|
-
* **Explain which behavior you expected instead** and why.
|
|
383
|
-
* **Provide screenshots and/or screen recordings** that might help explain the issue you are facing. To screen record a phone connected to Android Studio or an emulator follow the steps [here](https://developer.android.com/studio/debug/am-video). To screen record on iOS follow the steps described [here](https://support.apple.com/en-us/HT207935).
|
|
384
|
-
* **Include relevant logs in the bug report** by putting it in a [code block](https://help.github.com/en/github/writing-on-github/getting-started-with-writing-and-formatting-on-github#multiple-lines), a [file attachment](https://help.github.com/en/github/managing-your-work-on-github/file-attachments-on-issues-and-pull-requests) or in a [gist](https://help.github.com/en/github/writing-on-github/creating-gists) and provide a link to that gist.
|
|
385
|
-
* **Tell how recently you started having the issue.** When was the first time you experienced the issue and was it after updating the SDK version? Or has it always been a problem?
|
|
386
|
-
* If the problem started happening recently, **can you reproduce it in an older version of the SDK?** What's the most recent version in which the problem doesn't happen?
|
|
387
|
-
* **Can you reliably reproduce the issue?** If not, explain how often it occurs and under what conditions it normally happens. For example in what environment you are running.
|
|
388
|
-
|
|
389
|
-
Include details about the device/emulator/simulator you are experiencing the issue on:
|
|
390
|
-
|
|
391
|
-
* **Which version of the SDK are you using?**
|
|
392
|
-
* **Which OS is this a problem in, iOS, Android or both?** What version(s)? Also add the appropriate label to the issue.
|
|
393
|
-
* **Did you experience the issue in simulator/emulator or on real device(s)?**
|
|
394
|
-
|
|
395
|
-
#### Contributing with Code
|
|
396
|
-
Before contributing please read through the [Klarna In-App SDK documentation](https://developers.klarna.com/documentation/in-app/).
|
|
397
|
-
|
|
398
|
-
##### Branching
|
|
399
|
-
Prefix the branch you are going to work on depending on what you are working on (bug fix or feature). Use the following prefixes when creating a new branch:
|
|
400
|
-
|
|
401
|
-
* **feature/** if the branch contains a new feature, example: `feature/my-shiny-feature`.
|
|
402
|
-
* **bugfix/** if the branch contains a bug fix, example: `bugfix/my-bug-fix`.
|
|
403
|
-
|
|
404
|
-
##### Pull Requests
|
|
405
|
-
When creating a PR include as much information as possible about the type of enhancement, whether if it's a bugfix, new functionality or any other change. There's [a template](https://github.com/klarna/react-native-klarna-inapp-sdk/blob/master/.github/ISSUE_TEMPLATE/pull-request.md) for you to fill out which will make the review process for the maintainers faster. When creating a PR do it against the `master` branch. The PR should include:
|
|
406
|
-
|
|
407
|
-
* **A clear and descriptive title**.
|
|
408
|
-
* **Description of the issue** if you are fixing a bug together with a link to the relevant issue or **background for introducing a new feature**.
|
|
231
|
+
## Contribution
|
|
409
232
|
|
|
233
|
+
If you want to contribute to this project please follow our [contribution guide](https://github.com/klarna/react-native-klarna-inapp-sdk/blob/master/CONTRIBUTING.md).
|
|
410
234
|
|
|
411
235
|
## License
|
|
412
236
|
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
237
|
+
This project is licensed under
|
|
238
|
+
[Apache License, Version 2.0](https://github.com/klarna/react-native-klarna-inapp-sdk/blob/master/LICENSE).
|
|
239
|
+
|
|
240
|
+
<!-- Markdown images & links -->
|
|
241
|
+
[npm-badge]: https://img.shields.io/npm/v/react-native-klarna-inapp-sdk?style=flat-square
|
|
242
|
+
[npm-url]: https://www.npmjs.com/package/react-native-klarna-inapp-sdk
|
|
243
|
+
[dependency-badge]: https://img.shields.io/npm/dependency-version/react-native-klarna-inapp-sdk/peer/react-native?style=flat-square
|
|
244
|
+
[dependency-url]: https://www.npmjs.com/package/react-native-klarna-inapp-sdk?activeTab=dependencies
|
|
245
|
+
[platforms-badge]: https://img.shields.io/badge/platform-react%20native-lightgrey?style=flat-square
|
|
246
|
+
[platforms-url]: https://reactnative.dev
|
|
247
|
+
[license-badge]: https://img.shields.io/github/license/klarna/react-native-klarna-inapp-sdk?style=flat-square
|
|
248
|
+
[license-url]: https://github.com/klarna/react-native-klarna-inapp-sdk/blob/master/LICENSE
|
|
249
|
+
[klarna-badge]: https://img.shields.io/badge/%20-Developed%20at%20Klarna-black?labelColor=ffb3c7&style=flat-square&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAAAXNSR0IArs4c6QAAAIRlWElmTU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAALQAAAAAQAAAtAAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAABCgAwAEAAAAAQAAAA4AAAAA0LMKiwAAAAlwSFlzAABuugAAbroB1t6xFwAAAVlpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KTMInWQAAAVBJREFUKBVtkz0vREEUhsdXgo5qJXohkUgQ0fgFNFpR2V5ClP6CQu9PiB6lEL1I7B9A4/treZ47c252s97k2ffMmZkz5869m1JKL/AFbzAHaiRbmsIf4BdaMAZqMFsOXNxXkroKbxCPV5l8yHOJLVipn9/vEreLa7FguSN3S2ynA/ATeQuI8tTY6OOY34DQaQnq9mPCDtxoBwuRxPfAvPMWnARlB12KAi6eLTPruOOP4gcl33O6+Sjgc83DJkRH+h2MgorLzaPy68W48BG2S+xYnmAa1L+nOxEduMH3fgjGFvZeVkANZau68B6CrgJxWosFFpF7iG+h5wKZqwt42qIJtARu/ix+gqsosEq8D35o6R3c7OL4lAnTDljEe9B3Qa2BYzmHemDCt6Diwo6JY7E+A82OnN9HuoBruAQvUQ1nSxP4GVzBDRyBfygf6RW2/gD3NmEv+K/DZgAAAABJRU5ErkJggg==
|
|
250
|
+
[klarna-url]: https://github.com/klarna
|