{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["sub-heading","br","details","admonition"]},"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 how to customise 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":"kotlin","header":{"controls":{"copy":{}}},"source":"val dynamicCardImageComponentConfig = DynamicCardImageComponentConfig(\n    defaultCardNumber = String,\n    defaultCardHolderName = String,\n    defaultExpiryDate = String,\n    defaultCvc = String,\n    defaultBankName = String,\n    cardDisplayMode = CardDisplayMode,\n    style = DynamicCardImageStyle,\n    highlightedCardField = CardFieldType?,\n    cardNumberComponent = CardNumberComponent?,\n    cardExpiryDateComponent = CardExpiryDateComponent?,\n    cardCvcComponent = CardCvcComponent?,\n    cardHolderNameComponent = CardHolderNameComponent?\n)\n","lang":"kotlin"},"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":{"data-label":"Property"},"children":["Property"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["defaultCardNumber"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Default card number to display when no real card number is provided. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"1234 5678 9012 3456\""]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["defaultCardHolderName"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Default card holder name to display when no real name is provided. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"CARD HOLDER NAME\""]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["defaultExpiryDate"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Default expiry date to display when no real expiry date is provided. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"12/25\""]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["defaultCvc"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Default CVC to display when no real CVC is provided. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"123\""]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["defaultBankName"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Default bank name to display when no bank name is provided. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"BANK\""]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardDisplayMode"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CardDisplayMode"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Card display mode. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["BOTH_STAGGERED"]},". Options: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["FRONT"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["BACK"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["BOTH_STAGGERED"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["style"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["DynamicCardImageStyle"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Component styling configuration. Defaults to default style."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["highlightedCardField"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CardFieldType?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Field to highlight initially.",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},"Possible values:",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["CARD_NUMBER"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["CARD_HOLDER_NAME"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["EXPIRY_DATE"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["CVC"]}]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"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":{},"children":["Card number component instance for integration. See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/android/card/card-number"},"children":["Card number"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"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":{},"children":["Card expiry date component instance for integration. See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/android/card/card-expiry-date"},"children":["Card expiry date"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"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":{},"children":["Card CVC component instance for integration. See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/android/card/card-cvc"},"children":["Card CVC"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"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":{},"children":["Card holder name component instance for integration. See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/android/card/cardholder-name"},"children":["Cardholder name"]},"."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"callbacks","__idx":2},"children":["Callbacks"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"data class DynamicCardImageComponentConfig(\n    val onCardBrandChanged: ((CardBrand) -> Unit)? = null\n)\n","lang":"kotlin"},"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":{"data-label":"Callback"},"children":["Callback"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onCardBrandChanged: (CardBrand) -> Unit"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Event handler for when a card brand is detected."]}]}]}]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For more information about callbacks, see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/android/card/events"},"children":["Events"]},"."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"example","__idx":3},"children":["Example"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"import com.pxp.checkout.components.dynamicCardImage.DynamicCardImageComponent\nimport com.pxp.checkout.components.dynamicCardImage.DynamicCardImageComponentConfig\nimport com.pxp.checkout.components.dynamicCardImage.CardDisplayMode\nimport com.pxp.checkout.components.dynamicCardImage.CardFieldType\nimport com.pxp.checkout.styles.DynamicCardImageStyle\n\n// Optional: Create custom styling\nval customStyle = DynamicCardImageStyle(\n    cardWidth = 320.dp,\n    cardHeight = 200.dp,\n    cardCornerRadius = 16.dp,\n    cardElevation = 8.dp,\n    frontCardColor = Color(0xFF1565C0),\n    backCardColor = Color(0xFF424242),\n    textColor = Color.White,\n    placeholderTextColor = Color.White.copy(alpha = 0.7f),\n    highlightColor = Color.Yellow,\n    animationDuration = 300\n)\n\nval config = DynamicCardImageComponentConfig(\n    // Display configuration\n    cardDisplayMode = CardDisplayMode.BOTH_STAGGERED, // Options: FRONT, BACK, BOTH_STAGGERED\n    \n    // Default placeholder values (shown when no real data available)\n    defaultCardNumber = \"1234 5678 9012 3456\",\n    defaultCardHolderName = \"CARDHOLDER NAME\",\n    defaultExpiryDate = \"12/25\",\n    defaultCvc = \"123\",\n    defaultBankName = \"BANK NAME\",\n    \n    // Component integrations (optional - for automatic synchronisation)\n    cardNumberComponent = cardNumberComponent,\n    cardExpiryDateComponent = cardExpiryComponent,\n    cardCvcComponent = cardCvcComponent,\n    cardHolderNameComponent = cardHolderNameComponent,\n    \n    // Visual configuration\n    style = customStyle,\n    highlightedCardField = CardFieldType.CARD_NUMBER, // Initially highlighted field\n    \n    // Event callbacks\n    onCardBrandChanged = { cardBrand ->\n        println(\"Card brand detected: $cardBrand\")\n        // Handle card brand changes\n        handleCardBrandChange(cardBrand)\n    }\n)\n\nval dynamicCardImageComponent = checkout.createComponent<DynamicCardImageComponent, DynamicCardImageComponentConfig>(\n    type = ComponentType.DYNAMIC_CARD_IMAGE,\n    config = config\n)\n","lang":"kotlin"},"children":[]}]},"headings":[{"value":"Dynamic card image","id":"dynamic-card-image","depth":1},{"value":"Styling","id":"styling","depth":2},{"value":"Callbacks","id":"callbacks","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/android/card/dynamic-card-image","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}