React Payment Form
The checkout step, with the B2B path that consumer form kits leave out. The credit card method detects the brand as you type (Visa / Mastercard / Amex / Discover), groups digits the way the card is printed — 4-6-5 for Amex, 4-4-4-4 otherwise — runs a Luhn check, and validates a future MM/YY expiry with a brand-correct CVC length. The Purchase order method swaps in billing-entity and PO-number fields for net-terms buyers, which is how most semiconductor orders actually get placed. Validation is per-field on submit; nothing is stored. Try submitting empty, or 4242 4242 4242 4242 with any future date.
Installation
Usage
onSubmit only fires once the active method passes validation, and payload.method discriminates the union so the card and PO shapes stay type-safe. The exported detectBrand, luhnValid helpers are reusable if you validate elsewhere.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| amount | string | — | Pre-formatted amount shown on the submit button |
| allowPurchaseOrder | boolean | true | Show the net-terms Purchase Order method |
| onSubmit | (payload: CardPayload \ | PoPayload) => void | — |