Link React Native SDK  ====================== #### Reference for integrating with the Link React Native SDK  This guide covers the latest major version of the Link React Native SDK, which is version 12.x.x. For information on migrating from older versions, see [Migration guides](https://plaid.com/docs/link/react-native/index.html.md#migration-guides) . #### Overview  Prefer to learn with code examples? A [GitHub repo](https://github.com/plaid/tiny-quickstart/tree/main/react_native) showing a working example Link implementation is available for this topic. To get started with [Plaid Link for React Native](https://github.com/plaid/react-native-plaid-link-sdk) you'll want to sign up for [free API keys](https://dashboard.plaid.com/developers/keys) through the Plaid Dashboard. #### Requirements  * React Native Version `0.66.0` or higher New versions of the [React Native SDK](https://github.com/plaid/react-native-plaid-link-sdk) are released frequently. Major releases occur annually. The Link SDK uses Semantic Versioning, ensuring that all non-major releases are non-breaking, backwards-compatible updates. We recommend you update regularly (at least once a quarter, and ideally once a month) to ensure the best Plaid Link experience in your application. SDK versions are supported for two years; with each major SDK release, Plaid will stop officially supporting any previous SDK versions that are more than two years old. While these older versions are expected to continue to work without disruption, Plaid will not provide assistance with unsupported SDK versions. ##### Version Compatibility  | React Native SDK | Android SDK | iOS SDK | Status | | --- | --- | --- | --- | | 12.x.x | 5.0+ | \>=6.0.0 | Active, supports Xcode 16 | | 11.x.x | 4.1.1+ | \>=5.1.0 | Active, supports Xcode 15 | | 10.x.x | 3.10.1+ | \>=4.1.0 | Active, supports Xcode 14 | | 9.x.x | 3.10.1+ | \>=4.1.0 | Deprecated, supports Xcode 14 | #### Getting Started  ##### Installing the SDK  In your react-native project directory, run: ```bash npm install --save react-native-plaid-link-sdk ``` ##### iOS Setup  Add Plaid to your project's Podfile as follows (likely located at ios/Podfile). ```bash pod 'Plaid', '~> ' ``` Autolinking should install the CocoaPods dependencies for iOS project. If it fails you can run ```bash cd ios && bundle install && bundle exec pod install ``` ##### Android Setup  Requirements: * Android 5.0 (API level 21) and above. * Your compileSdkVersion must be 35. * Android gradle plugin 4.x and above. Autolinking should handle all of the Android setup. * Register your Android package name in the [Dashboard](https://dashboard.plaid.com/developers/api) . This is required in order to connect to OAuth institutions (which includes most major banks). ###### Sample app  For a sample app that demonstrates a minimal integration with the React Native Plaid Link SDK, see the [Tiny Quickstart (React Native)](https://github.com/plaid/tiny-quickstart/tree/main/react_native) . #### Opening Link  Before you can open 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 see how to create a new `link_token`, see the API Reference entry for [/link/token/create](https://plaid.com/docs/api/link/index.html.md#linktokencreate) . If your React Native application will be used on Android, the [/link/token/create](https://plaid.com/docs/api/link/index.html.md#linktokencreate) call should include the `android_package_name` parameter. Each time you open Link, you will need to get a new `link_token` from your server. Next, open Link via the `create` and `open` methods. These functions require version 11.6 or later of the Plaid React Native SDK. If using a version earlier than 11.6, you must open Link with the legacy `PlaidLink` component, which configures Link and registers a callback in a single component. This approach has higher user-facing latency than using the `create` and `open` methods. \=\*=\*=\*= #### create()  You can initiate the Link preloading process by invoking the `create` function. After calling `create`, call `open` to open Link. This function requires SDK version 11.6 or later. **Properties** LinkTokenConfiguration A configuration used to open Link with a Link Token. string The `link_token` to be used to authenticate your app with Link. The `link_token` is created by calling `/link/token/create` and 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](https://plaid.com/docs/link/update-mode/index.html.md) . See the `/link/token/create` endpoint for a full list of configurations. boolean Hides native activity indicator if true. LinkLogLevel Set the level at which to log statements Possible values: `DEBUG`, `INFO`, `WARN`, `ERROR` ```javascript { create({token: linkToken}); setDisabled(false); } }> Create Link ``` \=\*=\*=\*= #### open()  After calling `create`, you can subsequently invoke the `open` function. Note that maximizing the delay between these two calls will reduce latency for your users by allowing Link more time to load. This function requires SDK version 11.6 or later. **Properties** LinkSuccessListener A function that is called when a user successfully links an Item. The function should expect one argument. See [onSuccess](https://plaid.com#onsuccess) . LinkExitListener 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 one argument. See [onExit](https://plaid.com#onexit) . LinkIOSPresentationStyle The presentation style to use on iOS. Defaults to `MODAL`. Possible values: `MODAL`, `FULL_SCREEN` LinkLogLevel Set the level at which to log statements Possible values: `DEBUG`, `INFO`, `WARN`, `ERROR` ```javascript { const openProps = { onSuccess: (success: LinkSuccess) => { console.log(success); }, onExit: (linkExit: LinkExit) => { console.log(linkExit); }, }; open(openProps); setDisabled(true); }}> Open Link ``` \=\*=\*=\*= #### PlaidLink  PlaidLink is a React component used to open Link from a React Native application. PlaidLink renders a [Pressable](https://reactnative.dev/docs/pressable) component, which wraps the component you provide and intercepts onPress events to open Link. PlaidLink is an older alternative to the `create` and `open` methods, which offer reduced Link latency and improved performance. **Properties** LinkSuccessListener A function that is called when a user successfully links an Item. The function should expect one argument. See [onSuccess](https://plaid.com#onsuccess) . LinkTokenConfiguration A configuration used to open Link with a Link Token. string The `link_token` to be used to authenticate your app with Link. The `link_token` is created by calling `/link/token/create` and 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](https://plaid.com/docs/link/update-mode/index.html.md) . See the `/link/token/create` endpoint for a full list of configurations. LinkLogLevel Set the level at which to log statements Possible values: `DEBUG`, `INFO`, `WARN`, `ERROR` Record You do not need to use this field unless specifically instructed to by Plaid. LinkExitListener 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 one argument. See [onExit](https://plaid.com#onexit) . React.ReactNode The underlying component to render ```javascript { console.log(success); }} onExit={(exit: LinkExit) => { console.log(exit); }} > Add Account ``` \=\*=\*=\*= #### onSuccess  The method is called when a user successfully links an Item. The onSuccess handler returns a `LinkConnection` class that includes the `public_token`, and additional Link metadata in the form of a `LinkConnectionMetadata` class. **Properties** String 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. LinkSuccessMetadata Displayed once a user has successfully completed Link. Array A list of accounts attached to the connected Item. If Account Select is enabled via the developer dashboard, `accounts` will only include selected accounts. string The Plaid `account_id` nullable, string The official account name nullable, string 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. LinkAccountType The account type. See the [Account schema](https://plaid.com/docs/api/accounts/index.html.md#account-type-schema) for a full list of possible values LinkAccountSubtype The account subtype. See the [Account schema](https://plaid.com/docs/api/accounts/index.html.md#account-type-schema) for a full list of possible values nullable, LinkAccountVerificationStatus Indicates an Item's micro-deposit-based verification or database verification status. The Item is pending automatic verification The Item is pending manual micro-deposit verification. Items remain in this state until the user successfully verifies the deposit. The Item has successfully been automatically verified The Item has successfully been manually verified 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. 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. The Item has successfully been verified using Plaid's data sources. The Database Insights result is pending and will be available upon Auth request. Neither micro-deposit-based verification nor database verification are being used for the Item. nullable, object An institution object. If the Item was created via Same-Day Micro-deposit verification, will be `null`. string The full institution name, such as `'Wells Fargo'` string The Plaid institution identifier nullable, String 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. nullable, Map The data directly returned from the server with no client side changes. onSuccess example ```javascript const onSuccess = (success: LinkSuccess) => { // If using Item-based products, exchange public_token // for access_token fetch('https://yourserver.com/exchange_public_token', { method: 'POST', headers: { "Content-Type": "application/json", }, body: JSON.stringify({ publicToken: success.publicToken, accounts: success.metadata.accounts, institution: success.metadata.institution, linkSessionId: success.metadata.linkSessionId, }), }); }; ``` \=\*=\*=\*= #### onExit  The `onExit` handler is called when a user exits Link without successfully linking an Item, or when an error occurs during Link initialization. The `PlaidError` returned from the `onExit` handler is meant to help you guide your users after they have exited Link. We recommend storing the error and metadata information server-side in a way that can be associated with the user. You’ll also need to include this and any other relevant info in Plaid Support requests for the user. **Properties** LinkError An object that contains the error type, error code, and error message of the error that was last encountered by the user. If no error was encountered, `error` will be `null`. nullable, String 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. LinkErrorCode The particular error code. Each `errorType` has a specific set of `errorCodes`. A code of 499 indicates a client-side exception. LinkErrorType A broad categorization of the error. String A developer-friendly representation of the error code. nullable, String The data directly returned from the server with no client side changes. Map An object containing information about the exit event nullable, String 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. nullable, LinkInstitution An institution object. If the Item was created via Same-Day Micro-deposit verification, will be `null`. string The full institution name, such as `'Wells Fargo'` string The Plaid institution identifier nullable, LinkExitMetadataStatus 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 solve a reCAPTCHA challenge 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 An exit status that is not handled by the current version of the SDK nullable, String The request ID for the last request made by Link. This can be shared with Plaid Support to expedite investigation nullable, Map The data directly returned from the server with no client side changes. onExit example ```javascript const onExit = (linkExit: LinkExit) => { supportHandler.report({ error: linkExit.error, institution: linkExit.metadata.institution, linkSessionId: linkExit.metadata.linkSessionId, requestId: linkExit.metadata.requestId, status: linkExit.metadata.status, }); }; ``` \=\*=\*=\*= #### onEvent  The React Native Plaid module emits `onEvent` events throughout the account linking process. To receive these events use the `usePlaidEmitter` hook. The `onEvent` callback is called at certain points in the Link flow. Unlike the handlers for `onSuccess` and `onExit`, the `onEvent` handler is initialized as a global lambda passed to the `Plaid` class. `OPEN`, `LAYER_READY`, `LAYER_NOT_AVAILABLE`, and `LAYER_AUTOFILL_NOT_AVAILABLE` events will be sent immediately in real-time, and remaining events will be sent when the Link session is finished and `onSuccess` or `onExit` is called. 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 the exact time when an event happened, use the `timestamp` property. The following `onEvent` callbacks 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`, `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** LinkEventName 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 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 Remember Me 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](https://plaid.com#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. 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 completed their Identity Verification session, which is now in a pending review state. The user has failed their Identity Verification session. 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](https://plaid.com/docs/link/embedded-institution-search/index.html.md) 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 Remember Me 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 the 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 using 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. The `UNKNOWN` event indicates that the event is not handled by the current version of the SDK. LinkEventMetadata An object containing information about the event. String 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`. String The error code that the user encountered. Emitted by: `ERROR`, `EXIT`. String The error message that the user encountered. Emitted by: `ERROR`, `EXIT`. String The error type that the user encountered. Emitted by: `ERROR`, `EXIT`. String The status key indicates the point at which the user exited the Link flow. Emitted by: `EXIT`. String The ID of the selected institution. Emitted by: _all events_. String The name of the selected institution. Emitted by: _all events_. String The query used to search for institutions. Emitted by: `SEARCH_INSTITUTION`. String Indicates if the current Link session is an update mode session. Emitted by: `OPEN`. nullable, string 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`. Optional The routing number submitted by user at the micro-deposits routing number pane. Emitted by `SUBMIT_ROUTING_NUMBER`. String The `linkSessionId` 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_. String 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`. String The request ID for the last request made by Link. This can be shared with Plaid Support to expedite investigation. Emitted by: _all events_. String 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`. String An ISO 8601 representation of when the event occurred. For example, `2017-09-14T14:42:19.350Z`. Emitted by: _all events_. LinkEventViewName 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 Documentary 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. ```javascript usePlaidEmitter((event) => { console.log(event); }); ``` \=\*=\*=\*= #### 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** object Data to submit during a Link session. String The end user's phone number. String The end user's date of birth. To be provided in the format "yyyy-mm-dd". ```javascript submit({ "phone_number": "+14155550123" }) ``` \=\*=\*=\*= #### destroy()  The `destroy` function clears state and resources from a previously opened session. The `destroy` function is only available on Android, as this state clearing behavior occurs automatically on iOS. `destroy` is intended for use with the Layer product and should be used if you are making multiple calls to `create` before calling `submit`. By calling `destroy` between the `create` calls, you can avoid unexpected behavior on the `submit` call. **Properties** This endpoint or method takes an empty request body. ```javascript create(tokenConfiguration1); (async () => { try { await destroy(); // Clear previous session state create(tokenConfiguration2); submit(phoneNumber); } catch (e) { console.error('Error during flow:', e); } })(); ``` #### OAuth  Using Plaid Link with an OAuth flow requires some additional setup instructions. For details, see the [OAuth guide](https://plaid.com/docs/link/oauth/index.html.md) . #### Upgrading  The latest version of the SDK is available from [GitHub](https://github.com/plaid/react-native-plaid-link-sdk) . New versions of the SDK are released frequently. Major releases occur annually. The Link SDK uses Semantic Versioning, ensuring that all non-major releases are non-breaking, backwards-compatible updates. We recommend you update regularly (at least once a quarter, and ideally once a month) to ensure the best Plaid Link experience in your application. SDK versions are supported for two years; with each major SDK release, Plaid will stop officially supporting any previous SDK versions that are more than two years old. While these older versions are expected to continue to work without disruption, Plaid will not provide assistance with unsupported SDK versions. ##### Migration guides  * Version 12.x removes the `PlaidLink` component and `openLink` function, which were deprecated in version 11.6.0. If you are using this method of opening Link, replace it with the new process that uses `create` and then `open`. For details, see [Opening Link](https://plaid.com/docs/link/react-native/index.html.md#opening-link) or the [README](https://github.com/plaid/react-native-plaid-link-sdk?tab=readme-ov-file#version--1160) . Version 12.x also removes the `PROFILE_ELIGIBILITY_CHECK_ERROR`. * Version 12.x updates the Android target SDK version and compile version from 33 to 35 and requires use of an Xcode 16 toolchain. * Version 11.x contains several breaking changes from previous major versions. For details, see the [migration guide on GitHub](https://github.com/plaid/react-native-plaid-link-sdk/blob/master/v11-migration-guide.md) . * When upgrading from 9.x to 10.x or later, you should remove any invocation of `useDeepLinkRedirector` on iOS, as it has been removed from the SDK, since it is no longer required for handling Universal Links. You must make sure you are using a compatible version of React Native (0.66.0 or higher) and the Plaid iOS SDK (see the [version compatibility chart](https://github.com/plaid/react-native-plaid-link-sdk#version-compatibility) on GitHub). * No code changes are required to upgrade from 8.x to 9.x, although you must make sure you are using a compatible version of the Plaid iOS SDK (4.1.0 or higher). * The only difference between version 7.x and 8.x is that 8.x adds support for Xcode 14. No code changes are required to upgrade from 7.x to 8.x, although you must convert to an Xcode 14 toolchain.