Reference

import CardBrandSelectorComponentConfig from "@pxpio/web-components-sdk/src/components/cardBrandSelectorComponents/types/CardBrandSelectorComponentConfig";

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

const cardBrandSelector = pxpCheckoutSdk.create("card-brand-selector");

Properties

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

Example

import CardBrandSelectorComponentConfig from "@pxpio/web-components-sdk/src/components/cardBrandSelectorComponents/types/CardBrandSelectorComponentConfig";

const cardBrandSelectorConfig: CardBrandSelectorComponentConfig = {
  useDefaultMode: true,
  showOnlyRecognizedCardBrand: true,
  includeAcceptedCardBrandsInDefaultMode: true,
  unrecognizedCardNumberAltText: "Unrecognised card number",
  defaultCardImage: CardImageConfig,
  cardBrandImages: {
    visa: CardImageConfig,
    mastercard: CardImageConfig,
    amex: CardImageConfig,
    cup: CardImageConfig,
    diners: CardImageConfig,
    discover: CardImageConfig,
    jcb: CardImageConfig
  };
  useTransparentCardBrandImage: true
};

const cardBrandSelector = pxpCheckoutSdk.create("card-brand-selector");