Card number

Learn about customisation options for the card number component.

Styling

const cardNumberConfig: CardNumberComponentConfig = {
  formatCardNumber: boolean,
  renderCardBrandSelector: boolean,
  acceptedCardBrands: [],
  validationOnChange: boolean,
  validationOnBlur: boolean,
  showHintIcon: boolean,
  showTooltip: boolean,
  hintIconSrc: string,
  cardCvcComponent: CardCvcComponent,
  cardBrandSelectorComponent: CardBrandSelectorComponent,
  dynamicCardImageComponent: DynamicCardImageComponent,
  inputAttributes: InputAttributes,
  required: boolean,
  placeholder: string,
  componentStyles: {
    base: CSSProperties,
    valid: CSSProperties,
    invalid: CSSProperties,
    input: CSSProperties
  },
  inputStyles: {
    base: CSSProperties,
    valid: CSSProperties,
    invalid: CSSProperties
  },
  label: string,
  labelStyles: {
    base: CSSProperties,
    valid: CSSProperties,
    invalid: CSSProperties
  },
  labelPosition: string,
  invalidTextStyles: CSSProperties,
  invalidTextPosition: string,
  guideText: string,
  validations: {},
  invalidIconSrc: string,
  validIconSrc: string,
  displayValidIcon: boolean,
  displayInvalidIcon: boolean,
  tooltipAriaLabel: string,
  ariaLabel: string,
  displayRequiredIcon: boolean,
  allowToCopyPaste: boolean,
  validationOnBlur: boolean,
  validationOnChange: boolean,
  tabIndex: number
};

Property	Description
`formatCardNumber` boolean	Whether to auto-format the number as typed.
`renderCardBrandSelector` boolean	Whether to render the card brand drop-down.
`acceptedCardBrands` CardBrands[]	The list of accepted card brands.
`validationOnChange` boolean	Whether to validate on input change.
`validationOnBlur` boolean	Whether to validate on input blur.
`showHintIcon` boolean	Whether to display a hint icon.
`hintIconSrc` string	The URL to your custom hint icon.
`showTooltip` boolean	Whether to show a tooltip when hovering over the hint.
`cardCvcComponent` CardCvcComponent	Configuration for the CVC component. See Card CVC.
`cardBrandSelectorComponent` CardBrandSelectorComponent	Configuration for the card brand selector component. See Card brand selector.
`dynamicCardImageComponent` DynamicCardImageComponent	Component to display dynamic card images. See Dynamic card image.
`inputAttributes` InputAttributes	Additional HTML input attributes.
`required` boolean	Whether the field is required for submission.
`placeholder` string	The placeholder text to display when the field is empty.
`componentStyles` ComponentStyles	Custom styling for the component.
`componentStyles.base` CSSProperties	Base styling for the component.
`componentStyles.valid` CSSProperties	Styling for the component when it's valid.
`componentStyles.invalid` CSSProperties	Styling for the component when it's not valid.
`componentStyles.input` CSSProperties	Styling for the input element.
`inputStyles` StateStyles	Style for input field in various states.
`label` string	The input label's text.
`labelStyles` StateStyles	The label styling, based on the state.
`labelPosition` string (enum)	The position of the label, relative to the input field. Possible values: `above` `below` `left` `right`
`invalidTextStyles` CSSProperties	Styling for the validation message text.
`invalidTextPosition` string (enum)	The position of the invalid text message, relative to the input field. Possible values: `above` `below` `left` `right`
`guideText` string	The helper text to display below the input field.
`validations` T	Validation rules to be applied to the input field.
`invalidIconSrc` string	The URL for the icon shown on invalid input.
`validIconSrc` string	The URL for the icon shown on valid input.
`displayValidIcon` boolean	Whether to display a success icon. Defaults to `true`.
`displayInvalidIcon` boolean	Whether to display an error icon. Defaults to `true`.
`tooltipAriaLabel` string	The aria label for the tooltip.
`ariaLabel` string	The aria label for the field component.
`displayRequiredIcon` boolean	Whether to display a required icon. Defaults to `true`.
`allowToCopyPaste` boolean	Whether to allow copy/paste in the input fields.
`validationOnBlur` boolean	Whether to run validation when input loses focus.
`validationOnChange` boolean	Whether to run validation as a value changes.
`tabIndex` number	The tab index of the input element.

Callbacks

const cardCvcConfig: CardCvcComponentConfig = {
  onChange: (event: InputEvent) => void,
  onFocus: (event: FocusEvent) => void,
  onBlur: (event: FocusEvent) => void,
  onValidationPassed: (data: ValidationResult[]) => void,
  onValidationFailed: (data: ValidationResult[]) => void,
  onCardBrandDetected?: (event: Event) => void,
  onCardBrandCannotRecognised?: (event: Event) => void
};

Callback	Description
`onChange: (event: InputEvent) => void`	Event handler for when the input value changes.
`onFocus: (event: FocusEvent) => void`	Event handler for when the input receives focus.
`onBlur: (event: FocusEvent) => void`	Event handler for when the input loses focus.
`onValidationPassed: (data: ValidationResult[]) => void`	Event handler for when all validations pass.
`onValidationFailed: (data: ValidationResult[]) => void`	Event handler for when any validation fails.
`onCardBrandDetected: (event: Event) => void`	Event handler for when a card brand is detected.
`onCardBrandCannotRecognised: (event: Event) => void`	Event handler for when a card brand can't be recognised.

For more information about callbacks, see Events.

Example

const cardNumberConfig: CardNumberComponentConfig = {
  label: "Card number",
  placeholder: "1234 5678 9012 3456",
  required: true,
  formatCardNumber: true,
  renderCardBrandSelector: true,
  showHintIcon: true,
  showTooltip: true,
  validationOnChange: true,
  validationOnBlur: true,
  acceptedCardBrands: ["Visa", "MasterCard", "Amex"],
  inputStyles: {
    base: {
      border: "1px solid #ccc",
      padding: "12px",
      borderRadius: "4px",
      fontSize: "16px"
    },
    valid: {
      borderColor: "#28a745"
    },
    invalid: {
      borderColor: "#dc3545"
    }
  },
  labelStyles: {
    base: {
      fontWeight: "500",
        marginBottom: "8px"
    }
  },
  tabIndex: 1,
  onChange: (event) => {
    console.log("Card number changed:", event.target.value);
  },
  onFocus: (event) => {
    console.log("Card number focused");
  },
  onBlur: (event) => {
    console.log("Card number blurred");
  },
  onValidationPassed: (data) => {
    console.log("Card number valid");
  },
  onValidationFailed: (data) => {
    console.log("Card number validation failed:", data);
  },
  onCardBrandDetected: (event) => {
    console.log("Card brand detected:", event);
  },
  onCardBrandCannotRecognised: (event) => {
    console.log("Card brand not recognised:", event);
  }
};

Card number

Styling

Callbacks

Example

Was this helpful?