Web

The Web SDK is loaded via the Link Loader script, which exposes a global Lean object for every method.

📘
Prerequisites
Before calling any SDK method you need to have completed the backend setup in the Getting Started section:

Create your Lean application in the developer dashboard to obtain an app_token.

Authentication — OAuth flow for minting customer-scoped access_tokens.

Creating a customer — POST /customers/v1 to obtain a customer_id.

Sandbox testing — test users and mock bank.

This page covers only the client-side SDK integration.

Installation

Add the Link Loader script to your page:

<script src="https://cdn.leantech.me/link/loader/prod/sa/latest/lean-link-loader.min.js"></script>

Load the script at app initialisation / page load — not when the user initiates a flow. Loading it early means the loader and its iframe are warm by the time you call a method.

The loader exposes a global Lean object. Every method lives on it directly: Lean.connect(...), Lean.pay(...), etc.

Available methods

Every method takes a single config object. Each example below lists required fields explicitly and shows the most common optional ones. Every method also accepts these shared optional fields: access_token, sandbox, language, customization, callback.

.connect()

Link a bank account for data access (and optionally payments).

Lean.connect({
  app_token: "<YOUR_APP_TOKEN>",
  customer_id: "CUSTOMER_ID",
  permissions: ["identity", "accounts", "transactions", "balance"],
  // Optional:
  bank_identifier: "<BANK_IDENTIFIER>",
  account_type: "PERSONAL", // or "BUSINESS"
  access_from: "2025-01-01",
  access_to: "2025-12-31",
  show_consent_explanation: true,
  access_token: "<CUSTOMER_SCOPED_JWT>",
  sandbox: true,
  callback: ({ status }) => console.log("Status:", status),
});

Callback

Every method accepts a callback that fires on SDK close with a CallbackData object. Status codes documented at LinkSDK statuses.

The CallbackData shape:

Field	Type	Notes
`status`	`string`	`SUCCESS` \| `ERROR` \| `CANCELLED` \| `REDIRECT` \| `LINK_CLOSED_PROGRAMMATICALLY`
`message`	`string`	Human-readable description of the outcome.
`bank`	`{ bank_identifier, is_supported }`	Bank the user selected; `is_supported` is `false` when the user taps "My bank is not listed".
`exit_point`	`string`	Last screen the user saw.
`secondary_status`	`string`	Additional detail on failures (e.g. `INVALID_CREDENTIALS`) — see LinkSDK statuses.
`last_api_response`	`string`	Last status returned by the Lean API during the flow.
`lean_correlation_id`	`string`	Unique correlation ID — include in support requests.
`open_banking_redirect_url`	`string`	Populated on `REDIRECT` status (Open Finance flows).

Lean.connect({
  app_token: "<YOUR_APP_TOKEN>",
  customer_id: "CUSTOMER_ID",
  permissions: ["identity", "accounts"],
  callback: (data) => {
    switch (data.status) {
      case "SUCCESS":
        // Account linked. Webhook will follow — treat webhook as authoritative.
        break;
      case "CANCELLED":
        // User closed the SDK.
        break;
      case "ERROR":
        // Inspect data.message and data.secondary_status.
        break;
      case "REDIRECT":
        // Open Finance flow redirected — handle at your redirect URL.
        break;
    }
  },
});

Bank-list and account-selection shortcuts

Pass bank_identifier on connect, pay, or checkout to skip the bank-selection screen. Pass account_id on pay to skip the payment-source-selection screen. Both accept values from the Lean Banks API — see Create your own bank list.

Customisation

Pass a customization object to any method to override the SDK's appearance. Full field reference in Customisation.

Lean.connect({
  app_token: "<YOUR_APP_TOKEN>",
  customer_id: "CUSTOMER_ID",
  permissions: ["identity", "accounts"],
  customization: {
    theme_color: "#0080ff",
    button_text_color: "#ffffff",
    button_border_radius: "8",
  },
});

Language

Pass language: "ar" to run the SDK in Arabic with a full right-to-left layout. Omit or pass "en" for English (default).

Content Security Policy

If your site uses CSP, these hosts must be allowed or the SDK will fail to load. The safest option is to wildcard *.leantech.me and add the third-party analytics hosts separately.

Strict directives

<meta
  http-equiv="Content-Security-Policy"
  content="
    default-src 'self' https://cdn.leantech.me data: blob:;
    script-src 'self' https://cdn.leantech.me https://cdn.segment.com http://cdn.mxpnl.com;
    style-src 'self' https://cdn.leantech.me https://fonts.googleapis.com https://cdn.segment.com;
    connect-src 'self' blob:
      https://apm.ae01.leantech.me https://apm.sa01.leantech.me
      https://link.sandbox.leantech.me https://link.leantech.me
      https://link.sandbox.sa.leantech.me https://link.sa.leantech.me
      https://graphql.contentful.com
      https://api.segment.io https://cdn.segment.com
      https://api-js.mixpanel.com
      https://cdn.growthbook.io;
    img-src 'self' data:
      https://cdn.leantech.me https://images.leantech.me
      https://images.sandbox.leantech.me https://images.sa.leantech.me
      https://images.sandbox.sa.leantech.me
      https://images.ctfassets.net http://images.contentful.com
      https://graphql.contentful.com;
    font-src 'self' https://fonts.gstatic.com;
    frame-src 'self' https://cdn.leantech.me data: blob:;
  "
/>

Relaxed directives (wildcard)

<meta
  http-equiv="Content-Security-Policy"
  content="
    default-src 'self' https://*.leantech.me data: blob:;
    script-src 'self' https://*.leantech.me https://cdn.segment.com http://cdn.mxpnl.com;
    style-src 'self' https://*.leantech.me https://fonts.googleapis.com https://cdn.segment.com;
    connect-src 'self' blob: https://*.leantech.me https://graphql.contentful.com https://api.segment.io https://cdn.segment.com https://api-js.mixpanel.com https://cdn.growthbook.io;
    img-src 'self' data: https://*.leantech.me https://images.ctfassets.net http://images.contentful.com https://graphql.contentful.com;
    font-src 'self' https://fonts.gstatic.com;
    frame-src 'self' https://*.leantech.me data: blob:;
  "
/>

Resources the SDK loads

// Lean
https://*.leantech.me
https://apm.ae01.leantech.me
https://apm.sa01.leantech.me
https://cdn.leantech.me
https://images.leantech.me
https://images.sa.leantech.me
https://images.sandbox.leantech.me
https://images.sandbox.sa.leantech.me
https://link.leantech.me
https://link.sa.leantech.me
https://link.sandbox.leantech.me
https://link.sandbox.sa.leantech.me

// Third-party analytics and content
http://cdn.mxpnl.com
https://api-js.mixpanel.com
https://api.segment.io
https://cdn.segment.com
https://cdn.growthbook.io
https://fonts.googleapis.com
https://fonts.gstatic.com
https://graphql.contentful.com
http://images.contentful.com
https://images.ctfassets.net

The list may change without notice — wildcarding *.leantech.me is the simplest way to stay compatible.

Authentication — OAuth token flow.
Creating a customer — customer_id prerequisite.
Config reference — every config field, its type and purpose.
Flows reference — per-method prerequisites and required-vs-optional fields.
Customisation — theming.
LinkSDK statuses — callback status codes.
Create your own bank list — custom bank selection UI.

Prerequisites

Installation

Available methods

.connect()

Callback

Bank-list and account-selection shortcuts

Customisation

Language

Content Security Policy

Strict directives

Relaxed directives (wildcard)

Resources the SDK loads

Related