# Card brand selector

Learn about customisation options for the card brand selector.

## Styling


```typescript
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


```typescript
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"
    }
  }
};
```