React hooks and components for integrating with the Plaid Link drop module
With npm
:
npm install react-plaid-link --save
With yarn
yarn add -S react-plaid-link
Please refer to the official Plaid Link docs for a more holistic understanding of the various Link options.
Head to the react-plaid-link
storybook to try it out for yourself, or checkout:
This is the new and preferred approach for integrating with Plaid Link in React.
import React, { useCallback } from 'react';
import { usePlaidLink } from 'react-plaid-link';
const App = () => {
const onSuccess = useCallback((token, metadata) => {
// send token to server
}, []);
const config = {
clientName: 'Your app name',
env: 'sandbox',
product: ['auth', 'transactions'],
publicKey: '<YOUR_PLAID_PUBLIC_KEY>',
onSuccess,
// ...
};
const { open, ready, error } = usePlaidLink(config);
return (
<MyButton onClick={() => open()} disabled={!ready}>
Connect a bank account
</MyButton>
);
};
export default App;
import React from 'react';
import { PlaidLink } from 'react-plaid-link';
const App = props => {
const onSuccess = (token, metadata) => {
// send token to server
};
return (
<PlaidLink
clientName="Your app name"
env="sandbox"
product={['auth', 'transactions']}
publicKey="<YOUR_PLAID_PUBLIC_KEY>"
onSuccess={onSuccess}
{...}
>
Connect a bank account
</PlaidLink>
);
};
export default App;
Please refer to the official Plaid Link docs for a more holistic understanding of the various Link options.
// src/types/index.ts
interface PlaidLinkOptions {
clientName: string;
env: string;
publicKey: string;
product: Array<string>;
onSuccess: Function;
// optional
onExit?: Function;
onLoad?: Function;
onEvent?: Function;
accountSubtypes?: { [key: string]: Array<string> };
countryCodes?: Array<string>;
language?: string;
linkCustomizationName?: string;
oauthNonce?: string;
oauthRedirectUri?: string;
oauthStateId?: string;
paymentToken?: string;
token?: string;
userEmailAddress?: string;
userLegalName?: string;
webhook?: string;
}
Typescript definitions for react-plaid-link
are built into the npm packge.
Author: plaid
Live Demo: https://plaid.github.io/react-plaid-link
GitHub: https://github.com/plaid/react-plaid-link
#react #reactjs #javascript #react-js