11 — Design System Mapping (Payments)
Maps payments components to Material 3 + Flutter widget + tokens. Reference 00-shared/04 for the global mapping.
Component mapping
| Component | M3 role | Flutter widget | Spacing | Typography | Elevation | Radius | Colors |
|---|---|---|---|---|---|---|---|
| PaymentRow | List item | ListTile custom | h ≥ 72, gap 12 | titleSmall ref | e-0 | r-md | surface / onSurface |
| RefundText | Money display | Text + tabular | — | titleMedium | — | — | onSurface |
| StatusBadge | Badge | Chip/Badge | — | labelMedium | e-0 | r-full | per status on *Container |
| ReceiptViewCard | Elevated card | Card | padding 24 | body/body | e-1 | r-lg | surfaceContainerLowest |
| PaymentActionsRow | Action row | Wrap of buttons | gap 8 | labelLarge | — | r-md | primary/error |
| MoneyProgress | Progress | LinearProgressIndicator | — | bodySmall | — | r-sm | primary/success |
| NewPaymentForm | Form | Form+AppTextField | gap 16 | bodyMedium | e-1 | r-md | surfaceVariant |
| Reconcile radios | Radio group | RadioListTile | — | bodyMedium | — | — | primary |
Iconography
- Offline gateways: cash/cheque/bank_transfer.
- Gateway logos (generic icons; no brand logo w/o asset)
(forward-looking). - Status icons: check_circle, schedule, cancel, replay.
Motion
- Page transitions
m-base; sheetm-base; FABm-entrance; money updates 150 msm-fast; reduced motion → fades.
Responsive
- Phone: single column, FAB, bottom nav.
- Tablet (600–839): two-column payment list; detail in master pane.
- Landscape tablet / desktop: table layout (columns: ref, payer, gateway, amount, status, date), filter rail, hover actions.