diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 00000000..61a74dab --- /dev/null +++ b/.editorconfig @@ -0,0 +1,15 @@ +# EditorConfig helps developers define and maintain consistent +# coding styles between different editors and IDEs +# editorconfig.org + +root = true + +[*] + +indent_style = space +# indent_size = 2 + +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 00000000..c21695a7 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,21 @@ +module.exports = { + parser: '@typescript-eslint/parser', + parserOptions: { + project: 'tsconfig.json', + tsconfigRootDir: __dirname, + sourceType: 'module', + }, + plugins: [ + '@typescript-eslint/eslint-plugin' + ], + root: true, + env: { + jest: true, + }, + ignorePatterns: [ + '.eslintrc.js', + 'lib/**/*', + 'TestApp/**/*' + ], + extends: ['@react-native', 'prettier'], +}; diff --git a/.github/workflows/android_build.yml b/.github/workflows/android_build.yml index f8264f50..bd6be040 100644 --- a/.github/workflows/android_build.yml +++ b/.github/workflows/android_build.yml @@ -23,7 +23,7 @@ jobs: - name: Install NodeJS uses: actions/setup-node@v3 with: - node-version: '16.17.0' + node-version: '18.17.1' cache: 'yarn' # install project dependencies @@ -52,8 +52,8 @@ jobs: - name: Make Gradlew Executable run: cd android && chmod +x ./gradlew - - name: Run Android library unit tests - run: cd android && ./gradlew clean && ./gradlew testDebugUnitTest && cd .. + - name: Run Android unit tests + run: cd TestApp/android && ./gradlew clean && ./gradlew testDebugUnitTest && cd ../.. - name: Bundle JS for Android run: cd TestApp && mkdir android/app/src/main/assets && yarn bundle:android-dev && cd .. diff --git a/.github/workflows/android_integration_tests.yml b/.github/workflows/android_integration_tests.yml index de7713de..09b9f911 100644 --- a/.github/workflows/android_integration_tests.yml +++ b/.github/workflows/android_integration_tests.yml @@ -31,7 +31,7 @@ jobs: - name: Install NodeJS uses: actions/setup-node@v3 with: - node-version: '16.17.0' + node-version: '18.17.1' cache: 'yarn' # install project dependencies diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 00000000..67076105 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,7 @@ +{ + "quoteProps": "consistent", + "singleQuote": true, + "tabWidth": 2, + "trailingComma": "es5", + "useTabs": false +} diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 00000000..9a88f0ab --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,16 @@ +# Contributing + +## Contributing to Code +Before contributing, please read through the [Klarna Mobile SDK documentation](https://docs.klarna.com/mobile-sdk/). + +### Branching +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: + +* **feature/** if the branch contains a new feature, for example: `feature/my-shiny-feature`. +* **bugfix/** if the branch contains a bug fix, for example: `bugfix/my-bug-fix`. + +### Pull Requests +When creating a PR, please 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: + +* **A clear and descriptive title**. +* **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**. diff --git a/Gemfile b/Gemfile index 11f36e3e..f99ba64d 100644 --- a/Gemfile +++ b/Gemfile @@ -1,8 +1,8 @@ source 'https://rubygems.org' # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version -ruby '2.7.5' +ruby '>= 2.7.5' -gem 'cocoapods', '~> 1.11', '>= 1.11.2' -gem "fastlane" -gem "xcode-install" +gem 'cocoapods', '~> 1.12' +gem 'fastlane' +gem 'xcode-install' diff --git a/Gemfile.lock b/Gemfile.lock index 479686b6..4490d628 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,15 +1,14 @@ GEM remote: https://rubygems.org/ specs: - CFPropertyList (3.0.5) + CFPropertyList (3.0.6) rexml - activesupport (6.1.7.3) + activesupport (7.0.8) concurrent-ruby (~> 1.0, >= 1.0.2) i18n (>= 1.6, < 2) minitest (>= 5.1) tzinfo (~> 2.0) - zeitwerk (~> 2.3) - addressable (2.8.1) + addressable (2.8.5) public_suffix (>= 2.0.2, < 6.0) algoliasearch (1.27.5) httpclient (~> 2.8, >= 2.8.3) @@ -17,32 +16,32 @@ GEM artifactory (3.0.15) atomos (0.1.3) aws-eventstream (1.2.0) - aws-partitions (1.626.0) - aws-sdk-core (3.142.0) + aws-partitions (1.824.0) + aws-sdk-core (3.181.1) aws-eventstream (~> 1, >= 1.0.2) - aws-partitions (~> 1, >= 1.525.0) - aws-sigv4 (~> 1.1) + aws-partitions (~> 1, >= 1.651.0) + aws-sigv4 (~> 1.5) jmespath (~> 1, >= 1.6.1) - aws-sdk-kms (1.58.0) - aws-sdk-core (~> 3, >= 3.127.0) + aws-sdk-kms (1.71.0) + aws-sdk-core (~> 3, >= 3.177.0) aws-sigv4 (~> 1.1) - aws-sdk-s3 (1.114.0) - aws-sdk-core (~> 3, >= 3.127.0) + aws-sdk-s3 (1.134.0) + aws-sdk-core (~> 3, >= 3.181.0) aws-sdk-kms (~> 1) - aws-sigv4 (~> 1.4) - aws-sigv4 (1.5.1) + aws-sigv4 (~> 1.6) + aws-sigv4 (1.6.0) aws-eventstream (~> 1, >= 1.0.2) babosa (1.0.4) claide (1.1.0) - cocoapods (1.11.3) + cocoapods (1.12.1) addressable (~> 2.8) claide (>= 1.0.2, < 2.0) - cocoapods-core (= 1.11.3) + cocoapods-core (= 1.12.1) cocoapods-deintegrate (>= 1.0.3, < 2.0) - cocoapods-downloader (>= 1.4.0, < 2.0) + cocoapods-downloader (>= 1.6.0, < 2.0) cocoapods-plugins (>= 1.0.0, < 2.0) cocoapods-search (>= 1.0.0, < 2.0) - cocoapods-trunk (>= 1.4.0, < 2.0) + cocoapods-trunk (>= 1.6.0, < 2.0) cocoapods-try (>= 1.1.0, < 2.0) colored2 (~> 3.1) escape (~> 0.0.4) @@ -50,10 +49,10 @@ GEM gh_inspector (~> 1.0) molinillo (~> 0.8.0) nap (~> 1.0) - ruby-macho (>= 1.0, < 3.0) + ruby-macho (>= 2.3.0, < 3.0) xcodeproj (>= 1.21.0, < 2.0) - cocoapods-core (1.11.3) - activesupport (>= 5.0, < 7) + cocoapods-core (1.12.1) + activesupport (>= 5.0, < 8) addressable (~> 2.8) algoliasearch (~> 1.0) concurrent-ruby (~> 1.1) @@ -77,17 +76,17 @@ GEM highline (~> 2.0.0) concurrent-ruby (1.2.2) declarative (0.0.20) - digest-crc (0.6.4) + digest-crc (0.6.5) rake (>= 12.0.0, < 14.0.0) domain_name (0.5.20190701) unf (>= 0.0.5, < 1.0.0) dotenv (2.8.1) emoji_regex (3.2.3) escape (0.0.4) - ethon (0.15.0) + ethon (0.16.0) ffi (>= 1.15.0) - excon (0.92.4) - faraday (1.10.2) + excon (0.103.0) + faraday (1.10.3) faraday-em_http (~> 1.0) faraday-em_synchrony (~> 1.0) faraday-excon (~> 1.1) @@ -115,8 +114,8 @@ GEM faraday-retry (1.0.3) faraday_middleware (1.2.0) faraday (~> 1.0) - fastimage (2.2.6) - fastlane (2.209.1) + fastimage (2.2.7) + fastlane (2.215.1) CFPropertyList (>= 2.3, < 4.0.0) addressable (>= 2.8, < 3.0.0) artifactory (~> 3.0) @@ -137,10 +136,11 @@ GEM google-apis-playcustomapp_v1 (~> 0.1) google-cloud-storage (~> 1.31) highline (~> 2.0) + http-cookie (~> 1.0.5) json (< 3.0.0) jwt (>= 2.1.0, < 3) mini_magick (>= 4.9.4, < 5.0.0) - multipart-post (~> 2.0.0) + multipart-post (>= 2.0.0, < 3.0.0) naturally (~> 2.2) optparse (~> 0.1.1) plist (>= 3.1.0, < 4.0.0) @@ -148,7 +148,7 @@ GEM security (= 0.1.3) simctl (~> 1.6.3) terminal-notifier (>= 2.0.0, < 3.0.0) - terminal-table (>= 1.4.5, < 2.0.0) + terminal-table (~> 3) tty-screen (>= 0.6.3, < 1.0.0) tty-spinner (>= 0.8.0, < 1.0.0) word_wrap (~> 1.0.0) @@ -159,9 +159,9 @@ GEM fourflusher (2.3.1) fuzzy_match (2.0.4) gh_inspector (1.1.3) - google-apis-androidpublisher_v3 (0.25.0) - google-apis-core (>= 0.7, < 2.a) - google-apis-core (0.7.0) + google-apis-androidpublisher_v3 (0.49.0) + google-apis-core (>= 0.11.0, < 2.a) + google-apis-core (0.11.1) addressable (~> 2.5, >= 2.5.1) googleauth (>= 0.16.2, < 2.a) httpclient (>= 2.8.1, < 3.a) @@ -170,30 +170,29 @@ GEM retriable (>= 2.0, < 4.a) rexml webrick - google-apis-iamcredentials_v1 (0.13.0) - google-apis-core (>= 0.7, < 2.a) - google-apis-playcustomapp_v1 (0.10.0) - google-apis-core (>= 0.7, < 2.a) - google-apis-storage_v1 (0.17.0) - google-apis-core (>= 0.7, < 2.a) + google-apis-iamcredentials_v1 (0.17.0) + google-apis-core (>= 0.11.0, < 2.a) + google-apis-playcustomapp_v1 (0.13.0) + google-apis-core (>= 0.11.0, < 2.a) + google-apis-storage_v1 (0.19.0) + google-apis-core (>= 0.9.0, < 2.a) google-cloud-core (1.6.0) google-cloud-env (~> 1.0) google-cloud-errors (~> 1.0) google-cloud-env (1.6.0) faraday (>= 0.17.3, < 3.0) - google-cloud-errors (1.2.0) - google-cloud-storage (1.39.0) + google-cloud-errors (1.3.1) + google-cloud-storage (1.44.0) addressable (~> 2.8) digest-crc (~> 0.4) google-apis-iamcredentials_v1 (~> 0.1) - google-apis-storage_v1 (~> 0.17.0) + google-apis-storage_v1 (~> 0.19.0) google-cloud-core (~> 1.6) googleauth (>= 0.16.2, < 2.a) mini_mime (~> 1.0) - googleauth (1.2.0) + googleauth (1.8.0) faraday (>= 0.17.3, < 3.a) jwt (>= 1.4, < 3.0) - memoist (~> 0.16) multi_json (~> 1.11) os (>= 0.9, < 2.0) signet (>= 0.16, < 2.a) @@ -201,25 +200,24 @@ GEM http-cookie (1.0.5) domain_name (~> 0.5) httpclient (2.8.3) - i18n (1.12.0) + i18n (1.14.1) concurrent-ruby (~> 1.0) - jmespath (1.6.1) - json (2.6.2) - jwt (2.5.0) - memoist (0.16.2) - mini_magick (4.11.0) - mini_mime (1.1.2) - minitest (5.18.0) + jmespath (1.6.2) + json (2.6.3) + jwt (2.7.1) + mini_magick (4.12.0) + mini_mime (1.1.5) + minitest (5.20.0) molinillo (0.8.0) multi_json (1.15.0) - multipart-post (2.0.0) + multipart-post (2.3.0) nanaimo (0.3.0) nap (1.1.0) naturally (2.2.1) netrc (0.11.0) optparse (0.1.1) os (1.1.4) - plist (3.6.0) + plist (3.7.0) public_suffix (4.0.7) rake (13.0.6) representable (3.2.0) @@ -227,23 +225,23 @@ GEM trailblazer-option (>= 0.1.1, < 0.2.0) uber (< 0.2.0) retriable (3.1.2) - rexml (3.2.5) + rexml (3.2.6) rouge (2.0.7) ruby-macho (2.5.1) ruby2_keywords (0.0.5) rubyzip (2.3.2) security (0.1.3) - signet (0.17.0) + signet (0.18.0) addressable (~> 2.8) faraday (>= 0.17.5, < 3.a) jwt (>= 1.5, < 3.0) multi_json (~> 1.10) - simctl (1.6.8) + simctl (1.6.10) CFPropertyList naturally terminal-notifier (2.0.0) - terminal-table (1.8.0) - unicode-display_width (~> 1.1, >= 1.1.1) + terminal-table (3.0.2) + unicode-display_width (>= 1.1.1, < 3) trailblazer-option (0.1.2) tty-cursor (0.7.1) tty-screen (0.8.1) @@ -257,8 +255,8 @@ GEM unf (0.1.4) unf_ext unf_ext (0.0.8.2) - unicode-display_width (1.8.0) - webrick (1.7.0) + unicode-display_width (2.4.2) + webrick (1.8.1) word_wrap (1.0.0) xcode-install (2.8.1) claide (>= 0.9.1) @@ -274,18 +272,17 @@ GEM rouge (~> 2.0.7) xcpretty-travis-formatter (1.0.1) xcpretty (~> 0.2, >= 0.0.7) - zeitwerk (2.6.7) PLATFORMS - ruby + arm64-darwin-21 DEPENDENCIES - cocoapods (~> 1.11, >= 1.11.2) + cocoapods (~> 1.12) fastlane xcode-install RUBY VERSION - ruby 2.7.5p203 + ruby 3.0.0p0 BUNDLED WITH - 2.1.4 + 2.2.3 diff --git a/README.md b/README.md index 24f13670..b3980a65 100644 --- a/README.md +++ b/README.md @@ -1,177 +1,133 @@ -# React Native Klarna In-App SDK +# Klarna Mobile SDK React Native -![](https://img.shields.io/github/license/klarna/react-native-klarna-inapp-sdk) -![](https://img.shields.io/npm/v/react-native-klarna-inapp-sdk) -![](https://img.shields.io/npm/dependency-version/react-native-klarna-inapp-sdk/peer/react-native) +[![NPM][npm-badge]][npm-url] +[![React Native][dependency-badge]][dependency-url] +[![Platforms][platforms-badge]][platforms-url] +[![License][license-badge]][license-url] +[![Developed at Klarna][klarna-badge]][klarna-url] -This library wraps Klarna's In-App SDK and exposes its functionality as React Native components. It +This library wraps Klarna Mobile SDK and exposes its functionality as React Native components. It currently supports Klarna Payments via a Payment View component. This repository also includes a test application that you can use to see how it works. -**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. +### SDK for Other Platforms + +* [Android](https://github.com/klarna/klarna-mobile-sdk) +* [iOS](https://github.com/klarna/klarna-mobile-sdk) +* [Flutter](https://github.com/klarna/klarna-mobile-sdk-flutter) ## Requirements * iOS 10 or later. * Android 4.4 or later. -### Klarna In-App SDK documentation -[Overview of the SDK](https://developers.klarna.com/documentation/in-app/) - -## What Does React Native Klarna In-App SDK Offer? -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. - -### Why should you use the SDK? -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: +### Documentations -* **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. -* **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. -* **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. -* **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. +* [Overview](https://docs.klarna.com/mobile-sdk/) +* [Android](https://docs.klarna.com/mobile-sdk/android/) +* [iOS](https://docs.klarna.com/mobile-sdk/ios/) +* [React Native](https://docs.klarna.com/mobile-sdk/reactnative/) ## Getting started -`$ npm install react-native-klarna-inapp-sdk --save` - -### Mostly automatic installation - -`$ react-native link react-native-klarna-inapp-sdk` - -### Manual installation - - -#### iOS - -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. +### Add Dependency -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.12` 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`. +#### NPM -**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: -* In XCode, create a new .swift file in the project. -* A prompt window would ask you if you want to configure the Bridging Header, choose `yes`. -* Clean the project and DerivedData. -* Build the project. +```shell +npm install react-native-klarna-inapp-sdk --save +``` -#### Android +#### Yarn -1. 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 the `getPackages()` method -2. Append the following lines to `android/settings.gradle`: - ``` - 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`: - ``` - implementation project(':react-native-klarna-inapp-sdk') - ``` - -**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). +```shell +yarn add react-native-klarna-inapp-sdk +``` ### Warning regarding Android integration -Both the iOS and Android integrations depend on the native SDK. +Both the iOS and Android integrations depend on the native SDK. 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'll need to add a -reference to the repository in your own app's `build.gradle`. +be recognized in the Android project's `build.gradle`. To address this, you'll need to add a +reference to the repository in your own app's `build.gradle`. -You can do it by adding the lines between the comments below: +You can do it by adding the lines between the comments below: -```gradle +```groovy allprojects { repositories { - mavenLocal() - maven { - // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm - url("$rootDir/../node_modules/react-native/android") - } - maven { - // Android JSC is installed from npm - url("$rootDir/../node_modules/jsc-android/dist") - } - google() - mavenCentral { - // We don't want to fetch react-native from Maven Central as there are - // older versions over there. - content { - excludeGroup "com.facebook.react" - } - } - // Add the lines below vvv + ... + // Add the lines below maven { url 'https://x.klarnacdn.net/mobile-sdk/' } - // Add the lines above ^^^ } } - ``` --- ## Usage -You can import the `KlarnaPaymentView` from the library. You'll then be able to add it as a +You can import the `KlarnaPaymentView` from the library. You'll then be able to add it as a component to your app. This component exposes callbacks as props and methods you can call via the -compoent's ref. +component's ref. -The view will self-size height-wise and grow it fill it containing view's width. +The view will self-size height-wise and grow it fill it containing view's width. ### Props It has the following props: -| Name | Type | Description | -| --- | --- | --- | -| `category` | `String` | The payment method category you want to render in your view.| -| `onInitialized` | `() => {}` | The initialize call succeeded.| -| `onLoaded` | `() => {}` | The load call succeeded.| -| `onLoadedPaymentReview` | `() => {}` | The load payment review call succeeded.| -| `onAuthorized` | `({}) => {}` | The authorize call succeeded.| -| `onReauthorized` | `({}) => {}` | The reauthorize call succeeded.| -| `onFinalized` | `({}) => {}` | The finalize call succeeded.| -| `onError` | `({}) => {}` | An error occurred.| +| Name | Type | Description | +|-------------------------| --- |-------------------------------------------------------------------------------| +| `category` | `String` | The payment method category you want to render in your view. | +| `returnUrl` | `String` | An app-defined URL scheme the component uses to return customers to your app. | +| `onInitialized` | `() => {}` | The initialize call completed. | +| `onLoaded` | `() => {}` | The load call completed. | +| `onLoadedPaymentReview` | `() => {}` | The load payment review call completed. | +| `onAuthorized` | `(approved, authToken, finalizeRequired) => {}` | The authorize call completed. | +| `onReauthorized` | `(approved, authToken) => {}` | The reauthorize call completed. | +| `onFinalized` | `(approved, authToken) => {}` | The finalize call completed. | +| `onError` | `(error) => {}` | An error occurred. | --- + +#### Return URL + +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). + --- ### Prop callback parameters -The `onAuthorized`, `onReauthorized`, `onFinalized` and `onError` will provide an object (via -`nativeEvent`) with the following parameters: - --- -#### authorized: `Boolean` +#### approved: `boolean` -Determines whether the previous operation was successful and yielded an authorization token. +Determines whether the previous operation was successful and yielded an authorization token. ##### Available on: - `onAuthorized` -- `onReauthorized` -- `onFinalized` +- `onReauthorized` +- `onFinalized` --- -#### authToken: `String / undefined` +#### authToken: `string | null` If `authorize()`, `reauthorize()` or `finalize()` succeeded, they will return a token you can submit to your backend. ##### Available on: - `onAuthorized` -- `onReauthorized` -- `onFinalized` +- `onReauthorized` +- `onFinalized` --- -#### finalizeRequired: `Boolean / undefined` +#### finalizeRequired: `boolean | null` If `authorize()` requires that you additionally call `finalize()`, . @@ -180,9 +136,10 @@ If `authorize()` requires that you additionally call `finalize()`, . --- -#### error: `Object / undefined` +#### error: `KlarnaPaymentsSDKError` -If a method failed, `onError()` will let you know via an error object. +If a method failed, `onError()` will let you know via an error object. Contains `name`, `message`, +`action`, `isFatal`, `sessionId` properties. ##### Available on: - `onError` @@ -198,19 +155,14 @@ below example how these can be called. The methods are the following: --- #### initialize() -Initializes the view with a session token. You have to have added the view to your application and +Initializes the view with a session token. You have to have added the view to your application and supplied a payment method category. ##### Parameters -| Name | Type | Description | -| ---- | ---- | ----------- | -| sessionToken | `String` | The session token you get from Klarna.| -| returnUrl | `String` | An app-defined URL scheme the component uses to return customers to your app.| - -##### Return URL - -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). +| Name | Type | Description | +|---------|----------|--------------------------------------------------| +| clientToken | `string` | The client token you get from Klarna Payments API. | --- @@ -219,16 +171,16 @@ Loads the view. This will render content in the view. ##### Parameters -| Name | Type | Description | -| ---- | ---- | ----------- | -| sessionData | `String / undefined` | A JSON object with updated session data serialized into a string.| +| Name | Type | Description | +| ---- |-----------------------|------------| +| sessionData | `string \| undefined` | A JSON object with updated session data serialized into a string.| --- #### loadPaymentReview() -Renders a description of the payment terms your customer has agreed to. +Renders a description of the payment terms your customer has agreed to. -Once a session is authorized, you can then either render a payment review in the existing +Once a session is authorized, you can then either render a payment review in the existing payment view or `initialize()` a new payment view with the same session token and call this method. ##### Note: @@ -241,10 +193,10 @@ Authorizes the payment session. ##### Parameters -| Name | Type | Description | -| ---- | ---- | ----------- | -| autoFinalize | `Boolean / undefined` | A flag used to turn on/off auto-finalization for direct bank transfer.| -| sessionData | `String / undefined` | A JSON object with updated session data serialized into a string.| +| Name | Type | Description | +| ---- |------------------------|----------------------------------------------------------------------| +| autoFinalize | `boolean \| undefined` | A flag used to turn on/off auto-finalization for direct bank transfer. | +| sessionData | `string \| undefined` | A JSON object with updated session data serialized into a string.| --- @@ -254,9 +206,9 @@ the session and get a new authorization token. ##### Parameters -| Name | Type | Description | -| ---- | ---- | ----------- | -| sessionData | `String / undefined` | A JSON object with updated session data serialized into a string.| +| Name | Type | Description | +| ---- |-----------------------| ----------- | +| sessionData | `string \| undefined` | A JSON object with updated session data serialized into a string.| --- @@ -266,155 +218,33 @@ ready. ##### Parameters -| Name | Type | Description | -| ---- | ---- | ----------- | -| sessionData | `String / undefined` | A JSON object with updated session data serialized into a string.| +| Name | Type | Description | +| ---- |-----------------------|------------| +| sessionData | `String \| undefined` | A JSON object with updated session data serialized into a string.| --- -### More information - -You can read more about refs and how they're used [here](https://reactjs.org/docs/refs-and-the-dom.html). -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/). - - ---- ---- - -## Example - -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. - -```jsx -import KlarnaPaymentView from 'react-native-klarna-inapp-sdk'; - -class MyCheckoutView extends React.Component { - - constructor(props) { - super(props); - this.state = { - paymentViewLoaded: false - }; - } - - componentDidMount() { - // To initialize the component, you'll need call the component's initialize method with your - // backend's session token and a return URL for your application. - // - // This should occur at some point when the payment view is added to your application's view, - // but it should only be repeated if initialization fails. - this.refs['my_ref'].initialize('my_session_token', 'my_apps_return_url') - } - - onInitialized = () => { - // Once the view is initialized, you can render content into it. - this.refs['my_ref'].load() - } - - onLoaded = () => { - // Once the view is loaded, the user should be able to see the payment method. They can then - // choose to use it (it's up to you to determine how that is recognized) and tap a "buy-like" - // button. - this.setState({paymentViewLoaded: true}) - } - - buyButtonPressed = () => { - // When the button is tapped, call authorize() on the view. - this.refs['my_ref'].authorize() - } - - onAuthorized = (event) => { - // If successfully authorized, the authorization token can be used by your backend to create - // an order. - // - // You can also load a payment review view to allow the user to evaluate their - // payment choice. - let params = event.nativeEvent - - if (params.authorized) { - submitAuthToken(params.authToken) - } - } - - render() { - return( - // Other parts of the view - // ... - // The payment view - - // ... - // Your buy button -