[?] 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

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:

IconWrapper

Input

InputContainer

Root

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

Payment Card

Examples

Basic usage

Default value

Stateful (uncontrolled) usage

Overrides

API

PaymentCard API

.css-j5qqua{background:#DEEBFF;color:#0747A6;border-radius:3px;display:inline-block;margin-right:0.8em;padding:0 0.2em;}"aria-label" .css-fp46og{background:#F4F5F7;border-radius:3px;color:#5E6C84;display:inline-block;padding:0 0.2em;}nullable string.css-9qhb1p{color:#BF2600;} required

"aria-labelledby" nullable string required

"aria-describedby" nullable string required

adjoined $Keys<typeof ADJOINED> required

autoComplete string.css-1quwbx4{color:#5E6C84;} = "cc-number"

autoFocus boolean = false

disabled boolean = false

error boolean = false

positive boolean

pattern nullable string required

id string required

"data-baseweb" string

inputMode string required

inputRef ElementRef<*>

name string = ""

onBlur function required

onChange function

onKeyDown function

onKeyPress function

onKeyUp function

onFocus function required

clearable boolean required

overrides object required

placeholder string required

required boolean = false

size $Keys<typeof SIZE> = "default"

type string required

value string

rows number

overrides object required

startEnhancer nullable union = null

endEnhancer nullable union = null

onFocus function = () => undefined

onBlur function = () => undefined

overrides object = {}

Payment Card exports

`"aria-label"` `nullable string` `required`

`"aria-labelledby"` `nullable string` `required`

`"aria-describedby"` `nullable string` `required`

`adjoined` `$Keys<typeof ADJOINED>` `required`

`autoComplete` `string` `= "cc-number"`

`autoFocus` `boolean` `= false`

`disabled` `boolean` `= false`

`error` `boolean` `= false`

`positive` `boolean`

`pattern` `nullable string` `required`

`id` `string` `required`

`"data-baseweb"` `string`

`inputMode` `string` `required`

`inputRef` `ElementRef<*>`

`name` `string` `= ""`

`onBlur` `function` `required`

`onChange` `function`

`onKeyDown` `function`

`onKeyPress` `function`

`onKeyUp` `function`

`onFocus` `function` `required`

`clearable` `boolean` `required`

`overrides` `object` `required`

`placeholder` `string` `required`

`required` `boolean` `= false`

`size` `$Keys<typeof SIZE>` `= "default"`

`type` `string` `required`

`value` `string`

`rows` `number`

`overrides` `object` `required`

`startEnhancer` `nullable union` `= null`

`endEnhancer` `nullable union` `= null`

`onFocus` `function` `= () => undefined`

`onBlur` `function` `= () => undefined`

`overrides` `object` `= {}`