[?] Component size, gzipped: 128kb

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
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.

Overrides

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!

API

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<*>

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 }>*
MaskToggleButton { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
MaskToggleShowIcon { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
MaskToggleHideIcon { 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 }>*
MaskToggleButton { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
MaskToggleShowIcon { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
MaskToggleHideIcon { 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 }>*
MaskToggleButton { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
MaskToggleShowIcon { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
MaskToggleHideIcon { 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 }>*

Payment Card exports

You can import this module like so:

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

It exports the following components or utility functions:

  • StatefulPaymentCard
  • StatefulContainer
  • PaymentCard
  • valid
  • SIZE
  • StyledIconWrapper