Component size, gzipped: 36kb

Payment Card

Loading
API

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
378282246310005
Diners Club
36259600000004
Discover
6011111111111117
ELO
6550000000000001
JCB
3530111333300000
Maestro
6304000000000000
Mastercard
5555555555554444
UnionPay
6246729687894613
Visa
4111111111111111

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.

Examples

Basic usage

Default value

Payment form

Card number
Expiration date
CVC

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.

API

Payment Card props

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