Transfers

Part ofEmbedded Banking↗

Lists recent transfers across the organization's embedded bank accounts and lets the user send a book or ACH transfer.

Quick Start

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

export function TransfersPage() {
  return (
    <TransfersWidget
      baseUrl="https://api.example.com"
      widgetToken="wt_live_abc123"
      organizationId="org_xyz"
    />
  );
}

Omit the auth props when the widget sits inside a configured RootWidgetProvider or WidgetProvider.

Behaviour

• The Transfer money button shows only when the token has embedded:transfer:write and embedded:bankaccount:read.
• Verified, active external accounts appear in the modal only when the token also has embedded:externalbankaccount:read and payment_rail:ach. Without them, the modal lists embedded accounts only.
• The widget shows a skeleton until every page of accounts has loaded, an error with Retry if a query fails, and an empty state when there are no transfers.
• The list covers every bank account the user can see, newest first, 25 transfers to a page by default. Previous and Next move between pages. Changing the page size, the organization or the signed-in user returns the list to the first page.
• Each row shows the date, the From and To accounts, the status and the amount. External accounts carry an External badge, and hovering an account names its kind. A failed amount is struck through, and a returned transfer shows a short reason under its status.
• Clicking a row, or pressing Enter or Space on it, opens a Transfer details panel with the amount, status, accounts, who started the transfer (or "System") and when, in the browser's time zone.
• A returned ACH transfer's panel explains the return, says the money was refunded when it left one of the user's accounts, and says transfers to that external account are paused. It never shows the raw return code. Pass onLinkAccountClick to add a Link a new account button, for example to open LinkedAccountsWidget's wizard through its isLinkAccountOpen prop.
• isTransferMoneyOpen opens the modal even when the widget hides its own button. The token's scopes still gate the submit.
• Every opening starts on the first step with nothing selected; you can't preselect a step or accounts.

Props

Widget props

Examples

Open the modal from your own button

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

export function TransfersPage() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Send money</button>
      <TransfersWidget
        isTransferMoneyOpen={isOpen}
        onTransferMoneyOpenChange={setIsOpen}
      />
    </>
  );
}

Wire onTransferMoneyOpenChange back into your state, or the modal stays pinned to your value.

Custom copy

<TransfersWidget
  labels={{
    widgetTitle: 'Transferencias',
    transferMoneyCta: 'Transferir dinero',
  }}
  featureLabels={{ defaultCurrencyCode: 'USD', defaultSecCode: 'CCD' }}
/>

See the exported TransfersWidgetLabels and TransfersWidgetFeatureLabels types for every key. The English defaults are exported as TRANSFERS_WIDGET_LABELS_EN and TRANSFERS_FEATURE_LABELS_EN.

TypeScript

import type {
  TransfersWidgetProps,
  TransfersWidgetLabels,
  TransfersWidgetFeatureLabels,
} from '@tesouro/embedded-components-react';