{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["sub-heading","admonition","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 how to configure the dynamic card image component."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"basic-usage","__idx":1},"children":["Basic usage"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"with-new-card","__idx":2},"children":["With new card"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Create the dynamic card image component and link it to your new card component:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"import SwiftUI\nimport PXPCheckoutSDK\n\nlet dynamicConfig = DynamicCardImageComponentConfig(\n    frontDynamicCardImageBackground: Image(\"CardFront\"),\n    backDynamicCardImageBackground: Image(\"CardBack\")\n)\n\nlet dynamicCardImage = try pxpCheckout.create(\n    .dynamicCardImage,\n    componentConfig: dynamicConfig\n) as! DynamicCardImageComponent\n\nvar submitConfig = CardSubmitComponentConfig()\nsubmitConfig.onPreAuthorisation = { _ in\n    // Can use await here for async operations\n    return TransactionInitiationData()\n}\nsubmitConfig.onPostAuthorisation = { _ in }\n\nlet newCardConfig = NewCardComponentConfig(\n    dynamicCardImageComponent: dynamicCardImage,\n    submit: submitConfig\n)\nlet newCard = try pxpCheckout.create(.newCard, componentConfig: newCardConfig) as! NewCardComponent\n\nVStack(alignment: .leading, spacing: 16) {\n    dynamicCardImage.buildContent()\n    newCard.buildContent()\n}\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The dynamic card image component automatically updates as the customer types their card details. You need to include both ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["dynamicCardImage.buildContent()"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["newCard.buildContent()"]}," in your view hierarchy."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"standalone-custom-layout","__idx":3},"children":["Standalone (custom layout)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Create your input components first, then link them to the dynamic card image:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"let cardNumber = try pxpCheckout.create(.cardNumber, componentConfig: CardNumberComponentConfig(label: \"Card number\")) as! CardNumberComponent\nlet expiry = try pxpCheckout.create(.cardExpiryDate, componentConfig: CardExpiryDateComponentConfig(label: \"Expiry\")) as! CardExpiryDateComponent\nlet cvc = try pxpCheckout.create(.cardCvc, componentConfig: CardCvcComponentConfig(label: \"CVC\", isRequired: true)) as! CardCvcComponent\nvar holderConfig = CardHolderNameComponentConfig(label: \"Name on card\")\nholderConfig.isRequired = false\nlet holder = try pxpCheckout.create(.cardHolderName, componentConfig: holderConfig) as! CardHolderNameComponent\n\nvar dynConfig = DynamicCardImageComponentConfig()\ndynConfig.cardNumberComponent = cardNumber\ndynConfig.cardExpiryDateComponent = expiry\ndynConfig.cardCvcComponent = cvc\ndynConfig.cardHolderNameComponent = holder\n\nlet dynamicCardImage = try pxpCheckout.create(.dynamicCardImage, componentConfig: dynConfig) as! DynamicCardImageComponent\n\nVStack {\n    dynamicCardImage.buildContent()\n    cardNumber.buildContent()\n    HStack {\n        expiry.buildContent()\n        cvc.buildContent()\n    }\n    holder.buildContent()\n}\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"configuration","__idx":4},"children":["Configuration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can customise placeholder text, background images, and text styling:"]},{"$$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 placeholder text for the card number area. Displayed on the card image when no number is entered. Defaults to SDK localisation."]}]},{"$$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 placeholder text for the expiry date. Displayed on the card image when no expiry is entered. Defaults to SDK localisation."]}]},{"$$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 placeholder text for the cardholder name. Displayed on the card image when no name is entered. Defaults to SDK localisation."]}]},{"$$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 placeholder text for the CVC on the card back. Displayed when no CVC is entered. Defaults to SDK localisation."]}]},{"$$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":["Image?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The custom image for the card front. When set, replaces the default gradient background. Defaults to built-in gradient."]}]},{"$$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":["Image?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The custom image for the card back. When set, replaces the default gradient background. Defaults to built-in gradient."]}]},{"$$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":["DynamicCardTextStyling?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The base text styling applied to all fields on the card image. Properties: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["color"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fontSize"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fontWeight"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["opacity"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["textCase"]},". Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nil"]},"."]}]},{"$$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":["DynamicCardTextStyling?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The CVC label styling (e.g., \"CVV\"). Overrides ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["textStyling"]}," for this element. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nil"]},"."]}]},{"$$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":["DynamicCardTextStyling?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The CVC value styling. Overrides ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["textStyling"]}," for this element. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nil"]},"."]}]},{"$$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":["DynamicCardTextStyling?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The bank name styling. Overrides ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["textStyling"]}," for this element. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nil"]},"."]}]},{"$$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":["DynamicCardTextStyling?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The card number styling. Overrides ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["textStyling"]}," for this element. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nil"]},"."]}]},{"$$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":["DynamicCardTextStyling?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The expiry date label styling (e.g., \"Valid Thru\"). Overrides ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["textStyling"]}," for this element. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nil"]},"."]}]},{"$$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":["DynamicCardTextStyling?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The expiry date value styling. Overrides ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["textStyling"]}," for this element. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nil"]},"."]}]},{"$$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":["DynamicCardTextStyling?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The cardholder name styling. Overrides ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["textStyling"]}," for this element. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nil"]},"."]}]},{"$$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":["DynamicCardHighlightStyling?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The field focus highlight styling. Applied when a field is focused. Properties: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["color"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["backgroundColor"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["borderColor"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["borderWidth"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["backgroundOpacity"]},". Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nil"]},"."]}]},{"$$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":["The linked card number component. When set, the dynamic card image updates as the user types. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nil"]},"."]}]},{"$$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":["The linked expiry date component. When set, the dynamic card image displays the expiry date. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nil"]},"."]}]},{"$$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":["The linked CVC component. When set, the card flips to show the back when focused. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nil"]},"."]}]},{"$$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":["The linked cardholder name component. When set, the dynamic card image displays the name. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nil"]},"."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"text-styling","__idx":5},"children":["Text styling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can customise how text appears on the card image:"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"dynamiccardtextstyling","__idx":6},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["DynamicCardTextStyling"]}]},{"$$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":["color"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Color?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The text colour. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nil"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fontSize"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CGFloat"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The text size in points. Defaults to 16."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fontWeight"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Font.Weight"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The text weight. Options include ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".regular"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".medium"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".semibold"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bold"]},". Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".regular"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["opacity"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Double?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The text opacity (0.0 to 1.0). Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nil"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["textCase"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Text.Case?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The text case transformation. Options include ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".uppercase"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".lowercase"]},". Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nil"]},"."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"dynamiccardhighlightstyling","__idx":7},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["DynamicCardHighlightStyling"]}]},{"$$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":["color"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Color?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The highlight text colour. Applied to focused fields. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nil"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["backgroundColor"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Color?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The highlight background colour. Applied behind focused fields. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nil"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["borderColor"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Color?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The highlight border colour. Surrounds focused fields. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nil"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["borderWidth"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CGFloat?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The highlight border width in points. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nil"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["backgroundOpacity"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Double?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The highlight background opacity (0.0 to 1.0). Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nil"]},"."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"methods","__idx":8},"children":["Methods"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"buildcontent","__idx":9},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["buildContent()"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Returns SwiftUI content for the dynamic card image:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"dynamicCardImage.buildContent()\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"examples","__idx":10},"children":["Examples"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"basic-card-preview","__idx":11},"children":["Basic card preview"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Display a simple card preview with default styling:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"let dynamicConfig = DynamicCardImageComponentConfig()\nlet dynamicCardImage = try pxpCheckout.create(.dynamicCardImage, componentConfig: dynamicConfig) as! DynamicCardImageComponent\n\nvar submitConfig = CardSubmitComponentConfig()\nsubmitConfig.onPreAuthorisation = { _ in\n    // Can use await here for async operations\n    return TransactionInitiationData()\n}\nsubmitConfig.onPostAuthorisation = { _ in }\n\nlet newCardConfig = NewCardComponentConfig(\n    dynamicCardImageComponent: dynamicCardImage,\n    submit: submitConfig\n)\nlet newCard = try pxpCheckout.create(.newCard, componentConfig: newCardConfig) as! NewCardComponent\n\nVStack(alignment: .leading, spacing: 16) {\n    dynamicCardImage.buildContent()\n    newCard.buildContent()\n}\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"custom-card-styling","__idx":12},"children":["Custom card styling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Apply custom styling to the card text:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"var dynamicConfig = DynamicCardImageComponentConfig()\ndynamicConfig.textStyling = DynamicCardTextStyling(\n    color: .white,\n    fontSize: 18,\n    fontWeight: .medium\n)\ndynamicConfig.cardNumberTextStyling = DynamicCardTextStyling(\n    fontSize: 20,\n    fontWeight: .semibold,\n    textCase: .uppercase\n)\ndynamicConfig.highlightFieldStyling = DynamicCardHighlightStyling(\n    color: .yellow,\n    backgroundColor: .blue.opacity(0.2),\n    borderColor: .blue,\n    borderWidth: 2\n)\n\nlet dynamicCardImage = try pxpCheckout.create(.dynamicCardImage, componentConfig: dynamicConfig) as! DynamicCardImageComponent\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"custom-card-images","__idx":13},"children":["Custom card images"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use your own card background images:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"var dynamicConfig = DynamicCardImageComponentConfig(\n    frontDynamicCardImageBackground: Image(\"CustomCardFront\"),\n    backDynamicCardImageBackground: Image(\"CustomCardBack\")\n)\ndynamicConfig.cardNumberText = \"Card Number\"\ndynamicConfig.cardExpiryDateText = \"Valid Thru\"\ndynamicConfig.cardHolderNameText = \"Cardholder\"\ndynamicConfig.cvcText = \"CVV\"\n\nlet dynamicCardImage = try pxpCheckout.create(.dynamicCardImage, componentConfig: dynamicConfig) as! DynamicCardImageComponent\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The dynamic card image automatically flips to show the back when the CVC field is focused. For more information about related components, see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/ios/card/new-card"},"children":["New card"]},", ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/ios/card/card-number"},"children":["Card number"]},", and ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/ios/card/card-cvc"},"children":["Card CVC"]},"."]}]}]},"headings":[{"value":"Dynamic card image","id":"dynamic-card-image","depth":1},{"value":"Basic usage","id":"basic-usage","depth":2},{"value":"With new card","id":"with-new-card","depth":3},{"value":"Standalone (custom layout)","id":"standalone-custom-layout","depth":3},{"value":"Configuration","id":"configuration","depth":2},{"value":"Text styling","id":"text-styling","depth":3},{"value":"DynamicCardTextStyling","id":"dynamiccardtextstyling","depth":4},{"value":"DynamicCardHighlightStyling","id":"dynamiccardhighlightstyling","depth":4},{"value":"Methods","id":"methods","depth":2},{"value":"buildContent()","id":"buildcontent","depth":3},{"value":"Examples","id":"examples","depth":2},{"value":"Basic card preview","id":"basic-card-preview","depth":3},{"value":"Custom card styling","id":"custom-card-styling","depth":3},{"value":"Custom card images","id":"custom-card-images","depth":3}],"frontmatter":{"seo":{"title":"Dynamic card image"}},"lastModified":"2026-05-18T11:23:43.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/guides/checkout/components/ios/card/dynamic-card-image","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}