How to Integrate Retool with Plaid

Navigate to the Resources tab in your Retool instance (top navigation bar) and click the blue Add Resource button. From the resource type list, select REST API. Give the resource a clear name like 'Plaid API - Sandbox' or 'Plaid API - Production' to distinguish between environments. In the Base URL field, enter the appropriate Plaid API base URL for your environment. For sandbox use https://sandbox.plaid.com, for development use https://development.plaid.com, and for production use https://production.plaid.com. Do not add a trailing slash. Plaid's authentication differs from most APIs: credentials are not sent as headers but as JSON fields in the request body (client_id and secret). Because of this, leave the Authentication section set to None — you will add the credentials in each query's request body instead. Click Save Changes. Retool will confirm the resource was created. You now have a base resource you can clone for different environments — create separate resources for sandbox and production so developers don't accidentally run production queries during testing.

Never hardcode your Plaid client_id and secret directly in query bodies. Instead, use Retool's Configuration Variables to store these credentials securely. Navigate to Settings in the left sidebar, then click Configuration Variables. Create two new variables: PLAID_CLIENT_ID (your Plaid client_id) and PLAID_SECRET (your Plaid secret). Mark both as 'Secret' by toggling the secret switch — this restricts them so they can only be used in resource configurations and server-side queries, not accessed from the frontend. If you have both sandbox and production credentials, create environment-specific variables. In Retool, you can create separate resource environments (Settings → Environments) and assign different variable values per environment. This means your sandbox queries automatically use sandbox credentials and your production queries use production credentials when you switch environments. Once the configuration variables are saved, you can reference them in query bodies using the syntax {{ retoolContext.configVars.PLAID_CLIENT_ID }} and {{ retoolContext.configVars.PLAID_SECRET }}. These values resolve server-side and are never sent to the browser.

Open or create a Retool app and open the Code panel on the left side. Click the + icon to create a new query. Name it something descriptive like getAccountBalances. In the Resource dropdown, select your Plaid REST API resource. Set the Method to POST. In the Path field, enter /accounts/get — Retool will combine this with the base URL you configured in the resource to form the complete endpoint URL. In the Body section, select JSON as the body type. The /accounts/get endpoint requires client_id, secret, and access_token in the request body. Enter the following JSON body: { "client_id": "{{ retoolContext.configVars.PLAID_CLIENT_ID }}", "secret": "{{ retoolContext.configVars.PLAID_SECRET }}", "access_token": "{{ textInput_accessToken.value }}" } The access_token comes from a text input component where operators paste in the token for the account they want to look up. Click Run Query to test it. Plaid returns an accounts array with id, name, mask, type, subtype, and balances (available, current, limit) for each account linked to that Item. Add a Transformer in the Advanced tab to reshape the response. The transformer receives data as its input and should return a clean array for the Table component.

1// JavaScript transformer — reshapes Plaid /accounts/get response
2const accounts = data.accounts || [];
3return accounts.map(account => ({
4  account_id: account.account_id,
5  name: account.name,
6  official_name: account.official_name || 'N/A',
7  mask: account.mask ? `****${account.mask}` : 'N/A',
8  type: account.type,
9  subtype: account.subtype,
10  available_balance: account.balances.available !== null
11    ? `$${account.balances.available.toLocaleString('en-US', { minimumFractionDigits: 2 })}`
12    : 'N/A',
13  current_balance: account.balances.current !== null
14    ? `$${account.balances.current.toLocaleString('en-US', { minimumFractionDigits: 2 })}`
15    : 'N/A',
16  currency: account.balances.iso_currency_code || 'USD'
17}));

Create a second query named getTransactions. Set the resource to your Plaid API resource, the Method to POST, and the Path to /transactions/get. The /transactions/get endpoint requires client_id, secret, access_token, start_date (YYYY-MM-DD), and end_date (YYYY-MM-DD). It also accepts optional count (max 500) and offset for pagination. Use Retool's date picker components to drive the date range dynamically. Drag a Date Range Picker component onto your canvas and name it dateRange. Now set the query body to use those component values: { "client_id": "{{ retoolContext.configVars.PLAID_CLIENT_ID }}", "secret": "{{ retoolContext.configVars.PLAID_SECRET }}", "access_token": "{{ textInput_accessToken.value }}", "start_date": "{{ moment(dateRange.value[0]).format('YYYY-MM-DD') }}", "end_date": "{{ moment(dateRange.value[1]).format('YYYY-MM-DD') }}", "options": { "count": 100, "offset": {{ (table_transactions.paginationOffset || 0) }} } } This query drives a Table component named table_transactions. Set the table's Data source to {{ getTransactions.data.transactions }}. Plaid returns a transactions array where each transaction has transaction_id, account_id, amount, date, name, merchant_name, category, and pending fields. Add a transformer to format the data for display — amounts should be formatted as currency, and the date should be human-readable. Set the table to server-side pagination mode and bind the page count to {{ Math.ceil(getTransactions.data.total_transactions / 100) }}.

1// JavaScript transformer — reshapes Plaid /transactions/get response
2const transactions = data.transactions || [];
3return transactions.map(txn => ({
4  date: txn.date,
5  description: txn.merchant_name || txn.name,
6  category: txn.category ? txn.category[0] : 'Uncategorized',
7  amount: txn.amount > 0
8    ? `-$${Math.abs(txn.amount).toFixed(2)}`
9    : `+$${Math.abs(txn.amount).toFixed(2)}`,
10  account_id: txn.account_id,
11  pending: txn.pending ? 'Pending' : 'Posted',
12  transaction_id: txn.transaction_id
13}));

Items are the core Plaid object representing a user's connection to a financial institution. Items can have errors — the most common being ITEM_LOGIN_REQUIRED, which means the user needs to re-authenticate via Plaid Link. Build a query that checks item health so support agents can identify broken connections. Create a query named getItemStatus. Set method to POST, path to /item/get. Body: { "client_id": "{{ retoolContext.configVars.PLAID_CLIENT_ID }}", "secret": "{{ retoolContext.configVars.PLAID_SECRET }}", "access_token": "{{ textInput_accessToken.value }}" } Plaid returns an item object with institution_id, item_id, webhook, available_products, billed_products, consent_expiration_time, and an error field (null if healthy). It also returns an institution object with institution_name. In your app, add a Status Badge or Text component bound to getItemStatus data. Use a conditional expression to show a green 'Healthy' badge when error is null, and a red 'Error' badge with the error code when error is not null. For complex support panels managing many customer accounts, consider storing access_tokens in a Retool Database or PostgreSQL table and building a list view that runs getItemStatus for each selected account. This gives your support team a health overview across all connected accounts. For complex integrations involving multiple Plaid endpoints, custom transformers, and account health monitoring workflows, RapidDev's team can help architect and build your Retool solution.

1// JavaScript transformer — formats item status for display
2const item = data.item || {};
3const institution = data.institution || {};
4const error = item.error;
5
6return {
7  item_id: item.item_id,
8  institution_name: institution.name || 'Unknown',
9  institution_id: item.institution_id,
10  available_products: (item.available_products || []).join(', '),
11  billed_products: (item.billed_products || []).join(', '),
12  status: error ? 'ERROR' : 'HEALTHY',
13  error_code: error ? error.error_code : null,
14  error_message: error ? error.error_message : null,
15  consent_expiration: item.consent_expiration_time
16    ? new Date(item.consent_expiration_time).toLocaleDateString()
17    : 'No expiration'
18};

Now bring the three queries together into a cohesive financial admin panel. The layout should have a top section for account lookup controls, a middle section for account balances, and a bottom section for transaction history. At the top, place a Text Input component named textInput_accessToken with a placeholder like 'Enter Plaid access_token' and a Date Range Picker named dateRange defaulting to the last 30 days. Add a Query Button that triggers all three queries simultaneously on click. In the middle section, add a Container component and place three Statistic components inside for Available Balance (total across all accounts), Current Balance, and Account Count. Bind these to JavaScript queries that sum the values from getAccountBalances.data. Below that, place a Table component named table_accounts with data source {{ getAccountBalances.data }}. Add a second Table component named table_transactions with data source {{ getTransactions.data }}. Enable server-side pagination on table_transactions. On the right side or in a panel, add a Text or JSON component bound to getItemStatus.data to show the item health summary. Add an Alert component that appears conditionally (visible when {{ getItemStatus.data.status === 'ERROR' }}) with a message showing the error code and a link to Plaid's error documentation. Test the complete flow in Plaid's sandbox environment using test credentials before connecting any production access tokens. Verify that switching the Date Range Picker automatically refreshes the transactions table.

1// JavaScript query — calculate balance totals across all accounts
2const accounts = getAccountBalances.data || [];
3const totals = accounts.reduce((acc, account) => {
4  const available = parseFloat(
5    account.available_balance?.replace(/[$,]/g, '') || 0
6  );
7  const current = parseFloat(
8    account.current_balance?.replace(/[$,]/g, '') || 0
9  );
10  return {
11    available: acc.available + available,
12    current: acc.current + current,
13    count: acc.count + 1
14  };
15}, { available: 0, current: 0, count: 0 });
16
17return {
18  total_available: `$${totals.available.toLocaleString('en-US', { minimumFractionDigits: 2 })}`,
19  total_current: `$${totals.current.toLocaleString('en-US', { minimumFractionDigits: 2 })}`,
20  account_count: totals.count
21};