{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["sub-heading","br","details"]},"type":"markdown"},"seo":{"title":"Card brand selector","description":"Transform your commerce with PXP's unified platform—seamless payments, real-time insights, and global growth in one powerful integration.","lang":"en-UK","siteUrl":"https://developer.pxp.io","llmstxt":{"hide":false,"sections":[{"title":"Table of contents","includeFiles":["**/*"],"excludeFiles":[]}],"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"card-brand-selector","__idx":0},"children":["Card brand selector"]},{"$$mdtype":"Tag","name":"SubHeading","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Learn about customisation options for the card brand selector."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"styling","__idx":1},"children":["Styling"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const cardBrandSelectorConfig: CardBrandSelectorComponentConfig = {\n  useDefaultMode: boolean,\n  showOnlyRecognisedCardBrand: boolean,\n  includeAcceptedCardBrandsInDefaultMode: boolean,\n  unrecognisedCardNumberAltText: string,\n  defaultCardImage: CardImageConfig,\n  cardBrandImages: {\n    visa: CardImageConfig,\n    mastercard: CardImageConfig,\n    amex: CardImageConfig,\n    cup: CardImageConfig,\n    diners: CardImageConfig,\n    discover: CardImageConfig,\n    jcb: CardImageConfig,\n  },\n  useTransparentCardBrandImage: boolean\n};\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"align":"left","data-label":"Parameter"},"children":["Parameter"]},{"$$mdtype":"Tag","name":"th","attributes":{"align":"left","data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["useDefaultMode"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Whether to use the default mode for card brand selection. If ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]},", displays a default card brand selector behaviour."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["showOnlyRecognisedCardBrand"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Whether to display only recognised card brands. If ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]},", only displays card brands that have been successfully identified from the card number."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["includeAcceptedCardBrandsInDefaultMode"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Whether to include accepted card brands in default mode. If ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["useDefaultMode"]}," is ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]},", displays all accepted card brands."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["unrecognisedCardNumberAltText"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The alternative text for the unrecognised card number."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["defaultCardImage"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CardImageConfig"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Configuration for the default card image displayed when no specific card brand is selected or when the card brand is not recognised."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardBrandImages"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["object"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Configuration object containing image settings for different card brands."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardBrandImages.visa"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CardImageConfig"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Settings for the Visa card brand image."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardBrandImages.mastercard"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CardImageConfig"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Settings for the Mastercard card brand image."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardBrandImages.amex"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CardImageConfig"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Settings for the Amex card brand image."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardBrandImages.cup"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CardImageConfig"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Settings for the CUP card brand image."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardBrandImages.diners"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CardImageConfig"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Settings for the Diners card brand image."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardBrandImages.discover"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CardImageConfig"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Settings for the Discover card brand image."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardBrandImages.jcb"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CardImageConfig"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Settings for the JCB card brand image."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["useTransparentCardBrandImage"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Whether to use transparent card brand images. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]},"."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"example","__idx":2},"children":["Example"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const cardBrandSelectorConfig: CardBrandSelectorComponentConfig = {\n  useDefaultMode: true,\n  showOnlyRecognisedCardBrand: false,\n  includeAcceptedCardBrandsInDefaultMode: true,\n  useTransparentCardBrandImage: true,\n  unrecognisedCardNumberAltText: \"Unknown card type\",\n  defaultCardImage: {\n    src: \"/images/default-card.svg\",\n    width: \"32px\",\n    height: \"20px\"\n  },\n  cardBrandImages: {\n    visa: {\n      src: \"/images/visa.svg\",\n      width: \"32px\",\n      height: \"20px\"\n    },\n    mastercard: {\n      src: \"/images/mastercard.svg\",\n      width: \"32px\",\n      height: \"20px\"\n    },\n    amex: {\n      src: \"/images/amex.svg\",\n      width: \"32px\",\n      height: \"20px\"\n    }\n  }\n};\n","lang":"typescript"},"children":[]}]},"headings":[{"value":"Card brand selector","id":"card-brand-selector","depth":1},{"value":"Styling","id":"styling","depth":2},{"value":"Example","id":"example","depth":2}],"frontmatter":{"seo":{"title":"Card brand selector"}},"lastModified":"2026-02-26T12:14:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/guides/checkout/components/web/card/card-brand-selector","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}