Credit Card Input

The CreditCardInput is a group of inputs (card number, expiration date, CVV code) presented inside a single container.

Examples

Basic Credit Card Input

Card Information

Required

Card Number

Expiration Date

Security Code

Card Information

Required

Card Number

Expiration Date

Security Code

import { CreditCardInput } from '@curology/ui-components-web/react';

<CreditCardInput 
  label="Card Information"
  required
  size="small|medium(default)" 
/>

Controlled Credit Card Input w/ Luhn validation

Card Information

Required

Card Number

Expiration Date

Security Code

Card Information

Required

Card Number

Expiration Date

Security Code

import { CreditCardInput } from '@curology/ui-components-web/react';

<CreditCardInput 
  ...
  helperText={error?.message}
  onChange={handleChange}
  state={error ? 'critical' : undefined}
  value={value}
/>

Props

Name	Type	Default Value	Required	Description
defaultValues	CreditCardValues		No	A set of default values to pre-populate.
fieldClassName	string		No	A className to apply to the field.
fieldProps	Record<string, unknown>		No	Any props to spread onto the field container.
helperText	ReactNode		No	A string or component to display as helper text beneath the input
iconEnd	string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal | null		No	An icon to render at the end of the input.
label	ReactNode		No	A string or component to display as a label above the input
onChange	((evt: ChangeEvent<InputType>, values: CreditCardValues) => void)		No	Emit a new set of values whenever one of them changes.
required	boolean	false	No	Is the field required?
size	"small" | FormControlSize | "medium"	FormControlSize.Medium	No	The size of the field
state	"" | FormControlState | "critical" | "warning" | "success"	FormControlState.Default	No	The state of the field
values	CreditCardValues		No	A set of values to set on the individual fields.