Components
Both
src/components/payment-dialog.tsxPayment Dialog
The in-app payment sheet for a transactional charge: a known amount due now (an outstanding balance, a late-cancel fee). Built on the same picker as /checkout (shared payment-fields). Two things checkout doesn’t have: a card on file (the default; Use a different card reveals the same fields), and a result step, where the charge resolves onto a success or error screen, not a snackbar. Click to open; the demo charge succeeds unless noted.
Pay an outstanding balance: itemized, card on file
No card on file: collect a card (a Klarna enrollee)
Result step: a declined charge
A single flat charge: no line items, one ‘Amount due’ row
A longer ledger: the list scrolls, the sheet keeps its height
Used on
- Console
- /console (every page)/console/business-reporting/btw-hours/console/business-reporting/enrollment/console/business-reporting/fleet-size/console/business-reporting/payroll/console/catalog/console/financials/console/financials/balances/console/financials/earned/console/financials/refunds/console/financials/sales/console/financials/transactions/console/financials/waived-fees/console/fleet/[id]/console/locations/console/locations/[id]/console/locations/franchises/[id]/console/people/console/people/[id]/console/reporting/certificate-upload/console/reporting/dps-report/console/reporting/student-records/console/scheduling
- Portal
- /(student) (every page)/dashboard/dashboard/billing/dashboard/lessons