Credit Card

• Front: the chip, the issuer's logo and color, the number padded with • and grouped by issuer (Amex 4-6-5), the holder and the expiry.
• Back: the stripe, the signature panel and the security code.

Props

• Data: number, name, expiry (MM/YY, MM/YYYY or digits only) and cvc are plain strings. * or x in number hide digits of a saved card.
• `issuer`: visa, mastercard, amex… — pass it for a saved card; by default it is detected from the number.
• `focused`: number, name, expiry or cvc highlights the field being typed, and cvc turns the card over (Amex keeps its code on the front). With reduced motion it turns without the 3D spin.
• Size: its width sets its size (w-72 by default) and the text scales with it.
• `labels`: translates the captions and the accessible name. The card is one role="img" ("Visa card ending in 4242, expires 12/28").

Logos for Visa, Mastercard, Elo, American Express, Hipercard, Diners Club, Discover and JCB; other issuers show their name on the theme gray.

Issuer detection and the form's validation (number, expiry, security code) live in the credit-card-validation lib, usable without the card. Pair the number field with the credit-card mask, which follows the issuer too.