Link Web SDK
Reference for integrating with the Link JavaScript SDK and React SDK
Prefer to learn with code examples? Check out our GitHub repo with working example Link implementations for both JavaScript and React.
Installation
Select group for content switcherInclude the Plaid Link initialize script on each page of your site. It must always be loaded directly from https://cdn.plaid.com, rather than included in a bundle or hosted yourself. Unlike Plaid's other SDKs, the JavaScript web SDK is not versioned; cdn.plaid.com will automatically provide the latest available SDK.
<script src="https://cdn.plaid.com/link/v2/stable/link-initialize.js"></script>To get started with Plaid Link for React, clone the GitHub repository and review the example application and README, which provide reference implementations.
Next, you'll need to install the react-plaid-link package.
With npm:
npm install --save react-plaid-linkWith yarn:
yarn add react-plaid-linkThen import the necessary components and types:
import {
usePlaidLink,
PlaidLinkOptions,
PlaidLinkOnSuccess,
} from 'react-plaid-link';CSP directives
If you are using a Content Security Policy (CSP), use the following directives to allow Link traffic:
default-src https://cdn.plaid.com/;
script-src 'unsafe-inline' https://cdn.plaid.com/link/v2/stable/link-initialize.js;
style-src 'unsafe-inline';
style-src-elem 'unsafe-inline';
style-src-attr 'unsafe-inline';
frame-src https://cdn.plaid.com/;
connect-src https://production.plaid.com/;If using Sandbox instead of Production, make sure to update the connect-src directive to point to the appropriate server (https://sandbox.plaid.com).
If your organization does not allow the use of unsafe-inline, use a CSP nonce generated for the page response instead:
default-src https://cdn.plaid.com/;
script-src 'nonce-<PAGE_RESPONSE_NONCE>' https://cdn.plaid.com/link/v2/stable/link-initialize.js;
style-src 'nonce-<PAGE_RESPONSE_NONCE>';
style-src-elem 'nonce-<PAGE_RESPONSE_NONCE>';
style-src-attr 'unsafe-inline';
frame-src https://cdn.plaid.com/;
connect-src https://production.plaid.com/;Then reference the same nonce value on the Plaid Link script tag:
<script
nonce="<PAGE_RESPONSE_NONCE>"
src="https://cdn.plaid.com/link/v2/stable/link-initialize.js"
></script>Creating a Link token
Before you can create an instance of Link, you need to first create a link_token. A link_token can be configured for
different Link flows and is used to control much of Link's behavior. To learn how to create a new
link_token, see the API Reference entry for /link/token/create.
create()
Plaid.create accepts one argument, a configuration Object, and returns an Object with three functions, open, exit, and destroy. Calling open will open Link and display the Consent Pane view, calling exit will close Link, and calling destroy will clean up the iframe.
It is recommended to call Plaid.create when initializing the view that is responsible for loading Plaid, as this will allow Plaid to pre-initialize Link, resulting in lower UI latency upon calling open, which can increase Link conversion.
When using the React SDK, this method is called usePlaidLink and returns an object with four values, open, exit, ready, and error. The values open and exit behave as described above. ready is a passthrough for onLoad and will be true when Link is ready to be opened. error is populated only if Plaid fails to load the Link JavaScript. There is no separate method to destroy Link in the React SDK, as unmount will automatically destroy the Link instance.
Note: Control whether or not your Link integration uses the Account Select view from the Dashboard.
Properties
Specify a link_token to authenticate your app with Link. This is a short lived, one-time use token that should be unique for each Link session. In addition to the primary flow, a link_token can be configured to launch Link in update mode. See the /link/token/create endpoint for a full list of configurations.
A function that is called when a user successfully links an Item. The function should expect two arguments, the public_token and a metadata object. See onSuccess.
A function that is called when a user exits Link without successfully linking an Item, or when an error occurs during Link initialization. The function should expect two arguments, a nullable error object and a metadata object. See onExit.
A function that is called when a user reaches certain points in the Link flow. The function should expect two arguments, an eventName string and a metadata object. See onEvent.
A function that is called when the Link module has finished loading. Calls to plaidLinkHandler.open() prior to the onLoad callback will be delayed until the module is fully loaded.
A receivedRedirectUri is required to support OAuth authentication flows when re-launching Link on a mobile device.
The public_key is no longer used for new implementations of Link. If your integration is still using a public_key, please contact Plaid support or your account manager.
// 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',
};
const { open, exit, ready } = usePlaidLink(config);
onSuccess
The onSuccess callback is called when a user successfully links an Item. It takes two arguments: the public_token and a metadata object.
Properties
Displayed once a user has successfully completed Link. If using Identity Verification or Beacon, this field will be null. If using Document Income or Payroll Income, the public_token will be returned, but is not used.
Displayed once a user has successfully completed Link.
An institution object. If the Item was created via Same-Day micro-deposit verification, will be null.
The full institution name, such as 'Wells Fargo'
The Plaid institution identifier
A list of accounts attached to the connected Item. If Account Select is enabled via the developer dashboard, accounts will only include selected accounts.
The Plaid account_id
The official account name
The last 2-4 alphanumeric characters of an account's official account number. Note that the mask may be non-unique between an Item's accounts. It may also not match the mask that the bank displays to the user.
The account type. See the Account schema for a full list of possible values
The account subtype. See the Account schema for a full list of possible values
Indicates an Item's micro-deposit-based verification or database verification status. Possible values are:
pending_automatic_verification: The Item is pending automatic verification
pending_manual_verification: The Item is pending manual micro-deposit verification. Items remain in this state until the user successfully verifies the deposit.
automatically_verified: The Item has successfully been automatically verified
manually_verified: The Item has successfully been manually verified
verification_expired: Plaid was unable to automatically verify the deposit within 7 calendar days and will no longer attempt to validate the Item. Users may retry by submitting their information again through Link.
verification_failed: The Item failed manual micro-deposit verification because the user exhausted all 3 verification attempts. Users may retry by submitting their information again through Link.
database_matched: The Item has successfully been verified using Plaid's data sources.
database_insights_pending: The Database Insights result is pending and will be available upon Auth request.
null: Neither micro-deposit-based verification nor database verification are being used for the Item.
If micro-deposit verification was being used, indicates the user's selection when asked if the account being verified is a business or personal account. This field is deprecated as Plaid no longer collects this information during the micro-deposit flow.
Deprecated. Use accounts instead.
A unique identifier associated with a user's actions and events through the Link flow. Include this identifier when opening a support ticket for faster turnaround.
The status of a transfer. Returned only when Transfer UI is implemented.
COMPLETE– The transfer was completed.INCOMPLETE– The transfer could not be completed. For help, see Troubleshooting Transfer UI.
COMPLETE, INCOMPLETEimport {
PlaidLinkOnSuccess,
PlaidLinkOnSuccessMetadata,
} from 'react-plaid-link';
const onSuccess = useCallback<PlaidLinkOnSuccess>(
(public_token: string, metadata: PlaidLinkOnSuccessMetadata) => {
// log and save metadata
// exchange public token (if using Item-based products)
fetch('//yourserver.com/exchange-public-token', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
public_token,
}),
});
},
[],
);
{
institution: {
name: 'Wells Fargo',
institution_id: 'ins_4'
},
accounts: [
{
id: 'ygPnJweommTWNr9doD6ZfGR6GGVQy7fyREmWy',
name: 'Plaid Checking',
mask: '0000',
type: 'depository',
subtype: 'checking',
verification_status: null
},
{
id: '9ebEyJAl33FRrZNLBG8ECxD9xxpwWnuRNZ1V4',
name: 'Plaid Saving',
mask: '1111',
type: 'depository',
subtype: 'savings'
}
...
],
link_session_id: '79e772be-547d-4c9c-8b76-4ac4ed4c441a'
}onExit
The onExit callback is called when a user exits Link without successfully linking an Item, or when an error occurs during Link initialization. onExit takes two arguments, a nullable error object and a metadata object. The metadata parameter is always present, though some values may be null. Note that onExit will not be called when Link is destroyed in some other way than closing Link, such as the user hitting the browser back button or closing the browser tab on which the Link session is present.
Properties
A nullable object that contains the error type, code, and message of the error that was last encountered by the user. If no error was encountered, error will be null.
A broad categorization of the error.
The particular error code. Each error_type has a specific set of error_codes.
A developer-friendly representation of the error code.
A user-friendly representation of the error code. null if the error is not related to user action. This may change over time and is not safe for programmatic use.
Displayed if a user exits Link without successfully linking an Item.
An institution object. If the Item was created via Same-Day micro-deposit verification, will be null.
The full institution name, such as Wells Fargo
The Plaid institution identifier
The point at which the user exited the Link flow. One of the following values.
User prompted to answer security questions
User prompted to answer multiple choice question(s)
User prompted to provide a one-time passcode
User prompted to select a device on which to receive a one-time passcode
User prompted to provide credentials for the selected financial institution or has not yet selected a financial institution
User prompted to select one or more financial accounts to share
User prompted to enter an OAuth flow
User exited the Link flow on the institution selection pane. Typically this occurs after the user unsuccessfully (no results returned) searched for a financial institution. Note that this status does not necessarily indicate that the user was unable to find their institution, as it is used for all user exits that occur from the institution selection pane, regardless of other user behavior.
User exited the Link flow after discovering their selected institution is no longer supported by Plaid
A unique identifier associated with a user's actions and events through the Link flow. Include this identifier when opening a support ticket for faster turnaround.
The request ID for the last request made by Link. This can be shared with Plaid Support to expedite investigation.
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'
}onEvent
The onEvent callback is called at certain points in the Link flow. It takes two arguments, an eventName string and a metadata object.
The metadata parameter is always present, though some values may be null. Note that new eventNames, metadata keys, or view names may be added without notice.
The OPEN, LAYER_READY, LAYER_NOT_AVAILABLE, and LAYER_AUTOFILL_NOT_AVAILABLE events will fire in real time; subsequent events will fire at the end of the Link flow, along with the onSuccess or onExit callback. Callback ordering is not guaranteed; onEvent callbacks may fire before, after, or surrounding the onSuccess or onExit callback, and event callbacks are not guaranteed to fire in the order in which they occurred. If you need to determine the exact time when an event happened, use the timestamp in the metadata.
The following callback events are stable, which means that they are suitable for programmatic use in your application's logic: OPEN, EXIT, HANDOFF, SELECT_INSTITUTION, ERROR, BANK_INCOME_INSIGHTS_COMPLETED, IDENTITY_VERIFICATION_PASS_SESSION, IDENTITY_VERIFICATION_FAIL_SESSION, IDENTITY_MATCH_FAILED, IDENTITY_MATCH_PASSED, LAYER_READY, LAYER_NOT_AVAILABLE, LAYER_AUTOFILL_NOT_AVAILABLE. The remaining callback events are informational and subject to change and should be used for analytics and troubleshooting purposes only.
Properties
A string representing the event that has just occurred in the Link flow.
The user was automatically sent an OTP code without a UI prompt. This event can only occur if the user's phone phone number was provided to Link via the /link/token/create call and the user has previously consented to receive OTP codes from Plaid.
The user has completed the Assets and Bank Income Insights flow.
The user closed the third-party website or mobile app without completing the OAuth flow.
The user has chosen to link a new institution instead of linking a saved institution. This event is only emitted in the Link Returning User Experience flow.
A recoverable error occurred in the Link flow, see the error_code metadata.
The user has exited without completing the Link flow and the onExit callback is fired.
The user encountered an error while completing the third-party's OAuth login flow.
The user has exited Link after successfully linking an Item.
An Identity Match check configured via the Account Verification Dashboard failed the Identity Match rules and did not detect a match.
An Identity Match check configured via the Account Verification Dashboard passed the Identity Match rules and detected a match.
The user has started a step of the Identity Verification flow. The step is indicated by view_name.
The user has passed a step of the Identity Verification flow. The step is indicated by view_name.
The user has failed a step of the Identity Verification flow. The step is indicated by view_name.
The user has reached the pending review state.
The user has started a new Identity Verification session.
The user has resumed an existing Identity Verification session.
The user has passed their Identity Verification session.
The user has failed their Identity Verification session.
The user has completed their Identity Verification session, which is now in a pending review state.
The user has opened the UI of their Identity Verification session.
The user has resumed the UI of their Identity Verification session.
The user has closed the UI of their Identity Verification session.
The user's date of birth passed to Link is not eligible for Layer Extended Autofill.
The user phone number passed to Link is not eligible for Layer.
The user phone number passed to Link is eligible for Layer and open() may now be called.
The user selected an institution that was presented as a matched institution. This event can be emitted if Embedded Institution Search is being used, if the institution was surfaced as a matched institution likely to have been linked to Plaid by a returning user, or if the institution's routing_number was provided when calling /link/token/create. For details on which scenario is triggering the event, see metadata.matchReason.
The user has opened Link.
The user has opened my.plaid.com. This event is only sent when Link is initialized with Assets as a product
The user has navigated to a third-party website or mobile app in order to complete the OAuth login flow.
The user has searched for an institution.
The user has chosen whether to Link instantly or manually (i.e., with micro-deposits). This event emits the selection metadata to indicate the user's selection.
The user selected a brand, e.g. Bank of America. The SELECT_BRAND event is only emitted for large financial institutions with multiple online banking portals.
The user selected an institution with a DEGRADED health status and was shown a corresponding message.
The user selected an institution with a DOWN health status and was shown a corresponding message.
The user selected an institution Plaid does not support all requested products for and was shown a corresponding message.
The user selected an institution.
The user has opted to not provide their phone number to Plaid. This event is only emitted in the Link Returning User Experience flow.
The user has submitted an account number. This event emits the account_number_mask metadata to indicate the mask of the account number the user provided.
The user has submitted credentials.
The user is being prompted to submit documents for an Income verification flow.
The user encountered an error when submitting documents for an Income verification flow.
The user has successfully submitted documents for an Income verification flow.
The user has submitted MFA.
The user has submitted an OTP code during the phone number verification flow. This event is only emitted in the Link Returning User Experience (Remember Me) flow or Layer flow. This event will not be emitted if the phone number is verified via SNA.
The user has submitted their phone number. This event is only emitted in the Link Returning User Experience (Remember Me) flow.
The user has submitted a routing number. This event emits the routing_number metadata to indicate user's routing number.
The TRANSITION_VIEW event indicates that the user has moved from one view to the next.
The user has successfully verified their phone number via either OTP or SNA. This event is only emitted in the Link Returning User Experience (Remember Me) flow or the Layer flow.
The user has viewed data types on the data transparency consent pane.
An object containing information about the event.
The account number mask extracted from the user-provided account number. If the user-inputted account number is four digits long, account_number_mask is empty. Emitted by SUBMIT_ACCOUNT_NUMBER.
The error type that the user encountered. Emitted by: ERROR, EXIT.
The error code that the user encountered. Emitted by ERROR, EXIT.
The error message that the user encountered. Emitted by: ERROR, EXIT.
The status key indicates the point at which the user exited the Link flow. Emitted by: EXIT
The ID of the selected institution. Emitted by: all events.
The name of the selected institution. Emitted by: all events.
The query used to search for institutions. Emitted by: SEARCH_INSTITUTION.
Indicates if the current Link session is an update mode session. Emitted by: OPEN.
The reason this institution was matched.
This will be either returning_user or routing_number if emitted by: MATCHED_SELECT_INSTITUTION.
Otherwise, this will be SAVED_INSTITUTION or AUTO_SELECT_SAVED_INSTITUTION if emitted by: SELECT_INSTITUTION.
The routing number submitted by user at the micro-deposits routing number pane. Emitted by SUBMIT_ROUTING_NUMBER.
If set, the user has encountered one of the following MFA types: code, device, questions, selections. Emitted by: SUBMIT_MFA and TRANSITION_VIEW when view_name is MFA
The name of the view that is being transitioned to. Emitted by: TRANSITION_VIEW.
The view showing Terms of Service in the identity verification flow.
The user has connected their account.
We ask the user to consent to the privacy policy.
Asking the user for their account credentials.
The view requesting document verification in the identity verification flow (configured via "Fallback Settings" in the "Rulesets" section of the template editor).
An error has occurred.
Confirming if the user wishes to close Link.
The user has authorized an instant micro-deposit to be sent to their account over the RTP or FedNow network with a 3-letter code to verify their account.
The view representing the "know your customer" step in the identity verification flow.
Link is making a request to our servers.
The user is asked by the institution for additional MFA authentication.
The user is asked to insert their account and routing numbers.
The user goes through the Same Day micro-deposits flow with Reroute to Credentials.
The user is informed they will authenticate with the financial institution via OAuth.
The user is asked to review their profile data in the Layer flow.
The user was presented with a Google reCAPTCHA to verify they are human.
The risk check step in the identity verification flow (configured via "Risk Rules" in the "Rulesets" section of the template editor).
The user has authorized a same day micro-deposit to be sent to their account over the ACH network with a 3-letter code to verify their account.
The watchlist screening step in the identity verification flow.
We ask the user to choose an account.
The user is asked to choose whether to Link instantly or manually (i.e., with micro-deposits).
The user is asked to select a brand, e.g. Bank of America. The brand selection interface occurs before the institution select pane and is only provided for large financial institutions with multiple online banking portals.
We ask the user to choose their institution.
The user is asked to select their saved accounts and/or new accounts for linking in the Link Returning User Experience (Remember Me) flow.
The user is asked to pick a saved institution or link a new one in the Link Returning User Experience (Remember Me) flow.
The view in the identity verification flow which uses the camera to confirm there is a real user present that matches their ID documents.
The user is asked for their phone number in the Link Returning User Experience (Remember Me) flow.
The user is asked to upload documents (for Income verification).
The user is asked to verify their phone in the Link Returning User Experience (Remember Me) flow or the Layer flow. This screen will appear even if a non-OTP verification method is used.
The SMS verification step in the identity verification flow.
The request ID for the last request made by Link. This can be shared with Plaid Support to expedite investigation. Emitted by: all events.
The link_session_id is a unique identifier for a single session of Link. It's always available and will stay constant throughout the flow. Emitted by: all events.
An ISO 8601 representation of when the event occurred. For example 2017-09-14T14:42:19.350Z. Emitted by: all events.
The Auth Type Select flow type selected by the user. Possible values are flow_type_manual or flow_type_instant. Emitted by: SELECT_AUTH_TYPE.
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,
}open()
Calling open will display the Consent Pane view to your user, starting the Link flow. Once open is called, you will begin receiving events via the onEvent callback.
Properties
const { open, exit, ready } = usePlaidLink(config);
// Open Link
if (ready) {
open();
}
exit()
The exit function allows you to programmatically close Link. Calling exit will trigger either the onExit or onSuccess callbacks.
The exit function takes a single, optional argument, a configuration Object.
Properties
If true, Link will exit immediately. If false, or the option is not provided, an exit confirmation screen may be presented to the user.
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 });
destroy()
The destroy function allows you to destroy the Link handler instance, properly removing any DOM artifacts that were created by it. Use destroy() when creating new replacement Link handler instances in the onExit callback.
Properties
// On unmount usePlaidLink hook automatically destroys any
// existing link instance
submit()
The submit function is currently only used in the Layer product. It allows the client application to submit additional user-collected data to the Link flow (e.g. a user phone number).
Properties
The user's phone number.
The user's date of birth. To be provided in the format "yyyy-mm-dd".
const { open, exit, submit } = usePlaidLink(config);
// After collecting a user phone number...
submit({
"phone_number": "+14155550123"
});
OAuth
Using Plaid Link with an OAuth flow requires some additional setup instructions. For details, see the OAuth Guide.
Supported browsers
Plaid officially supports Link on the latest versions of Chrome, Firefox, Safari, and Edge. Browsers are supported on Windows, Mac, Linux, iOS, and Android. Previous browser versions are also supported, as long as they are actively maintained; Plaid does not support browser versions that are no longer receiving patch updates, or that have been assigned official end of life (EOL) or end of support (EOS) status.
Ad-blocking software is not officially supported with Link web, and some ad-blockers have known to cause conflicts with Link.
Example code in Plaid Pattern
For a real-life example of using Plaid Link for React, see LaunchLink.tsx. This file illustrates the code for implementation of Plaid Link for React for the Node-based Plaid Pattern sample app.