Plaid API Create in React Native Application
In this article, we will talk about one particular API known as Plaid, which allows apps to connect with the users’ bank accounts. This emphasizes that APIs can make programming quite simple and useful – highly sensitive and complicated data such as banking information becomes safely and easily accessible using an API. Moreover, plaid happens to be a good example of excellent documentation.
Server-Side
- “Register” your app after receiving developer access to the API.
3 API keys will be available to you: a secret, public key, and a client_id. An API key happens to be the key for the application of the developer to gain access to the API as a whole. In this Plaid example, a client_id can be considered a non-sensitive and public identifier used to initiate Plaid Link. A secret happens to be a private identifier which we need for accessing financial information. This must not be in client-side code. We are going to save these 3 API keys in a secrets.js file by making use of process.env.
process.env.PLAID_CLIENT_ID = 'YOUR_CLIENT_ID_HERE'
process.env.PLAID_SECRET = 'YOUR_PLAID_SECRET_HERE'
process.env.PLAID_PUBLIC_KEY = 'YOUR_PLAID_PUBLIC_KEY_HERE'
2. Let us require Plaid in your routes file which has been named plaid.js.
We will likewise provide our file with “access” to the secrets. Besides this, Plaid also offers different environments to you for building in: development, sandbox, and production. Make sure to use sandbox at all times while building your project.
const plaid = require('plaid')const PLAID_CLIENT_ID = process.env.PLAID_CLIENT_ID
const PLAID_SECRET = process.env.PLAID_SECRET
const PLAID_PUBLIC_KEY = process.env.PLAID_PUBLIC_KEY
const PLAID_ENV = envvar.string('PLAID_ENV', 'sandbox')
3. The Plaid client has to be initialized. This will provide us access to different methods and web endpoints which the developers have given us from Plaid.
const plaidClient = new plaid.Client(
PLAID_CLIENT_ID,
PLAID_SECRET,
PLAID_PUBLIC_KEY,
plaid.environments[PLAID_ENV]
);
Client-Side
We’ll keep this section short since it has much more to do with Plaid Link within a React Native project than it does with incorporating a third-party API. Although you might want to know how it was accomplished, we have not covered this topic in this blog.
4. Make use of Plaid Link for connecting your User to Plaid. Render the PlaidAuthenticator in the Link Component which we have imported from react-native-plaid-link.
render() {
return <PlaidAuthenticator
onMessage={this.onMessage}
publicKey="YOUR_PLAID_PUBLIC_KEY"
env="sandbox"
product="auth,transactions"
clientName="YourAppNameHere"
/>
}
onMessage = (data) => {
this.setState({data})
}
5. Use a thunk for sending the public token to the backend.
export const sendToken = token => {
return async dispatch => {
try {
const res = await axios.post(`${server}/api/plaid/plaid_exchange`, { public_token: token });
dispatch(sendPublicToken(res.data));
} catch (err) {
console.log('Error sending public token: ', err.message);
}
}
}
Back to Server-Side
Plaid makes use of POST requests for getting the app “GET” info: bank, transactions information, and accounts.
6. Make requests to Plaid after writing your routes.
app.post('/get_access_token', function(request, response, next) {
PUBLIC_TOKEN = request.body.public_token;
plaidClient.exchangePublicToken(PUBLIC_TOKEN, function(error, tokenResponse) {
if (error != null) {
console.log('Could not exchange public_token!' + '\n' + error);
return response.json({error: msg});
}
ACCESS_TOKEN = tokenResponse.access_token;
ITEM_ID = tokenResponse.item_id;
console.log('Access Token: ' + ACCESS_TOKEN);
console.log('Item ID: ' + ITEM_ID);
response.json({'error': false});
});
});
7. Make use of methods such as getTransactions provided by Plaid for making MORE requests.
plaidClient.getTransactions(accessToken, '2017-01-01', '2017-02-15',{
count: 250,
offset: 0,
}, (err, result) => {
// Handle err
const transactions = result.transactions;
});
In case your API permits you, it might also be feasible for you to make API calls to the API from the client-side application directly.
Learn more here about Data Flow between our Client-Side Application and our Server-Side Application (and our Server-Side Application and the Plaid API) https://www.rlogical.com/blog/what-are-the-most-used-third-party-api-for-react-native-application/
Top comments (0)