React Native

How to integrate

Lean's React Native SDK is available as a package under the name lean-react-native via npm or yarn

yarn add lean-react-native

npm install lean-react-native

If you don't already have react-native-webview added to your project you should also install it:

yarn add react-native-webview

npm install --save react-native-webview

New you need to update your pods by navigating to the iOS folder:

cd ios
pod install

Usage

You need to create a ref to the LinkSDK component in order to call any of the LinkSDK functions like so:

import React, { useRef } from 'react'
import { View, TouchableOpacity, Text } from 'react-native'
import LinkSDK from 'lean-react-native'

const App = () => {
    const Lean = useRef(null)

    return (
        <View>
            <TouchableOpacity 
                onPress={() => Lean.current.connect({ customer_id: "CUSTOMER_ID" })}
            >
                <Text>Connect Account</Text>
            </TouchableOpacity>

            <LinkSDK
                ref={Lean}
                appToken="MY_APP_TOKEN"
                version="{version_number}"
                country="{country_of_operation}"
                sandbox
            />
        </View>
    )
}

export default App

Choosing a version

When calling Lean.manager.setup a version is required.

Version takes a String and can point to either a specific SDK version i.e. "latest" or an alias i.e. "latest".

Lean.manager.setup(
    appToken: String,
    sandbox: true,
    version: "latest"
    )

📘
We recommend passing in a specific version to ensure stability in the case that a change to the SDK breaks your application.

Available Versions

Specific Version semver

The current stable build is 1.25.0

latest alias

latest is an alias for the current release. It is subject to change at relatively short notice - but does allow for any bug fixes to be shipped over the air - meaning fixes can be applied without the need to resubmit your application to the app store.

next-release alias

next-release is a QA version of the SDK allowing you to test the next version that will become latest before we roll out the changes, this should only be used for development and QA purposes as it is subject to breakage without any warning.

Available Methods

.connect()

The connect method is used to enable a customer to use a single log in to create and Entity and a PaymentSource for use with the Data API and Payments API respectively.

Lean.current.connect({
  app_token: "YOUR_APP_ID",
  customer_id: "YOUR_CUSTOMER_ID",
  permissions: ["identity", "accounts", "balance", "transactions", "identities", 
      "scheduledPayments", "standingOrders", "directDebits", "beneficiaries"],
  bank_identifier: "LEAN_MB1",
  sandbox: "false",
  callback: myCallback,
  fail_redirect_url: "YOUR_FAIL_REDIRECT_URL",
  success_redirect_url: "YOUR_SUCCESS_REDIRECT_URL"
})

Callbacks

By providing a callback into the component, the LinkSDK will report back with the below object on SDK close, completion or error.

Response

The responseObject returned to your callback function is in the following format:

{
  "status": "SUCCESS",
  "message": "User successfully connected their account",
  "last_api_response": "SUCCESS",
  "exit_point": "SUCCESS",
  "secondary_status": "SUCCESS",
  "bank": {
    "bank_identifier": "LEA1_RETAIL_SAU",
    "is_supported": true
  }
}

status enum
The end status of the LinkSDK at close.

Status	Reason
`SUCCESS`	The initiated flow was completed successfully
`CANCELLED`	The initiated flow was cancelled by the user
`ERROR`	The SDK or user experienced an error - the details for the error are available in the message and `secondary_status`.

message string

Further details on the end state. May be null.

last_api_response string

Details on the last response status from the Lean API. May be null.

exit_point enum

The last screen displayed before the user exited the SDK.

value	screen
`INITIAL`	The first screen displayed to users
`BANK_SELECTION`	The bank list screen
`OPEN_BANKING`	Open banking redirect initiation
`UNSUPPORTED_BANK_REQUEST`	The unsupported bank list screen
`SUCCESS`	The success screen
`FAIL`	The failure screen

secondary_status enum

Further details on failures. May be null.

bank object

Details on the bank selected by the user.


bank.bank_identifier `enum`	The Lean identifier for the bank.
bank.is_supported `bool`	Whether the bank is supported by Lean or not (is false when a user selects a bank through the 'My bank is not listed' button)

bank.bank_identifier

enum

The Lean identifier for the bank.

bank.is_supported

bool

Whether the bank is supported by Lean or not (is false when a user selects a bank through the 'My bank is not listed' button)

Unsupported banks

Your users can indicate that their bank is not supported. When this happens, the callback from the LinkSDK will contain a false flag in the bank object.

{
  "status": "CANCELLED",
  "message": "User cancelled the operation",
  "exit_point": "UNSUPPORTED_BANK_REQUEST_SUCCESS",
  "last_api_response": "CANCELLED",
  "secondary_status": "CANCELLED",
  "bank": {
    "bank_identifier": "LEA1_MOCK_RETAIL_SAU",
    "is_supported": false
  }
}

Skip Bank List

In some use cases you may want to provide your own UI for the bank selection screen in the LinkSDK. This can be achieved by passing in a bank_identifier during the `.connect() flows.

You can get a list of available bank_identifiers for your application by making a call to the /banks/ endpoint.

Call:

curl -X GET 'https://api.sa.leantech.me/banks/v1/' \
  --header 'lean-app-token: 2c9a80897169b1dd01716a0339e30003' \
  --ca-cert ca.pem \
  --cert cert.crt \
  --key key.pem

Response:

[
	{
		"identifier": "LEA1_RETAIL_SAU",
		"name": "Lean Open Banking MockBank",
		"logo": "https://cdn.leantech.me/img/banks/white-lean.png",
		"logo_alt": "https://cdn.leantech.me/img/banks/white-lean.svg",
		"main_color": "#1beb75",
		"background_color": "#ffffff",
		"theme": "light",
		"country_code": "SAU",
		"active": true,
		"mock": true,
		"bank_type": "RETAIL",
		"traits": [
			"auth-redirect"
		],
		"supported_account_types": [
			"CREDIT",
			"SAVINGS",
			"CURRENT"
		]
	}
]

You can then use the bank identifier directly with the LinkSDK to skip the bank selection screen:

Lean.connect({
  app_token: "Your App Token",
  permissions: [
    "identity", "accounts", "balance", "transactions", "identities", 
    "scheduled_payments", "standing_orders", "direct_debits", "beneficiaries"
  ],
  customer_id: "Your Customer ID",
  sandbox: "true",
  bank_identifier: "LEA1_RETAIL_SAU",
  fail_redirect_url: "YOUR_FAIL_REDIRECT_URL",
  success_redirect_url: "YOUR_SUCCESS_REDIRECT_URL",
});

Changing the SDK language

Link SDK is available in English and Arabic, fully supported with a right-to-left UI, including text alignment, icons and images. If no language is provided the default is English.

Lean.connect({
  app_token: "2c9a80897169b1dd01716a0339e30003",
  customer_id: "552e8102b3c14401a36ac14fadab94de",
  permissions: ["identity","accounts","balance","transactions", "identities", "scheduledPayments", "standingOrders", "directDebits", "beneficiaries"],
  sandbox: true,
  fail_redirect_url: "YOUR_FAIL_REDIRECT_URL",
  success_redirect_url: "YOUR_SUCCESS_REDIRECT_URL",
  language: "ar"
});

Language option

language enum


`en`	English
`ar`	Arabic

Troubleshooting

Webview crashes on Android

You can disable hardware acceleration on the webview by passing android specific props into the webview:

<LinkSDK
    webViewProps={{
        androidHardwareAccelerationDisabled: true,
    }}
    appToken: "YOUR_APP_TOKEN"
    sandbox: false
>

JDK version issues on Android

You may get gradle errors if you have a different JDK on the development system compared to the local JDK delivered with the Android SDK. The solution is to set set JAVA_HOME in gradlew or gradlew.bat to point to the SDK JDK path. On Windows:

SET JAVA_HOME="\Program Files\Android\Android Studio\jre"