Payment Card

Payment card input automatically detects the card type, shows the icon and formats the number accordingly. It supports following brands:

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

This component is based on input and shares the most of its APIs.

Controlled usage



Uncontrolled usage

Default value

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

"aria-label" nullable string required

Sets aria-label attribute.

"aria-labelledby" nullable string required

Sets aria-labelledby attribute.

"aria-describedby" nullable string required

Sets aria-describedby attribute.

adjoined $Keys<typeof ADJOINED> required

Defines styles for inputs that are grouped with other controls.

$Keys{ none: "none", left: "left", right: "right", both: "both" }

autoComplete string = "cc-number"

Determines if browser should provide value suggestions.

autoFocus boolean = false

If true the input will be focused on the first mount.

disabled boolean = false

Renders component in 'disabled' state.

error boolean = false

Renders component in 'error' state.

positive boolean

Renders component in 'positive' state.

pattern nullable string required

A regex that is used to validate the value of the input on form submission.

id string required

Id attribute value to be added to the input element and as a label's for attribute value.

"data-baseweb" string

inputMode string required

A hint as to the type of data that might be entered by the user while editing the element or its contents.

inputRef ElementRef<*> required

A ref to access an input element.

ElementRef*

name string = ""

onBlur function required

SyntheticFocusEvent<T> => mixed

onChange function

SyntheticInputEvent<T> => mixed

onKeyDown function

SyntheticKeyboardEvent<T> => mixed

onKeyPress function

SyntheticKeyboardEvent<T> => mixed

onKeyUp function

SyntheticKeyboardEvent<T> => mixed

onFocus function required

SyntheticFocusEvent<T> => mixed

clearable boolean required

If true, adds a clear value icon button to the end of the input container.

overrides object required

InputContainer { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Input { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Before { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
After { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
ClearIcon { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
ClearIconContainer { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*

placeholder string required

required boolean = false

Renders component in 'required' state.

size $Keys<typeof SIZE> = "default"

Renders component in provided size.

$Keys{ default: "default", compact: "compact", large: "large" }

type string required

Input type attribute.

value string

Input value attribute.

rows number

overrides object required

InputContainer { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Input { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Before { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
After { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
ClearIcon { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
ClearIconContainer { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Root { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
StartEnhancer { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
EndEnhancer { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*

startEnhancer nullable union = null

An input helper rendered before and attached to the input field.

One of
Node,
* => Node

endEnhancer nullable union = null

An input helper rendered after and attached to the input field.

One of
Node,
* => Node

onFocus function = () => undefined

Handler for the focus event.

SyntheticFocusEventHTMLInputElement => mixed

onBlur function = () => undefined

Handler for the blur event.

SyntheticFocusEventHTMLInputElement => mixed

overrides object = {}

InputContainer { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Input { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Before { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
After { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
ClearIcon { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
ClearIconContainer { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Root { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
StartEnhancer { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
EndEnhancer { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
IconWrapper { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*