Bank Accounts and Transactions

Manage transactions and accounts in one page. This view simply groups together the accounts management and the transaction categorization list so they can be managed together. Bank Accounts and Transactions

import { BankTransactionsWithLinkedAccounts } from '@layerfi/components'

<BankTransactionsWithLinkedAccounts
  showLedgerBalance={false}
  showCustomerVendor
  showTags
  showDescriptions
  showReceiptUploads
  mobileComponent={isMobileView ? 'mobileList' : 'regularList'}
  stringOverrides={{
    title: "Bank Transactions"
  }}
/>

Properties

showTitle

boolean

default:"true"

Controls whether the page title/header is displayed.

showDescriptions

boolean

default:"true"

Controls whether transaction descriptions are displayed in the transaction list.

showReceiptUploads

boolean

default:"true"

Controls whether receipt upload functionality is available for transactions.

showTooltips

boolean

default:"false"

Controls whether tooltips are displayed to provide additional information about transactions and categorization.

showTags

boolean

default:"false"

Controls whether transaction tags are displayed and can be managed in the transaction list.

showUnlinkItem

boolean

default:"false"

Controls whether the unlink option is available for linked accounts.

showUploadOptions

boolean

default:"false"

Controls whether upload options are displayed for transactions.

mobileComponent

string

mobileList will use the mobile list view for transactions, while regularList will use the regular list view. See the Bank Transactions component for more information on this view.

showLedgerBalance

boolean

Flag indicating whether to show the ledger balance corresponding to each linked account in the linked account card. This can be useful for users who want to reconcile ledger balances with their bank statements.

showCustomerVendor

boolean

default:"false"

Flag to enable or hide the customer/vendor column in the transactions table.

elevatedLinkedAccounts

boolean

default:"false"

Applies elevated styling to the <LinkedAccounts> component.

showBreakConnection

boolean

default:"false"

Shows the break-connection option in linked accounts, allowing users to disconnect accounts.

showCategorizationRules

boolean

Controls whether categorization rule suggestions are shown for bank transactions.

renderInAppLink

(details: LinkingMetadata) => ReactNode

Custom function for rendering in-app navigation links. Receives LinkingMetadata as a parameter and should return a ReactNode. See the In-App Linking guide for details.

stringOverrides

BankTransactionsWithLinkedAccountsStringOverrides

Overrides for default strings in the component.

Show BankTransactionsWithLinkedAccountsStringOverrides properties

title

string

Override for the page title. Defaults to “Bank transactions”.

linkedAccounts

LinkedAccountsStringOverrides

String overrides for the linked accounts section.

Show LinkedAccountsStringOverrides properties

title

string

Override for the linked accounts section title.

bankTransactions

BankTransactionsStringOverrides

String overrides for the bank transactions section. See BankTransactions component documentation for available options.

plaidHostedLinkConfig

PlaidHostedLinkConfig

Configuration for using Plaid Hosted Link instead of the embedded Plaid modal. When provided, account linking and repair flows open a Plaid-owned page in the browser rather than displaying an embedded modal.

Show PlaidHostedLinkConfig properties

isMobileApp

boolean

Set to true when the user will open the hosted link in an ASWebAuthenticationSession (iOS) or Android Custom Tab. This tells Plaid to use the correct redirect handling for mobile contexts.

redirectUri

string

Universal Link (iOS) or App Link (Android) that opens your app. Used when Plaid redirects from a third-party OAuth app (e.g., a bank’s app) back to your app during app-to-app authentication.

completionRedirectUri

string

URI to redirect to after the user completes the Plaid hosted link flow (e.g., myapp://plaid-complete). Recommended for mobile apps to automatically close the hosted link session and return to your app. If not provided, the user sees a “Return to app” message and must navigate back manually.

navigateToHostedLink

(hostedLinkUrl: string) => void | Promise<void>

required

Callback function that navigates the user to the Plaid Hosted Link URL. This function receives the Plaid-owned URL and should open it in the device’s browser or an in-app browser. Required for all hosted link configurations.

​Properties

Properties