Plaid logo
Docs
ALL DOCS

Link

  • Overview
Libraries
  • Web
  • iOS
  • Android
  • React Native
  • Webview
Core Link flows
  • OAuth guide
  • Update mode
  • Preventing duplicate Items
  • Data Transparency Messaging migration
  • Account Select v2 migration guide
  • Link Token migration guide
  • Legacy public key integrations
Optimizing Link
  • Optimizing Link conversion
  • Measuring Link conversion
  • Pre-Link messaging
  • Customizing Link
  • Choosing when to inititalize products
  • Returning user experience
  • Modular Link (UK/EU only)
Errors and troubleshooting
  • Troubleshooting
  • Handling an invalid Link Token
  • Institution status in Link
Plaid logo
Docs
Plaid.com
Get API keys
Open nav

Modular Link (UK/EU)

Guide to implementing customised Link flows

Introduction

For UK/EU OAuth flows, Plaid offers Modular Link: a fully customisable end-to-end flow that maintains the best-in-class developer experience of Link. With Modular Link, you can create your own:

  • Institution selection pane
  • Loading states
  • Confirmation/Error panes

Modular Link is not enabled by default in any Plaid environment, even if you are already enabled for Payment Initiation. To request that your account be enabled for Modular Link, contact your Plaid Account Manager.

Link token creation

For Modular Link flows, Link tokens must be initialised with an institution_id and eu_config object. Calling the /institutions/get endpoint will return a list of objects representing institutions supported by Plaid. In this case, you'll want to set both options.oauth and options.include_optional_metadata to true. Each institution in the response will include a name, logo, and institution_id. You can use the name and logo to create an institution selection pane. After the user selects an institution, pass the corresponding institution_id into the /link/token/create call.

For the eu_config object, the headless boolean is by default set to false. When it’s set to true, Link will not display any visual UI but will still handle redirects and communication with the bank in the background.

Select Language
Copy
1// Using Express
2const express = require('express');
3const app = express();
4app.use(express.json());
5
6const { Configuration, PlaidApi, PlaidEnvironments } = require('plaid');
7
8const configuration = new Configuration({
9 basePath: PlaidEnvironments[process.env.PLAID_ENV],
10 baseOptions: {
11 headers: {
12 'PLAID-CLIENT-ID': process.env.PLAID_CLIENT_ID,
13 'PLAID-SECRET': process.env.PLAID_SECRET,
14 'Plaid-Version': '2020-09-14',
15 },
16 },
17});
18
19const client = new PlaidApi(configuration);
20
21app.post('/api/create_link_token', async function (request, response) {
22 const configs = {
23 user: {
24 // This should correspond to a unique id for the current user.
25 client_user_id: 'user-id',
26 },
27 client_name: 'Plaid Test App',
28 products: [Products.PaymentInitiation],
29 language: 'en',
30 webhook: 'https://webhook.sample.com',
31 country_codes: [CountryCode.Gb],
32 payment_initiation: {
33 payment_id: paymentID,
34 },
35 eu_config: {
36 headless: true,
37 },
38 institution_id: "USER_SELECTED_INSTITUTION_ID",
39 };
40 try {
41 const createTokenResponse = await client.linkTokenCreate(configs);
42 response.json(createTokenResponse.data);
43 } catch (error) {
44 // handle error
45 }
46});

Mobile SDK initialisation

For Android and iOS flows, follow the instructions in the Android and iOS guides. The only change is in the LinkTokenConfiguration, where you will set noLoadingState to true. When this field is set, Plaid will not show any of its own loading states.

Android configuration
Select Language
Copy
1val linkTokenConfiguration = linkTokenConfiguration {
2 token = "LINK_TOKEN_FROM_SERVER"
3 noLoadingState = true
4}
iOS configuration
Select Language
Copy
1var linkConfiguration = LinkTokenConfiguration(
2 token: "<#LINK_TOKEN_FROM_SERVER#>",
3 onSuccess: { linkSuccess in
4 // Send the linkSuccess.publicToken to your app server.
5 }
6)
7
8linkConfiguration.noLoadingState = true

Custom loading states

Once Plaid is initialised, you can begin displaying your loading animation. Link will handle the redirect to the bank and you can leave the loading state running in the background. After the user is done authenticating, Plaid will redirect back to your application where the loading state is still running.

Confirmation and error panes

Plaid uses callbacks to indicate success or error states that enable you to present your custom screens. onSuccess will be called for successful payments and onExit will be called for flows ending in errors.

Was this helpful?
Developer community
GitHub
GitHub
Stack Overflow
Stack Overflow
YouTube
YouTube
Twitter
Twitter
Discord
Discord