Plaid

Retrieving Transactions for an Account

Demo

You can see the demo of the functionality on this page and the read-only editor here

High-level app flow

  1. 1.
    User uses Plaid Link to authenticate their financial account
  2. 2.
    User calls the Plaid API to retrieve information about that account

Preliminary set-up

1. Create a Dwolla account

Create a sandbox account here.

2. Copy API calls

Copy in the Plaid API Connector configuration from here to your app. Make sure to replace the Client ID and the Secret with yours.
3. Copy the Javascript to Bubble elements
Copy the JS to Bubble elements on this page - these will serve to pass the data from Plaid Link to Bubble. Note that you can remove some of these, add more of them (per the Plaid docs), or change their names but then you'll have to update the code below.

Connect Account

Plaid Link is Plaid's tool that is used to easily connect user's bank account to Dwolla. To initialize it you'll need to place an HTML element with the following code somewhere on the page on which you want to start the Plaid flow. You can place it in a reuseable element (like the header) if you want to be able to start this flow from multiple pages.
<script
src="https://cdn.plaid.com/link/v2/stable/link-initialize.js"></script>
Open Plaid Link by running the following code using Toolbox Run Javascript action:
var linkHandler = Plaid.create({
env: 'transactions',
apiVersion: 'v2',
clientName: 'Stripe/Plaid Test',
key: '4a56d2de92db147dc4505db7167dcf',
product: 'auth',
selectAccount: true,
onSuccess: function(public_token, metadata) {
// Send the public_token and account ID to your app server.
bubble_fn_account_id(metadata.accounts[0].id);
bubble_fn_account_name(metadata.accounts[0].name);
bubble_fn_account_mask(metadata.accounts[0].mask);
bubble_fn_account_type(metadata.accounts[0].type);
bubble_fn_account_subtype(metadata.accounts[0].subtype);
bubble_fn_institution_name(metadata.institution.name);
bubble_fn_token(public_token);
},
onExit: function(err, metadata) {
// The user exited the Link flow.
if (err != null) {
// The user encountered a Plaid API error prior to exiting.
}
},
});
linkHandler.open();
Here are the changes you should make in the code above:
  • Make the environment variable be whatever environment you're using in Plaid. Just like with the Dwolla base URL it's a good practice to make this dynamic and store it on the Website object, so it's easy to update later
  • Update the key with your key from Plaid
  • Update all of the bubble_fn.... names with the names of the Javascript to Bubble elements that you place on the page (or in a reuseable)
    • This is how Plaid Link will pass information for the connected bank account back to Bubble
When using Plaid Link in Sandbox mode you can use "user_good" and "pass_good" to connect to a bank account in any bank.
When Plaid Link is finished running, it will pass the bank account values to the JavaScript to Bubble elements, as shown above.

3. Exchange the Public Token for an Access Token and Item ID

Once you're done with Plaid Link, it will return a Public Token that will be passed into a JS to Bubble element. You should then run an API call to exchange it for an Access Token and then store that Access Token to be able to work with the account later. You should also store the Item ID that's returned by the same call in case it's needed.

4. Run the Get Transactions call

You can now retrieve transactions for that account! Just specify the start date, end date, and the access token for the account and you'll receive a full list of transactions. You can also modify the API call with additional parameters per Plaid's documentation, as needed.