Link Web SDK

1// The usePlaidLink hook manages Plaid Link creation
2// It does not return a destroy function;
3// instead, on unmount it automatically destroys the Link instance
4const config: PlaidLinkOptions = {
5  onSuccess: (public_token, metadata) => {}
6  onExit: (err, metadata) => {}
7  onEvent: (eventName, metadata) => {}
8  token: 'GENERATED_LINK_TOKEN',
9  //required for OAuth; if not using OAuth, set to null or omit:
10  receivedRedirectUri: window.location.href,
11};
12
13const { open, exit, ready } = usePlaidLink(config);

1import {
2  PlaidLinkOnSuccess,
3  PlaidLinkOnSuccessMetadata,
4} from 'react-plaid-link';
5
6const onSuccess = useCallback<PlaidLinkOnSuccess>(
7  (public_token: string, metadata: PlaidLinkOnSuccessMetadata) => {
8    // log and save metadata
9    // exchange public token
10    fetch('//yourserver.com/exchange-public-token', {
11      method: 'POST',
12      headers: {
13        'Content-Type': 'application/json',
14      },
15      body: {
16        public_token,
17      },
18    });
19  },
20  [],
21);

1{
2  institution: {
3    name: 'Wells Fargo',
4    institution_id: 'ins_4'
5  },
6  accounts: [
7    {
8      id: 'ygPnJweommTWNr9doD6ZfGR6GGVQy7fyREmWy',
9      name: 'Plaid Checking',
10      mask: '0000',
11      type: 'depository',
12      subtype: 'checking',
13      verification_status: ''
14    },
15    {
16      id: '9ebEyJAl33FRrZNLBG8ECxD9xxpwWnuRNZ1V4',
17      name: 'Plaid Saving',
18      mask: '1111',
19      type: 'depository',
20      subtype: 'savings'
21    }
22    ...
23  ],
24  link_session_id: '79e772be-547d-4c9c-8b76-4ac4ed4c441a'
25}

1import {
2  PlaidLinkOnExit,
3  PlaidLinkOnExitMetadata,
4  PlaidLinkError,
5} from 'react-plaid-link';
6
7const onExit = useCallback<PlaidLinkOnExit>(
8  (error: PlaidLinkError, metadata: PlaidLinkOnExitMetadata) => {
9    // log and save error and metadata
10    // handle invalid link token
11    if (error != null && error.error_code === 'INVALID_LINK_TOKEN') {
12      // generate new link token
13    }
14    // to handle other error codes, see https://plaid.com/docs/errors/
15  },
16  [],
17);

1{
2  error_type: 'ITEM_ERROR',
3  error_code: 'INVALID_CREDENTIALS',
4  error_message: 'the credentials were not correct',
5  display_message: 'The credentials were not correct.',
6}

1{
2  institution: {
3    name: 'Wells Fargo',
4    institution_id: 'ins_4'
5  },
6  status: 'requires_credentials',
7  link_session_id: '36e201e0-2280-46f0-a6ee-6d417b450438',
8  request_id: '8C7jNbDScC24THu'
9}

1import {
2  PlaidLinkOnEvent,
3  PlaidLinkOnEventMetadata,
4  PlaidLinkStableEvent,
5} from 'react-plaid-link';
6
7const onEvent = useCallback<PlaidLinkOnEvent>(
8  (
9    eventName: PlaidLinkStableEvent | string,
10    metadata: PlaidLinkOnEventMetadata,
11  ) => {
12    // log eventName and metadata
13  },
14  [],
15);

1{
2  error_type: 'ITEM_ERROR',
3  error_code: 'INVALID_CREDENTIALS',
4  error_message: 'the credentials were not correct',
5  exit_status: null,
6  institution_id: 'ins_4',
7  institution_name: 'Wells Fargo',
8  institution_search_query: 'wellsf',
9  mfa_type: null,
10  view_name: 'ERROR'
11  request_id: 'm8MDnv9okwxFNBV',
12  link_session_id: '30571e9b-d6c6-42ee-a7cf-c34768a8f62d',
13  timestamp: '2017-09-14T14:42:19.350Z',
14  selection: null,
15}

1const { open, exit, ready } = usePlaidLink(config);
2
3// Graceful exit - Link may display a confirmation screen
4// depending on how far the user is in the flow
5exit();

1const { open, exit, ready } = usePlaidLink(config);
2
3// Force exit - Link exits immediately
4exit({ force: true });