All components (204)

Card field

Fields · CardField

What it is and when to use it

The card details in one block: number, expiry date and security code, and the cardholder if requested. It is a fieldset with its legend, because the three fields are a single piece of data.

When to use it

Card payment inside the page itself. What comes out of onChange is clean: the number, digits only (EMPTY_CARD to start blank).
listCard(value, today) says whether it is complete and error-free, to enable the pay button; errors renders what the gateway responds, which takes precedence over what is checked here.
withHolder when the gateway asks for the printed name. alert is the note underneath (with "" it does not appear).

When not to

Showing a card that is already saved: it is not asked for again; maskCard(number) writes it as "•••• 4242".
A bank account: IbanField.

Keyboard: Tab goes through holder, number, expiry date and code. The number is grouped as you type (for American Express, 4-6-5, as it is printed) and the slash in the expiry date is inserted automatically: 1228 is written as 12/28. Each field is checked when you leave it, not on every keystroke.

Accessibility: the brand is stated in words ("Visa", "American Express"), not with a logo that is not read aloud. The code asks for three or four digits depending on the brand, and the help says where it is printed. They carry the autocomplete values the browser expects (cc-name, cc-number, cc-exp, cc-csc): without them, autofill does not offer the saved card. The expiry date is valid until the last day of its month.

Fine-tuning: no variables of its own: the fields use --amset-field-* and the block is adjusted with the classes amset-payment-card__title, amset-payment-card__row, amset-payment-card__brand and amset-payment-card__alert.

What it looks like

Pay by card

Cardholder name

Card number

Expiry date

Month and year

Security code

3 digits, on the back of the card

Your details are sent encrypted to the payment gateway. Nothing is stored here.

<CardField
  label="Pay by card"
  withHolder
  value={tarjeta}
  onChange={setTarjeta}
/>

Props

Import it with import { CardField } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`onChange`required	`(data: CardData) => void`	—
`value`required	`CardData`	—
`alert`	`string`	Note under the block. By default, the "we do not store the card" one.
`className`	`string`	Merged with the library classes; it does not replace them.
`disabled`	`boolean`	—
`errors`	`CardErrors`	Outside errors (the gateway's). They take precedence over the local ones.
`label`	`string`	Title of the block. It is the legend of the group of fields.
`size`	`"sm" \| "md" \| "lg"`	—
`today`	`Date`	To be able to test expiry without depending on today's date.
`variant`	`FieldVariant`	—
`withHolder`	`boolean`	Also asks for the name printed on the card.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: