@abartolo/react-plaid-link 中文文档教程
react-plaid-link
React 钩子和组件 与 Plaid Link drop module 集成
Install
使用 npm
:
npm install react-plaid-link --save
使用 yarn
yarn add -S react-plaid-link
Documentation
请参阅官方格子链接文档以了解 更全面地了解各种链接选项。
Examples
前往 react-plaid-link
storybook 亲自尝试一下,或者 checkout:
Using React hooks
这是在 React 中与 Plaid Link 集成的新的首选方法。
import React, { useCallback } from 'react';
import { usePlaidLink } from 'react-plaid-link';
const App = () => {
const onSuccess = useCallback((token, metadata) => {
// send token to server
}, []);
const config = {
token: '<GENERATED_LINK_TOKEN>',
onSuccess,
// ...
};
const { open, ready, error } = usePlaidLink(config);
return (
<MyButton onClick={() => open()} disabled={!ready}>
Connect a bank account
</MyButton>
);
};
export default App;
Using a React component
import React from 'react';
import { PlaidLink } from 'react-plaid-link';
const App = props => {
const onSuccess = (token, metadata) => {
// send token to server
};
return (
<PlaidLink
token="<GENERATED_LINK_TOKEN>"
onSuccess={onSuccess}
{...}
>
Connect a bank account
</PlaidLink>
);
};
export default App;
All available Link configuration options
请参阅官方格子链接文档以了解 更全面地了解各种链接选项和 link_token。
// src/types/index.ts
interface PlaidLinkOptionsWithLinkToken = {
token: string;
onSuccess: Function;
onExit?: Function;
onLoad?: Function;
onEvent?: Function;
receivedRedirectUri?: string;
}
type PlaidLinkOptions = PlaidLinkOptionsWithLinkToken;
Typescript support
react-plaid-link
的 Typescript 定义内置于 npm 包中。
react-plaid-link
React hooks and components for integrating with the Plaid Link drop module
Install
With npm
:
npm install react-plaid-link --save
With yarn
yarn add -S react-plaid-link
Documentation
Please refer to the official Plaid Link docs for a more holistic understanding of the various Link options.
Examples
Head to the react-plaid-link
storybook to try it out for yourself, or checkout:
Using React hooks
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 = {
token: '<GENERATED_LINK_TOKEN>',
onSuccess,
// ...
};
const { open, ready, error } = usePlaidLink(config);
return (
<MyButton onClick={() => open()} disabled={!ready}>
Connect a bank account
</MyButton>
);
};
export default App;
Using a React component
import React from 'react';
import { PlaidLink } from 'react-plaid-link';
const App = props => {
const onSuccess = (token, metadata) => {
// send token to server
};
return (
<PlaidLink
token="<GENERATED_LINK_TOKEN>"
onSuccess={onSuccess}
{...}
>
Connect a bank account
</PlaidLink>
);
};
export default App;
All available Link configuration options
Please refer to the official Plaid Link docs for a more holistic understanding of the various Link options and the link_token.
// src/types/index.ts
interface PlaidLinkOptionsWithLinkToken = {
token: string;
onSuccess: Function;
onExit?: Function;
onLoad?: Function;
onEvent?: Function;
receivedRedirectUri?: string;
}
type PlaidLinkOptions = PlaidLinkOptionsWithLinkToken;
Typescript support
Typescript definitions for react-plaid-link
are built into the npm packge.