react-native-klarna-inapp-sdk 2.1.12 → 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.
Files changed (101) hide show
  1. package/README.md +100 -270
  2. package/android/build.gradle +85 -107
  3. package/android/gradle.properties +7 -0
  4. package/android/src/main/AndroidManifest.xml +2 -1
  5. package/android/src/main/AndroidManifestNew.xml +4 -0
  6. package/android/src/main/java/com/klarna/mobile/sdk/reactnative/KlarnaMobileSDKPackage.java +33 -0
  7. package/android/src/main/java/com/klarna/mobile/sdk/reactnative/common/ArgumentsUtil.java +62 -0
  8. package/android/src/main/java/com/klarna/mobile/sdk/reactnative/common/WebViewResizeObserver.java +100 -0
  9. package/android/src/main/java/com/klarna/{inapp/sdk → mobile/sdk/reactnative/payments}/KlarnaPaymentEvent.java +9 -19
  10. package/android/src/main/java/com/klarna/mobile/sdk/reactnative/payments/KlarnaPaymentViewManager.java +346 -0
  11. package/android/src/main/java/com/klarna/mobile/sdk/reactnative/payments/PaymentViewWrapper.java +78 -0
  12. package/android/src/main/java/com/klarna/mobile/sdk/reactnative/standalonewebview/KlarnaStandaloneWebViewEvent.java +67 -0
  13. package/android/src/main/java/com/klarna/mobile/sdk/reactnative/standalonewebview/KlarnaStandaloneWebViewEventSender.java +139 -0
  14. package/android/src/main/java/com/klarna/mobile/sdk/reactnative/standalonewebview/KlarnaStandaloneWebViewManager.java +205 -0
  15. package/android/src/newarch/java/com/klarna/mobile/sdk/reactnative/spec/RNKlarnaPaymentViewSpec.java +32 -0
  16. package/android/src/newarch/java/com/klarna/mobile/sdk/reactnative/spec/RNKlarnaStandaloneWebViewSpec.java +33 -0
  17. package/android/src/oldarch/java/com/klarna/mobile/sdk/reactnative/spec/RNKlarnaPaymentViewSpec.java +25 -0
  18. package/android/src/oldarch/java/com/klarna/mobile/sdk/reactnative/spec/RNKlarnaStandaloneWebViewSpec.java +19 -0
  19. package/android/src/test/java/com/klarna/{inapp/sdk/KlarnaPaymentViewPackageTest.java → mobile/sdk/reactnative/KlarnaMobileSDKPackageTest.java} +9 -4
  20. package/android/src/test/java/com/klarna/{inapp/sdk → mobile/sdk/reactnative/payments}/KlarnaPaymentEventTest.java +17 -20
  21. package/android/src/test/java/com/klarna/{inapp/sdk → mobile/sdk/reactnative/payments}/KlarnaPaymentViewManagerTest.java +72 -29
  22. package/ios/{KlarnaInAppSDK.xcodeproj → RNKlarnaMobileSDK.xcodeproj}/project.pbxproj +147 -87
  23. package/ios/{KlarnaInAppSDK.xcodeproj/xcshareddata/xcschemes/KlarnaInAppSDK.xcscheme → RNKlarnaMobileSDK.xcodeproj/xcshareddata/xcschemes/RNKlarnaMobileSDK.xcscheme} +9 -9
  24. package/ios/{KlarnaInAppSDK.xcodeproj/xcshareddata/xcschemes/KlarnaInAppSDKTests.xcscheme → RNKlarnaMobileSDK.xcodeproj/xcshareddata/xcschemes/RNKlarnaMobileSDKTests.xcscheme} +3 -3
  25. package/ios/Sources/KlarnaPaymentViewManager.h +5 -0
  26. package/ios/Sources/{KlarnaPaymentView.m → KlarnaPaymentViewManager.mm} +10 -15
  27. package/ios/Sources/KlarnaStandaloneWebViewManager.h +5 -0
  28. package/ios/Sources/KlarnaStandaloneWebViewManager.mm +77 -0
  29. package/ios/Sources/view/newarch/KlarnaStandaloneWebViewWrapper.h +29 -0
  30. package/ios/Sources/view/newarch/KlarnaStandaloneWebViewWrapper.mm +265 -0
  31. package/ios/Sources/view/newarch/PaymentViewWrapper.h +33 -0
  32. package/ios/Sources/view/newarch/PaymentViewWrapper.mm +240 -0
  33. package/ios/Sources/view/oldarch/KlarnaStandaloneWebViewWrapper.h +42 -0
  34. package/ios/Sources/view/oldarch/KlarnaStandaloneWebViewWrapper.mm +195 -0
  35. package/ios/Sources/view/{PaymentViewWrapper.h → oldarch/PaymentViewWrapper.h} +9 -7
  36. package/ios/Sources/view/{PaymentViewWrapper.m → oldarch/PaymentViewWrapper.mm} +40 -27
  37. package/ios/Tests/PaymentViewWrapperTests.m +8 -10
  38. package/lib/commonjs/KlarnaPaymentView.js +192 -0
  39. package/lib/commonjs/KlarnaPaymentView.js.map +1 -0
  40. package/lib/commonjs/KlarnaStandaloneWebView.js +81 -0
  41. package/lib/commonjs/KlarnaStandaloneWebView.js.map +1 -0
  42. package/lib/commonjs/index.js +28 -0
  43. package/lib/commonjs/index.js.map +1 -0
  44. package/lib/commonjs/specs/KlarnaPaymentViewNativeComponent.js +16 -0
  45. package/lib/commonjs/specs/KlarnaPaymentViewNativeComponent.js.map +1 -0
  46. package/lib/commonjs/specs/KlarnaStandaloneWebViewNativeComponent.js +16 -0
  47. package/lib/commonjs/specs/KlarnaStandaloneWebViewNativeComponent.js.map +1 -0
  48. package/lib/module/KlarnaPaymentView.js +182 -0
  49. package/lib/module/KlarnaPaymentView.js.map +1 -0
  50. package/lib/module/KlarnaStandaloneWebView.js +71 -0
  51. package/lib/module/KlarnaStandaloneWebView.js.map +1 -0
  52. package/lib/module/index.js +3 -0
  53. package/lib/module/index.js.map +1 -0
  54. package/lib/module/specs/KlarnaPaymentViewNativeComponent.js +7 -0
  55. package/lib/module/specs/KlarnaPaymentViewNativeComponent.js.map +1 -0
  56. package/lib/module/specs/KlarnaStandaloneWebViewNativeComponent.js +7 -0
  57. package/lib/module/specs/KlarnaStandaloneWebViewNativeComponent.js.map +1 -0
  58. package/lib/typescript/KlarnaPaymentView.d.ts +51 -0
  59. package/lib/typescript/KlarnaPaymentView.d.ts.map +1 -0
  60. package/lib/typescript/KlarnaStandaloneWebView.d.ts +46 -0
  61. package/lib/typescript/KlarnaStandaloneWebView.d.ts.map +1 -0
  62. package/lib/typescript/index.d.ts +3 -0
  63. package/lib/typescript/index.d.ts.map +1 -0
  64. package/lib/typescript/specs/KlarnaPaymentViewNativeComponent.d.ts +49 -0
  65. package/lib/typescript/specs/KlarnaPaymentViewNativeComponent.d.ts.map +1 -0
  66. package/lib/typescript/specs/KlarnaStandaloneWebViewNativeComponent.d.ts +65 -0
  67. package/lib/typescript/specs/KlarnaStandaloneWebViewNativeComponent.d.ts.map +1 -0
  68. package/package.json +92 -16
  69. package/react-native-klarna-inapp-sdk.podspec +32 -13
  70. package/src/KlarnaPaymentView.tsx +323 -0
  71. package/src/KlarnaStandaloneWebView.tsx +217 -0
  72. package/src/index.tsx +2 -0
  73. package/src/specs/KlarnaPaymentViewNativeComponent.ts +99 -0
  74. package/src/specs/KlarnaStandaloneWebViewNativeComponent.ts +96 -0
  75. package/.gitattributes +0 -3
  76. package/CHANGELOG.md +0 -111
  77. package/android/README.md +0 -14
  78. package/android/gradle/wrapper/gradle-wrapper.jar +0 -0
  79. package/android/gradle/wrapper/gradle-wrapper.properties +0 -6
  80. package/android/gradlew +0 -172
  81. package/android/gradlew.bat +0 -84
  82. package/android/src/main/java/com/klarna/inapp/sdk/HeightListener.java +0 -159
  83. package/android/src/main/java/com/klarna/inapp/sdk/KlarnaPaymentViewManager.java +0 -282
  84. package/android/src/main/java/com/klarna/inapp/sdk/KlarnaPaymentViewPackage.java +0 -25
  85. package/android/src/main/java/com/klarna/inapp/sdk/Mappable.java +0 -10
  86. package/android/src/main/java/com/klarna/inapp/sdk/MappableKlarnaPaymentsSDKError.java +0 -31
  87. package/android/src/main/java/com/klarna/inapp/sdk/PaymentViewWrapper.java +0 -131
  88. package/android/src/test/java/com/klarna/inapp/sdk/MappableKlarnaPaymentsSDKErrorTest.java +0 -45
  89. package/index.js +0 -72
  90. package/integration-tests/build.gradle +0 -59
  91. package/integration-tests/gradle/wrapper/gradle-wrapper.jar +0 -0
  92. package/integration-tests/gradle/wrapper/gradle-wrapper.properties +0 -6
  93. package/integration-tests/gradlew +0 -172
  94. package/integration-tests/gradlew.bat +0 -84
  95. package/integration-tests/settings.gradle +0 -2
  96. package/integration-tests/src/test/resources/junit-platform.properties +0 -4
  97. package/ios/KlarnaInAppSDK.xcworkspace/contents.xcworkspacedata +0 -10
  98. package/ios/KlarnaInAppSDK.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist +0 -8
  99. package/ios/Podfile +0 -73
  100. package/ios/Sources/KlarnaPaymentView.h +0 -5
  101. package/scripts/examples_postinstall.js +0 -111
package/README.md CHANGED
@@ -1,177 +1,133 @@
1
- # React Native Klarna In-App SDK
1
+ # Klarna Mobile SDK React Native
2
2
 
3
- ![](https://img.shields.io/github/license/klarna/react-native-klarna-inapp-sdk)
4
- ![](https://img.shields.io/npm/v/react-native-klarna-inapp-sdk)
5
- ![](https://img.shields.io/npm/dependency-version/react-native-klarna-inapp-sdk/peer/react-native)
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's In-App SDK and exposes its functionality as React Native components. It
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
- **Looking for the pure native Klarna In-App SDK?** Check out the [Klarna In-App SDK](https://github.com/klarna/klarna-inapp-sdk) repo instead.
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
- ### Klarna In-App SDK documentation
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
- * **Plays nicely with 3rd-party apps.** Many customers complete their purchase through their banking application or other 3rd-party apps. We make this experience seamless not just by opening these apps, but returning your users automatically when they’re done.
28
- * **Safeguards your users' identity.** The SDK adds an extra layer of security lowering the risk of fraudulent purchases. It also insures that your customer doesn’t have to write in any redundant info. (e.g. address or credentials) on successive purchases.
29
- * **Improves 3D Secure flow.** If certain payment methods require opening banking pages, we’ll display an in-app browser. Your customer can safely authenticate with their bank without ever leaving your app.
30
- * **Open links without making your customers leave your app.** As with 3D Secure, we open most resources in an in-app browser or a fullscreen overlay. This insures that your customer doesn’t ever have to leave your app.
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
- `$ npm install react-native-klarna-inapp-sdk --save`
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
- 1. After running `$ npm install react-native-klarna-inapp-sdk --save` go to `[your project]/ios` folder.
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
- **Note:** If you encounter the build failure error Library not loaded: `@rpath/libswiftCore.dylib`, then you might need to create a `Swift Bridging Header`. to do so, please follow the steps below:
54
- * In XCode, create a new .swift file in the project.
55
- * A prompt window would ask you if you want to configure the Bridging Header, choose `yes`.
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
- #### Android
41
+ #### Yarn
60
42
 
61
- 1. Open up `android/app/src/main/java/[...]/MainApplication.java`
62
- - Add `import com.klarna.inapp.sdk.KlarnaPaymentViewPackage;` to the imports at the top of the file
63
- - Add `new KlarnaPaymentViewPackage()` to the list returned by the `getPackages()` method
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
- ```gradle
57
+ ```groovy
87
58
  allprojects {
88
59
  repositories {
89
- mavenLocal()
90
- maven {
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
- compoent's ref.
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 | Type | Description |
131
- | --- | --- | --- |
132
- | `category` | `String` | The payment method category you want to render in your view.|
133
- | `onInitialized` | `() => {}` | The initialize call succeeded.|
134
- | `onLoaded` | `() => {}` | The load call succeeded.|
135
- | `onLoadedPaymentReview` | `() => {}` | The load payment review call succeeded.|
136
- | `onAuthorized` | `({}) => {}` | The authorize call succeeded.|
137
- | `onReauthorized` | `({}) => {}` | The reauthorize call succeeded.|
138
- | `onFinalized` | `({}) => {}` | The finalize call succeeded.|
139
- | `onError` | `({}) => {}` | An error occurred.|
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
- #### authorized: `Boolean`
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: `String / undefined`
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: `Boolean / undefined`
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: `Object / undefined`
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 | Type | Description |
207
- | ---- | ---- | ----------- |
208
- | sessionToken | `String` | The session token you get from Klarna.|
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 | Description |
223
- | ---- | ---- | ----------- |
224
- | sessionData | `String / undefined` | A JSON object with updated session data serialized into a string.|
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 | Description |
245
- | ---- | ---- | ----------- |
246
- | autoFinalize | `Boolean / undefined` | A flag used to turn on/off auto-finalization for direct bank transfer.|
247
- | sessionData | `String / undefined` | A JSON object with updated session data serialized into a string.|
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 | Description |
258
- | ---- | ---- | ----------- |
259
- | sessionData | `String / undefined` | A JSON object with updated session data serialized into a string.|
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 | Description |
270
- | ---- | ---- | ----------- |
271
- | sessionData | `String / undefined` | A JSON object with updated session data serialized into a 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
- ### More information
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
- ## Contributing
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
- ### Support
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
- Copyright 2019 Klarna Bank AB
414
-
415
- Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License.
416
- You may obtain a copy of the License at
417
-
418
- http://www.apache.org/licenses/LICENSE-2.0
419
-
420
- Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
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