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.

www.npmjs.com/package/lean-react-native

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

The current stable build

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.

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({
  customer_id: "YOUR_CUSTOMER_ID",
  permissions: ["identity","accounts","balance","transactions", "payments"],
  payment_destination_id: "PAYMENT_DEST_ID",
})

.reconnect()

The reconnect method is used to re-authenticate a customer account with the Data API.

Lean.current.reconnect({
  reconnect_id: "RECONNECT_ID"
})

.createBeneficiary()

The createBeneficiary method is used to authorize an additional payment destination for an existing payment source in the Payments API.

NOTE: We have renamed the updatePaymentSource() method on the Link SDK. It will now be called createBeneficiary(). The updatePaymentSource() method is now deprecated. Please use the new link method as detailed below.

Lean.current.updatePaymentSource({ 
  customer_id: "CUSTOMER_ID",
  payment_source_id: "PAYMENT_SOURCE_ID",
  payment_destination_id: "PAYMENT_DESTINATION_ID"
})

.pay()

The pay method is used to make a bank to bank transfer from your customer's account to your account in the Payments API.

Lean.current.pay({ 
  payment_intent_id: "PAYMENT_INTENT_ID",
  account_id: "ACCOUNT_ID"
})

The show_balances parameter is optional and allows you to show/hide the balances of bank accounts when an end user is going through the payment authorization flow. It's RECOMMENDED to always "HIDE" the balances.

📘

Attention!

The authorize() method only applies to the Corporate Payment flow.

.authorize()

Lean.current.authorize({
    payment_intent_id: "452bcde4-5e48-44bb-8f6d-40c5c286466b",
    customer_id: "d57a03bc-ef9d-460b-8fa6-3b17e425326c",
    end_user_id: "d23fb2bb-652a-4a2e-b1f0-796ad24f4290"
});

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.

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.

secondary_status enum

Further details on failures e.g. INVALID_CREDENTIALS. May be null.

bank object

Details on the bank selected by the user.

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": "AHB_UAE",
    "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() flow.

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.leantech.me/banks/v1/' \
  --header 'lean-app-token: 2c9a80897169b1dd01716a0339e30003'

Response:

[
    {
        "id": 13,
        "identifier": "FAB_UAE",
        "name": "First Abu Dhabi Bank",
        "main_color": "#ffffff",
        "background_color": "#00458A",
        "theme": "light",
        "country_code": "UAE",
        "active": true,
        "traits": [
            "user-input-on-login",
            "auth-credentials"
        ],
        "supported_account_types": [
            "CREDIT",
            "SAVINGS",
            "CURRENT"
        ]
    },
    {
        "id": 12,
        "identifier": "LEANMB1",
        "name": "Lean Mock Bank",
        "main_color": "#FDB813",
        "background_color": "#06357A",
        "theme": "light",
        "country_code": "UAE",
        "active": true,
        "traits": [
            "auth-credentials"
        ],
        "supported_account_types": [
            "CREDIT",
            "SAVINGS",
            "CURRENT"
        ]
    }

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

Lean.current.connect({
  customer_id: "YOUR_CUSTOMER_ID",
  permissions: ["identity","accounts","balance","transactions", "payments"],
  bank_identifier: "LEAN_MB1",
  payment_destination_id: "PAYMENT_DEST_ID",
})

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.current.connect({
  customer_id: "YOUR_CUSTOMER_ID",
  permissions: ["identity","accounts","balance","transactions", "payments"],
  bank_identifier: "LEAN_MB1",
  payment_destination_id: "PAYMENT_DEST_ID",
  language: "ar"
})

Language option

language enum

Customizing Link SDK

We are progressively releasing customization capabilities to the Link SDK to match its UI with your application branding style. This allows customers to programmatically theme the Link SDK directly from any of the methods.

For more detailed documentation on how best to use the customization feature see our guides.

Customisation Guide

Presentation options

dialog_mode string

Presents the Link SDK with or without a containing modal.

"contained" for modal (default), or "uncontained" for no modal.

button_border_radius string

Change the shape of the main button on each step. See guidance for examples.

A unitless number as a String. Options:

Color options

theme_color string

Buttons background color, active input borders, and loading spinners.

button_text_color string

Elements inside any primary button such as the text, icons and the loading spinner. It is useful to boost readability of the button color.

link_color string

CTAs and helpers.

overlay_color string

Overlay containing the Link SDK dialog box.

The following color formats are supported:

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"