Bank Accounts

Lists the organization's Tesouro bank accounts, lets the user open an account with team access, and shows each account's details.

Part ofEmbedded Banking

Lists the organization's Tesouro bank accounts, lets the user open an account with team access, and shows each account's details.

Quick Start

import { BankAccountsWidget } from '@tesouro/embedded-components-react';

export function BankingPage() {
  return <BankAccountsWidget isBankingTaglineVisible />;
}

Under RefreshingRootWidgetProvider or WidgetProvider, the auth props are inherited.

Behaviour

  • The widget ships no bank artwork or document URLs. Supply bankLogoSrc, depositAgreementUrl, bankAddress and supportTeamUrl yourself; each one you omit is left out.
  • Without depositAgreementUrl, the create-account legal copy drops the clause that asks the user to agree to the deposit agreement. Both wordings are overridable via labels.createLegalTemplate and labels.createLegalTemplateWithoutAgreement.
  • The bank name comes from widget init, not from a prop.
  • The widget reads no URL or router. By default it switches between list and details itself; to own navigation, pass selectedAccountId and handle onSelectedAccountIdChange.
  • When the organization or signed-in user changes, the open account is cleared. In controlled mode the widget calls onSelectedAccountIdChange(null) instead. A token refresh doesn't clear it.

Props

Widget props

PropTypeDefaultDescription
isBankingTaglineVisiblebooleantrueShows the banking tagline at the top of the widget. The page heading above it belongs to your page.
bankLogoSrcstringundefinedBank logo for the tagline row. Omit and the row shows the bank name alone.
bankLogoAltstringundefinedAlt text when bankLogoSrc is set.
depositAgreementUrlstringundefinedDeposit-agreement PDF linked from the create-account legal copy. Omit and the clause naming it isn't rendered.
bankAddressstringundefinedBank postal address shown in the account-details domestic wire panel.
supportTeamUrlstringundefinedSupport URL linked from the account-details domestic wire copy.
data-testidstringundefinedOptional test id forwarded to the widget root.
selectedAccountIdControlledstring | nullundefinedControls the open details account.
defaultSelectedAccountIdUncontrolledstring | nullundefinedInitial uncontrolled details account.
onSelectedAccountIdChangeEvent(id: string | null) => voidundefinedCalled when the user opens details or goes back.
Label overrides
PropTypeDefaultDescription
labelsLabelsPartial<BankAccountsWidgetLabels>English labelsOverrides list/create-account UI copy.
accountDetailsLabelsLabels
Partial<AccountDetailsWidgetLabels>
Partial<AccountDetailsWidgetLabels>
English labelsOverrides the internal account details UI copy.
featureLabelsLabels
Partial<BankAccountsWidgetFeatureLabels>
Partial<BankAccountsWidgetFeatureLabels>
English labelsOverrides feature-level copy (account fallback name, create/edit/copy toasts, and account-details export toasts).

Examples

Selected account in a URL query param

'use client';

import { BankAccountsWidget } from '@tesouro/embedded-components-react';
import { usePathname, useRouter, useSearchParams } from 'next/navigation';

export function AccountsPage() {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();

  return (
    <BankAccountsWidget
      selectedAccountId={searchParams.get('bankAccountId')}
      onSelectedAccountIdChange={(id) => {
        const params = new URLSearchParams(searchParams.toString());
        if (id) params.set('bankAccountId', id);
        else params.delete('bankAccountId');
        const qs = params.toString();
        router.push(qs ? `${pathname}?${qs}` : pathname);
      }}
    />
  );
}

TypeScript

import type {
  AccountDetailsWidgetLabels,
  BankAccountsWidgetFeatureLabels,
  BankAccountsWidgetLabels,
  BankAccountsWidgetProps,
} from '@tesouro/embedded-components-react';

Balances

Shows the organization's embedded bank account balances, up to a configurable number of rows, with a total when there are several accounts and an optional View all accounts link.

Insights

Shows onboarding-style insights derived from the organization's embedded and external bank accounts, in Active and Dismissed tabs.

On this page

Quick StartBehaviourPropsWidget propsExamplesSelected account in a URL query paramTypeScript