Payment Form

Collects payment amount and method (credit/debit card or bank account) with real-time formatting, validation, and a security notice.

Account balance: $1,250.00

Usage Notes

When to use: Use the Payment Form when users need to submit a payment by credit/debit card or bank account (ACH). This pattern is typically reached from a Bill Lookup or invoice page that populates the balance and amount fields.
Accessibility considerations: Payment method selection uses tile-style radio buttons for larger touch targets. Toggling between card and ACH removes inactive fields from tab order with hidden. Card number is formatted as the user types for readability. Validation errors are summarized in an alert and announced to screen readers. The authorization checkbox is marked as required.
NYSDS components used: nys-radiogroup, nys-radiobutton, nys-textinput, nys-select, nys-checkbox, nys-button, nys-alert
Customization points: Integrate with your payment gateway (Stripe, PayPal, etc.) by replacing the demo submit handler. The balance and amount values should be populated from your backend. Additional payment methods (e.g., digital wallets) can be added to the radio group. Billing address fields and state options can be expanded as needed.