Payment Card
Payment card input automatically detects the card type, shows the icon and formats the number accordingly. It supports following brands:
The card-validator library is used to determine the card format. It's also re-exported from baseui/payment-card as {valid} in case you need more meta-data about the card.
This component is based on input and shares the most of its APIs.
Additionally, you can fully customize any part of the Payment Card through the overrides prop. The Payment Card consists of multiple subcomponents that are listed bellow and you can override each one of them. To help you identify the names of these subcomponents, you can highlight them through this selector:
Note: You should always use longhand CSS properties. Mixing shorthands and longhands will lead into strange behaviors!
PaymentCard API
Warning any = "Prop types are not shown in dev mode"
extract-react-types is not being run in dev mode for speed reasons. If you need to
see prop types add the environment variable FORCE_EXTRACT_REACT_TYPES
eg:
FORCE_EXTRACT_REACT_TYPES=true yarn start <packageName>FORCE_EXTRACT_REACT_TYPES=true yarn start:<team>