Card brand selector

Learn about customisation options for the card brand selector.

Styling

const cardBrandSelectorConfig: CardBrandSelectorComponentConfig = {
  useDefaultMode: boolean,
  showOnlyRecognisedCardBrand: boolean,
  includeAcceptedCardBrandsInDefaultMode: boolean,
  unrecognisedCardNumberAltText: string,
  defaultCardImage: CardImageConfig,
  cardBrandImages: {
    visa: CardImageConfig,
    mastercard: CardImageConfig,
    amex: CardImageConfig,
    cup: CardImageConfig,
    diners: CardImageConfig,
    discover: CardImageConfig,
    jcb: CardImageConfig,
  },
  useTransparentCardBrandImage: boolean
};

Parameter	Description
`useDefaultMode` boolean	Whether to use the default mode for card brand selection. If `true`, displays a default card brand selector behaviour.
`showOnlyRecognisedCardBrand` boolean	Whether to display only recognised card brands. If `true`, only displays card brands that have been successfully identified from the card number.
`includeAcceptedCardBrandsInDefaultMode` boolean	Whether to include accepted card brands in default mode. If `true` and `useDefaultMode` is `true`, displays all accepted card brands.
`unrecognisedCardNumberAltText` string	The alternative text for the unrecognised card number.
`defaultCardImage` CardImageConfig	Configuration for the default card image displayed when no specific card brand is selected or when the card brand is not recognised.
`cardBrandImages` object	Configuration object containing image settings for different card brands.
`cardBrandImages.visa` CardImageConfig	Settings for the Visa card brand image.
`cardBrandImages.mastercard` CardImageConfig	Settings for the Mastercard card brand image.
`cardBrandImages.amex` CardImageConfig	Settings for the Amex card brand image.
`cardBrandImages.cup` CardImageConfig	Settings for the CUP card brand image.
`cardBrandImages.diners` CardImageConfig	Settings for the Diners card brand image.
`cardBrandImages.discover` CardImageConfig	Settings for the Discover card brand image.
`cardBrandImages.jcb` CardImageConfig	Settings for the JCB card brand image.
`useTransparentCardBrandImage` boolean	Whether to use transparent card brand images. Defaults to `true`.

Example

const cardBrandSelectorConfig: CardBrandSelectorComponentConfig = {
  useDefaultMode: true,
  showOnlyRecognisedCardBrand: false,
  includeAcceptedCardBrandsInDefaultMode: true,
  useTransparentCardBrandImage: true,
  unrecognisedCardNumberAltText: "Unknown card type",
  defaultCardImage: {
    src: "/images/default-card.svg",
    width: "32px",
    height: "20px"
  },
  cardBrandImages: {
    visa: {
      src: "/images/visa.svg",
      width: "32px",
      height: "20px"
    },
    mastercard: {
      src: "/images/mastercard.svg",
      width: "32px",
      height: "20px"
    },
    amex: {
      src: "/images/amex.svg",
      width: "32px",
      height: "20px"
    }
  }
};

Card brand selector

Styling

Example

Was this helpful?