expo-plaid-link
Version:
Plaid Link is a quick and secure way to integrate with the Plaid API. Here is an Expo component which can be easily drop into your Expo project.
203 lines (193 loc) • 7.65 kB
HTML
<h3><a id="user-content-expo-plaid-link" class="deep-link" href="#expo-plaid-link-auth" aria-hidden="true"
rel="nofollow"><svg aria-hidden="true" class="deep-link-icon" height="16" version="1.1" viewBox="0 0 16 16"
width="16">
<path
d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z">
</path>
</svg></a>Expo Plaid Link</h3>
Plaid Link is a quick and secure way to integrate with the Plaid API. Here is an Expo component which can be easily drop
into your Expo project.
<p>
To get started you need to sign up at <a href="https://plaid.com/">https://plaid.com/</a> for free Palid API keys.
This front end component need you put your PUBLIC_KEY in place, and your private key is used at backend to futhur call
to get Transactions etc.
</p>
<p>
Client uses this front end component Plaid Link to establish link with bank and Plaid return a public_token, you send
the public_token back to your server
to use the public_token with your private key to get an access_token and item_id which you use for access transactions
etc.
</p>
<p><img src="link-example-img.png" alt="expo-plaid-link"></p>
<h3><a id="user-content-usage" class="deep-link" href="#usage" aria-hidden="true" rel="nofollow"><svg aria-hidden="true"
class="deep-link-icon" height="16" version="1.1" viewBox="0 0 16 16" width="16">
<path
d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z">
</path>
</svg></a>Usage
</h3>
<pre><code>
npm i expo-plaid-link
</code></pre>
<h4><a id="user-content-api" class="deep-link" href="#api" aria-hidden="true" rel="nofollow"><svg aria-hidden="true"
class="deep-link-icon" height="16" version="1.1" viewBox="0 0 16 16" width="16">
<path
d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z">
</path>
</svg></a>API</h4>
<table>
<thead>
<tr>
<th>Prop</th>
<th>Type</th>
<th>defaultValue</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>publicKey</strong> (required)</td>
<td><code>string</code></td>
<td></td>
</tr>
<tr>
<td><strong>env</strong> (required)</td>
<td><code>string</code></td>
<td></td>
</tr>
<tr>
<td><strong>product</strong> (required)</td>
<td><code>string</code></td>
<td></td>
</tr>
<tr>
<td>clientName</td>
<td><code>string</code></td>
<td></td>
</tr>
<tr>
<td>selectAccount</td>
<td><code>boolean</code></td>
<td>false</td>
</tr>
<tr>
<td>PlaidLinkUri</td>
<td><code>string</code></td>
<td>'https://cdn.plaid.com/link/v2/stable/link.html'</td>
</tr>
<tr>
<td>webhook</td>
<td><code>string</code></td>
<td><code>'https://requestb.in'</code></td>
</tr>
<tr>
<td>onMessage</td>
<td><code>function</code></td>
<td></td>
</tr>
<tr>
<td>onLoad</td>
<td><code>function</code></td>
<td></td>
</tr>
<tr>
<td>onReady</td>
<td><code>function</code></td>
<td></td>
</tr>
<tr>
<td>onAcknowledged</td>
<td><code>function</code></td>
<td></td>
</tr>
<tr>
<td>onEvent</td>
<td><code>function</code></td>
<td></td>
</tr>
<tr>
<td>onConnected</td>
<td><code>function</code></td>
<td></td>
</tr>
<tr>
<td>onExit</td>
<td><code>function</code></td>
<td></td>
</tr>
</tbody>
</table>
<pre><code>
//******************** Code Smaple *****************************
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import PlaidClient from 'expo-plaid-link';
export default function App() {
return (
<View style={{flex: 1}}>
<Text>Plaid Client</Text>
<PlaidClient
selectAccount="false"
env="sandbox"
PublicKey="[PUBLIC_KEY]"
origin='localhost'
product="auth,transactions"
clientName="Plaid Link"
webhook="https://requestb.in"
PlaidLinkUri='https://cdn.plaid.com/link/v2/stable/link.html'
onLoad={onLoad}
onEvent={onEvent}
onConnected={onConnected}
onExit={onExit}
onReady={onReady}
onAcknowledged={onAcknowledged}
onMessage={onMessage}
onPlaidRef={onPlaidRef}
/>
</View>
);
}
function onLoad(obj){console.log('call back onLoad:',obj)}
function onReady(obj){console.log('call back onReady:',obj)}
function onAcknowledged(obj){console.log('call back onAcknowledged:',obj)}
function onConnected(obj){console.log('call back onConnected:',obj);}
function onExit(obj){console.log('call back onExit:',obj)}
function onEvent(obj){console.log('call back onEvent:',obj)}
function onMessage(obj){console.log('call back onMessage:',obj)};
function onPlaidRef(obj){console.log('call back onPlaidRef:',obj)};
//******************************************************
</code></pre>
<h5><a id="user-content-returned-data-object" class="deep-link" href="#returned-data-object" aria-hidden="true"
rel="nofollow"><svg aria-hidden="true" class="deep-link-icon" height="16" version="1.1" viewBox="0 0 16 16"
width="16">
<path
d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z">
</path>
</svg></a>Returned <strong>data</strong> object</h5>
<div class="highlight json">
<pre>
<code>
{
"action": "plaid_link-undefined::connected",
"metadata": {
"account": {
"id": null,
"name": null
},
"account_id": null,
"public_token": "public-sandbox-e697e666-9ac2-4538-b152-7e56a4e58888",
"institution": {
"name": "Chase",
"institution_id": "ins_3"
}
}
}
</code>
</pre>
</div>
<p>For more information please read
<a href="https://plaid.com/docs/quickstart/#creating-items-with-link-and-the-api" rel="nofollow"> their docs</a></p>
<p>For <code>Sandbox mode</code> the credentials are:</p>
<pre><code>
username: user_good
password: pass_good
</code></pre>