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
Now 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
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.
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 exits the SDK.
value | screen |
---|---|
INITIAL | The first screen displayed to users |
RECONNECT_INITIAL | The first screen displayed to users when using .reconnect() |
BANK_SELECTION | The bank list screen |
OPEN_BANKING | Open banking redirect initiation |
CONSENT | The permissions screen |
CREDENTIALS | The login detail entry screen |
CREDENTIALS_UPDATE | The re-entry form for login details when credentials are outdated |
MFA | The OTP entry screen |
OPEN_BANKING_ENABLE_PAYMENTS | Open banking redirect initiation for payments |
PAYMENT_SOURCES | The screen that lists all a user's payment sources before payment initiation |
UPDATE_PAYMENT_SOURCE | The update-payment-source consent screen |
PAYMENT_DETAILS | The payment initiation screen |
SECURITY_QUESTION | The security question answer form |
MFA_INSTRUCTIONS | The instructions for entering an OTP |
UNSUPPORTED_BANK_REQUEST | The unsupported bank list screen |
SUCCESS | The success screen |
FAIL | The failure screen |
secondary_status enum
Further details on failures e.g. INVALID_CREDENTIALS
. Maybe 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) |
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
en | English |
ar | Arabic |
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.
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:
Value | Style |
---|---|
"4" | default |
"8" | Border radius of 8px |
"0" | Rectangle button |
"pill" | Always pill-shaped, whatever the button height |
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 the 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:
Example | Format |
---|---|
"#000000" | Hex |
"#000" | Shorthand hex |
"#000000FF" | Hex with alpha |
"rgb(0, 0, 0)" | Comma separated RGB |
"rgba(0, 0, 0, 0.5)" | Comma-separated RGB with Alpha |
"black" | Color name |
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 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"
Updated 9 months ago