DDovel Team
Figma Dovel iQ v0.3 MVP (Active) · 2026-10-10
Product / Wallet & Payments / Add Payment Source

Add Payment Source

SCR-WALLET-03 · Wallet & Payments

Add Payment Source
LiveFigma 1465:9186

Layout

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.
P
Product agent
supports Design & PM
×