Component size, gzipped: 36kb

Payment Card


The Payment Card input automatically detects and formats credit card types. It shows a small thumbnail icon of the parsed credit card brand to let users know they have entered their card in the correct format. The supported credit card brands are listed here:

Card Type
Example Number
American Express
Diners Club

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 metadata about the card.

This component is based on the Input component. All of the props you can pass to Input also work on PaymentCard: size, error, positive, disabled, etc. The only exception to this is overrides, which has a slightly different API.


Basic usage

Default value

Payment form

Card number
Expiration date

If you'd like to add further validations, check out the card-validator package that Base Web uses under the hood too.

Stateful (uncontrolled) usage

As with many of our components, there is also an uncontrolled version, StatefulPaymentCard, which manages its own state.


Payment Card props

Defines styles for inputs that are grouped with other controls.
Sets aria-describedby attribute.
Sets aria-label attribute.
Sets aria-labelledby attribute.
Determines if browser should provide value suggestions.
If true the input will be focused on the first mount.
If true, adds a clear value icon button to the end of the input container.
Renders component in disabled state.
Renders component in error state.
Id attribute value to be added to the input element and as a label's for attribute value.
A hint as to the type of data that might be entered by the user while editing the element or its contents.
A ref to access an input element.
max value when used as input type=number
min value when used as input type=number
Name attribute.
Called the onBlur event triggers.
Called when input value is changed.
Called the onFocus event triggers.
Called the onKeyDown event triggers.
Called the onKeyPress event triggers.
Called the onKeyUp event triggers.
Lets you customize all aspects of the component.
A regex that is used to validate the value of the input on form submission.
Input's placeholder.
Renders component in positive state.
Renders component in required state.
Renders component in provided size.
Input value attribute.

Payment Card exports

You can import this module like so:

import {StatefulPaymentCard} from 'baseui/payment-card'

It exports the following components or utility functions:

Input exports

You can import this module like so:

import {StatefulInput} from 'baseui/input'

It exports the following components or utility functions: