Link Web SDK

// The usePlaidLink hook manages Plaid Link creation
// It does not return a destroy function;
// instead, on unmount it automatically destroys the Link instance
const config: PlaidLinkOptions = {
  onSuccess: (public_token, metadata) => {}
  onExit: (err, metadata) => {}
  onEvent: (eventName, metadata) => {}
  token: 'GENERATED_LINK_TOKEN',
  // required for OAuth:
  receivedRedirectUri: window.location.href,
  // if not OAuth, set to null or do not include:
  receivedRedirectUri: null,
};
const { open, exit, ready } = usePlaidLink(config);

import {
  PlaidLinkOnSuccess,
  PlaidLinkOnSuccessMetadata,
} from 'react-plaid-link';
const onSuccess = useCallback<PlaidLinkOnSuccess>(
  (public_token: string, metadata: PlaidLinkOnSuccessMetadata) => {
    // log and save metadata
    // exchange public token
    fetch('//yourserver.com/exchange-public-token', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: {
        public_token,
      },
    });
  },
  [],
);

{
  institution: {
    name: 'Wells Fargo',
    institution_id: 'ins_4'
  },
  accounts: [
    {
      id: 'ygPnJweommTWNr9doD6ZfGR6GGVQy7fyREmWy',
      name: 'Plaid Checking',
      mask: '0000',
      type: 'depository',
      subtype: 'checking',
      verification_status: ''
    },
    {
      id: '9ebEyJAl33FRrZNLBG8ECxD9xxpwWnuRNZ1V4',
      name: 'Plaid Saving',
      mask: '1111',
      type: 'depository',
      subtype: 'savings'
    }
    ...
  ],
  link_session_id: '79e772be-547d-4c9c-8b76-4ac4ed4c441a'
}

import {
  PlaidLinkOnExit,
  PlaidLinkOnExitMetadata,
  PlaidLinkError,
} from 'react-plaid-link';
const onExit = useCallback<PlaidLinkOnExit>(
  (error: PlaidLinkError, metadata: PlaidLinkOnExitMetadata) => {
    // log and save error and metadata
    // handle invalid link token
    if (error != null && error.error_code === 'INVALID_LINK_TOKEN') {
      // generate new link token
    }
    // to handle other error codes, see https://plaid.com/docs/errors/
  },
  [],
);

{
  error_type: 'ITEM_ERROR',
  error_code: 'INVALID_CREDENTIALS',
  error_message: 'the credentials were not correct',
  display_message: 'The credentials were not correct.',
}

{
  institution: {
    name: 'Wells Fargo',
    institution_id: 'ins_4'
  },
  status: 'requires_credentials',
  link_session_id: '36e201e0-2280-46f0-a6ee-6d417b450438',
  request_id: '8C7jNbDScC24THu'
}

import {
  PlaidLinkOnEvent,
  PlaidLinkOnEventMetadata,
  PlaidLinkStableEvent
} from 'react-plaid-link';
const onEvent = useCallback<PlaidLinkOnEvent>(
  (eventName: PlaidLinkStableEvent | string, metadata: PlaidLinkOnEventMetadata) => {
    // log eventName and metadata
  },
  [],
);

{
  error_type: 'ITEM_ERROR',
  error_code: 'INVALID_CREDENTIALS',
  error_message: 'the credentials were not correct',
  exit_status: null,
  institution_id: 'ins_4',
  institution_name: 'Wells Fargo',
  institution_search_query: 'wellsf',
  mfa_type: null,
  view_name: 'ERROR'
  request_id: 'm8MDnv9okwxFNBV',
  link_session_id: '30571e9b-d6c6-42ee-a7cf-c34768a8f62d',
  timestamp: '2017-09-14T14:42:19.350Z',
  selection: null,
}

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

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