{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["sub-heading","br","details"]},"type":"markdown"},"seo":{"title":"Dynamic card image","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":"dynamic-card-image","__idx":0},"children":["Dynamic card image"]},{"$$mdtype":"Tag","name":"SubHeading","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Learn about customisation options for the dynamic card image component."]}]},{"$$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 dynamicCardImageConfig: DynamicCardImageComponentConfig = {\n  frontDynamicCardImageBackground: string,\n  backDynamicCardImageBackground: string,\n  cardNumberText: string,\n  cardExpiryDateText: string,\n  cardHolderNameText: string,\n  cvcText: string,\n  textStyling: CSSProperties,\n  bankNameTextStyling: CSSProperties,\n  cardNumberTextStyling: CSSProperties,\n  expiryDateLabelTextStyling: CSSProperties,\n  expiryDateValueTextStyling: CSSProperties,\n  holderNameTextStyling: CSSProperties,\n  cvcLabelTextStyling: CSSProperties,\n  cvcValueTextStyling: CSSProperties,\n  highlightFieldStyling: CSSProperties,\n  cardNumberComponent: CardNumberComponent,\n  cardExpiryDateComponent: CardExpiryDateComponent,\n  cardCvcComponent: CardCvcComponent,\n  cardHolderNameComponent: CardHolderNameComponent,\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":"Property"},"children":["Property"]},{"$$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":["cardNumberText"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The label for the number field on the card."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardExpiryDateText"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The label for the expiry date on the card."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardHolderNameText"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The label for the cardholder name on the card."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cvcText"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The label for the CVC field on the card."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["frontDynamicCardImageBackground"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The URL for the image on the front of card."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["backDynamicCardImageBackground"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The URL for the image on the back of the card (CVC side)."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["textStyling"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CSSProperties"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["General text styling for the card text."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cvcLabelTextStyling"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CSSProperties"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The text styling for the CVC label."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cvcValueTextStyling"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CSSProperties"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The text styling for the CVC value."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bankNameTextStyling"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CSSProperties"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The text styling for the bank name."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardNumberTextStyling"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CSSProperties"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The text styling for the card number."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["expiryDateLabelTextStyling"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CSSProperties"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The text styling for the expiry label."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["expiryDateValueTextStyling"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CSSProperties"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The text styling for the expiry value."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["holderNameTextStyling"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CSSProperties"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The text styling for the cardholder name."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["highlightFieldStyling"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CSSProperties"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The styling for the field when highlighted."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardNumberComponent"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CardNumberComponent"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Component for the card number field. See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/card/card-number"},"children":["Card number"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardExpiryDateComponent"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CardExpiryDateComponent"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Component for the card expiry date. See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/card/card-expiry-date"},"children":["Card expiry date"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardCvcComponent"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CardCvcComponent"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Component for the CVC field. See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/card/card-cvc"},"children":["Card CVC"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardHolderNameComponent"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CardHolderNameComponent"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Component for the cardholder name field. See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/card/cardholder-name"},"children":["Cardholder name"]},"."]}]}]}]}]},{"$$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 dynamicCardImageConfig: DynamicCardImageComponentConfig = {\n  cardNumberText: \"1234 5678 9012 3456\",\n  cardExpiryDateText: \"MM/YY\",\n  cardHolderNameText: \"JOHN SMITH\",\n  cvcText: \"123\",\n  frontDynamicCardImageBackground: \"/images/card-front-bg.png\",\n  backDynamicCardImageBackground: \"/images/card-back-bg.png\",  \n  textStyling: {\n    fontFamily: \"monospace\",\n    fontSize: \"14px\",\n    color: \"#ffffff\"\n  }, \n  cardNumberTextStyling: {\n    fontSize: \"18px\",\n    fontWeight: \"bold\",\n    letterSpacing: \"2px\",\n    color: \"#ffffff\"\n  },\n  holderNameTextStyling: {\n    fontSize: \"12px\",\n    textTransform: \"uppercase\",\n    fontWeight: \"600\",\n    color: \"#ffffff\"\n  }, \n  expiryDateLabelTextStyling: {\n    fontSize: \"8px\",\n    color: \"#cccccc\"\n  }, \n  expiryDateValueTextStyling: {\n    fontSize: \"12px\",\n    fontWeight: \"500\",\n    color: \"#ffffff\"\n  }, \n  cvcLabelTextStyling: {\n    fontSize: \"8px\",\n    color: \"#cccccc\"\n  },  \n  cvcValueTextStyling: {\n    fontSize: \"12px\",\n    fontWeight: \"500\",\n    color: \"#333333\"\n  }, \n  bankNameTextStyling: {\n    fontSize: \"10px\",\n    fontWeight: \"bold\",\n    color: \"#ffffff\"\n  }, \n  highlightFieldStyling: {\n    color: \"#ffd700\",\n    textShadow: \"0 0 4px rgba(255, 215, 0, 0.5)\"\n  },  \n  cardNumberComponent: cardNumberComponent,\n  cardExpiryDateComponent: cardExpiryDateComponent,\n  cardCvcComponent: cardCvcComponent,\n  cardHolderNameComponent: cardHolderNameComponent\n};\n","lang":"typescript"},"children":[]}]},"headings":[{"value":"Dynamic card image","id":"dynamic-card-image","depth":1},{"value":"Styling","id":"styling","depth":2},{"value":"Example","id":"example","depth":2}],"frontmatter":{"seo":{"title":"Dynamic card image"}},"lastModified":"2026-02-26T12:14:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/guides/checkout/components/web/card/dynamic-card-image","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}