Bothsrc/components/payment-fields.tsx

Payment Fields

The shared primitives behind the checkout payment picker and the in-app PaymentDialog. Extracted so the two surfaces read as one and can’t drift.

Radio dot

Hollow ring → ink-filled dot that scales in, the selection language shared with the choice-card check.

Three marks inline; the rest live in a hover/tap popover on the +N chip.

The network mark + label + last four for a stored instrument.

Visa ···· 4242

The purpose-optimized card-entry fieldset: masked number with live brand detection, MM/YY, numeric CVC/ZIP.

Card number

Name on card

Expiry

CVC

ZIP

Console: /console (every page)/console/business-reporting /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/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)/checkout /dashboard /dashboard/billing /dashboard/lessons