Plaid logo
Docs
ALL DOCS

Link

  • Overview
Platforms
  • Web
  • iOS
  • Android
  • React Native
  • Hosted Link
Core Link functionality
  • OAuth guide
  • Update mode
  • Preventing duplicate Items
  • Data Transparency Messaging migration
  • Returning user experience
Additional Link modes
  • Embedded Link
  • Multi-Item Link
  • Link Recovery (beta)
  • Modular Link (UK/EU only)
Optimizing Link
  • Optimizing Link conversion
  • Link analytics and tracking
  • Pre-Link messaging
  • Customizing Link
  • Choosing when to initialize products
Errors and troubleshooting
  • Troubleshooting
  • Handling an invalid Link Token
  • Institution status in Link
Legacy flows
  • Legacy public key integrations
  • Link Token migration guide
  • Webview integrations
Plaid logo
Docs
Close search modal
Ask Bill!
Ask Bill!
Hi! I'm Bill! You can ask me all about the Plaid API. Try asking questions like:
  • Why is /transactions/sync/ better than /get?
  • What is Remember Me?
  • Can you show code for getting transactions in Python?
Note: Bill isn't perfect. He's just a robot platypus that reads our docs for fun. You should treat his answers with the same healthy skepticism you might treat any other answer on the internet. This chat may be logged for quality and training purposes. Please don't send Bill any PII -- he's scared of intimacy. All chats with Bill are subject to Plaid's Privacy Policy.
Plaid.com
Log in
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
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
1val linkTokenConfiguration = linkTokenConfiguration {
2 token = "LINK_TOKEN_FROM_SERVER"
3 noLoadingState = true
4}
iOS configuration
Select Language
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
Discord
Discord