Modular Link (UK)

For UK 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

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 and country_codes to include GB. 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.

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});

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.

1val linkTokenConfiguration = linkTokenConfiguration {
2  token = "LINK_TOKEN_FROM_SERVER"
3  noLoadingState = true
4}

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

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.

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.