Add Payment Source
SCR-WALLET-03 · Wallet & Payments
LiveFigma
1465:9186Layout
Default-choice state: rendered as a bottom sheet (drag handle, "X" close), two side-by-side cards ("Connect a bank" with a piggy-bank icon, "Add manually" with a pencil/crossed-out icon), each with a title and one-line description. Connected-list state: progress badge context from the entry flow, bold "Connected accounts" headline + subtext, grouped by type ("Cash" / "Credit") with each account as a row (bank logo, name, masked number, balance or "Add Funds"/"Linked" tag), a dashed "Add another account" pill, full-width "Activate wallet" button. Manual state: "Add account" headline + subtext, a segmented Card/Bank account toggle, the relevant field set below, a "Scan card instead" dashed-outline button (Card tab only), full-width "Continue" button. Card-scan state: full-bleed camera-viewfinder mock with corner brackets, "Center your card in the frame" headline, close (X) and help icons top corners, "Enter details manually" fallback pinned at the bottom.
States
- **Default**: choice between connect and manual.
- **Connected**: list of existing connected accounts/cards, grouped by type, plus "Add another account".
- **Manual — card**: card entry form, with a "Scan card instead" option.
- **Manual — card scan**: camera capture UI, falls back to "Enter details manually".
- **Manual — bank account**: bank account entry form (account name/number, routing number, bank name, nickname, account type).
- **Confirmed**: selected or entered source attached to the project wallet.
Acceptance criteria
- Choosing "connected account or card" shows already-connected accounts/cards, grouped by type, plus an option to connect a new one.
- Selecting an existing connected source and confirming attaches it to this project's wallet.
- Choosing "add manually" shows a Card/Bank account toggle and the relevant details entry form, with no live connection required.
- Completing the manual form attaches the manually entered source to this project's wallet.
- Manual add remains available regardless of whether any connected accounts exist.
- After a source is attached, the wallet setup step reflects at least one active payment source.
- On the Card tab, "Scan card instead" opens a camera capture screen; it can fall back to manual entry at any point without losing progress.
Endpoints
None mapped yet — the backend agent will own these.