How to integrate

To integrate Lean’s Link SDK, you first need to add the SDK to your front-end by importing it as follows:

<script src="https://cdn.leantech.me/link/sdk/web/latest/Lean.min.js" />

You will then need to include the following div within your body:

<div id="lean-link"></div>

This will enable you to call Lean globally in your application.

Available Methods

.connect()

The connect method is used to connect a customer to both the Payments and Data API. You can use this method to generate a Payment Source and an Entity with a single customer login.

Lean.connect({
  app_token: "2c9a80897169b1dd01716a0339e30003",
  permissions: ["identity", "accounts", "transactions", "balance", "payments"],
  customer_id: "d57a03bc-ef9d-460b-8fa6-3b17e425326c",
  payment_destination_id: "f8d6fe12-5cc3-4df2-82c2-48b4dd6f74a7",
  sandbox: "true",
});

.reconnect()

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

Lean.reconnect({
  app_token: "2c9a80897169b1dd01716a0339e30003",
  reconnect_id: "e9521dc4-adc6-4c09-9994-f8b13f28db85",
  sandbox: "true",
});

.createPaymentSource()

The createPaymentSource method is used to connect a bank account as a payment method to your application in the Payments API.

Lean.createPaymentSource({
  app_token: "2c9a80897169b1dd01716a0339e30003",
  customer_id: "d57a03bc-ef9d-460b-8fa6-3b17e425326c",
  payment_destination_id: "f8d6fe12-5cc3-4df2-82c2-48b4dd6f74a7",
  sandbox: "true",
});

.updatePaymentSource()

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

Lean.updatePaymentSource({
  app_token: "2c9a80897169b1dd01716a0339e30003",
  customer_id: "d57a03bc-ef9d-460b-8fa6-3b17e425326c",
  payment_source_id: "88d7aefe-aae6-4eb3-a314-6e60e73fda35",
  payment_destination_id: "f8d6fe12-5cc3-4df2-82c2-48b4dd6f74a7",
  sandbox: "true",
});

.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.pay({
    app_token: "2c9a80897169b1dd01716a0339e30003",
    payment_intent_id: "452bcde4-5e48-44bb-8f6d-40c5c286466b"
    sandbox: "true"
});

📘

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

.authorize()

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

Callback functions

The Web SDK takes an optional parameter for callback which allows you to recieve events on SDK close, completion or error.

function myCallback(responseObject) {
  console.log(responseObject);
  // insert actions you want to perform on SDK close
}

connectButton.addEventListener("click", function () {
  Lean.connect({
    app_token: "YOUR_APP_ID",
    permissions: ["identity", "accounts", "transactions", "balance"],
    customer_id: customerId.value,
    sandbox: "false",
    callback: myCallback,
  });
});

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": "ENBD_UAE",
    "is_supported": true
  }
}

status enum
The end status of the LinkSDK at close.

StatusReason
SUCCESSThe initiated flow was completed successfully
CANCELLEDThe initiated flow was cancelled by the user
ERRORThe 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.

valuescreen
INITIALThe first screen displayed to users
RECONNECT_INITIALThe first screen displayed to users when using .reconnect()
BANK_SELECTIONThe bank list screen
OPEN_BANKINGOpen banking redirect initiation
CONSENTThe permissions screen
CREDENTIALSThe login detail entry screen
CREDENTIALS_UPDATEThe re-entry form for login details when credentials are outdated
MFAThe OTP entry screen
OPEN_BANKING_ENABLE_PAYMENTSOpen banking redirect initiation for payments
PAYMENT_SOURCESThe screen that lists all a user's payment sources prior to payment initiation
UPDATE_PAYMENT_SOURCEThe update payment source consent screen
PAYMENT_DETAILSThe payment initiation screen
SECURITY_QUESTIONThe security question answer form
MFA_INSTRUCTIONSThe instructions for entering an OTP
UNSUPPORTED_BANK_REQUESTThe unsupported bank list screen
SUCCESSThe success screen
FAILThe failure screen

secondary_status enum

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

bank object

Details on the bank selected by the user.

bank.bank_identifier enumThe Lean identifier for the bank.
bank.is_supported boolWhether 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": "SUCCESS",
  "message": "User successfully connected their account",
  "last_api_response": "SUCCESS",
  "exit_point": "SUCCESS",
  "secondary_status": "SUCCESS",
  "bank": {
    "bank_identifier": "SIB_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() and .createPaymentSource()` 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.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": "ENBD_UAE",
        "name": "Emirates NBD",
        "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.connect({
  app_token: "2c9a80897169b1dd01716a0339e30003",
  permissions: ["identity", "accounts", "transactions", "balance"],
  customer_id: "552e8102b3c14401a36ac14fadab94de",
  sandbox: "true",
  bank_identifier: "ENBD_UAE",
});
Lean.createPaymentSource({
  app_token: "2c9a80897169b1dd01716a0339e30003",
  customer_id: "552e8102b3c14401a36ac14fadab94de",
  sandbox: "true",
  bank_identifier: "ENBD_UAE",
});

Skip Payment Source selection

In Some use cases, you may want to render your own list of Payment Sources - or have business logic around which payment source can be used to make a specific payment. In these cases, you can pass the accounts[n].id parameter from a Customer's Payment Source into the LinkSDK to skip the selection screen within the SDK.

How to get Payment Sources for a Customer

Lean.pay({
    app_token: "2c9a80897169b1dd01716a0339e30003",
    payment_intent_id: "452bcde4-5e48-44bb-8f6d-40c5c286466b"
    sandbox: "true",
    account_id: "ec02035e-bff8-4ada-832e-c3a71105ba48"
});

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: string,
  customer_id: string,
  permissions: ["identity", "balance", "accounts", "transactions"],
  sandbox: true,
  language: "ar"
});

Language option

language enum

enEnglish
arArabic

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:

ValueStyle
"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 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:

ExampleFormat
"#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

Content Security Policy (CSP)

In order to mitigate potential cross-site scripting issues, most modern browsers use a Content Security Policy (CSP). These policies might prevent the SDK from correctly displaying the images captured during the flow or correctly load styles. If CSP is blocking some of the SDK functionalities, make sure you add the following snippet inside the <head> tag of your application:

<meta
  http-equiv="Content-Security-Policy"
  content="
    default-src 'self' https://cdn.leantech.me;
    script-src 'self' https://cdn.leantech.me;
    style-src 'self' https://cdn.leantech.me;
    connect-src blob: https://link.sandbox.leantech.me https://link.leantech.me https://ipv4.icanhazip.com https://ipv6.icanhazip.com https://api.ipify.org https://api6.ipify.org https://graphql.contentful.com https://api.segment.io;
    img-src 'self' data: https://images.ctfassets.net http://images.contentful.com https://graphql.contentful.com https://cdn.leantech.me;
    media-src blob:;
    object-src 'self' blob:;
    frame-src 'self' data: blob:;
   "
/>

Did this page help you?