{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["sub-heading","admonition","br","details"]},"type":"markdown"},"seo":{"title":"New card","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":"new-card","__idx":0},"children":["New card"]},{"$$mdtype":"Tag","name":"SubHeading","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Learn how to configure the new card component."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"basic-usage","__idx":1},"children":["Basic usage"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"minimal-configuration","__idx":2},"children":["Minimal configuration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The new card component provides a complete payment form with card number, expiry date, CVC, and cardholder name fields. At minimum, you need to configure it with card submit callbacks:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"import SwiftUI\nimport PXPCheckoutSDK\n\nvar submitConfig = CardSubmitComponentConfig()\nsubmitConfig.onPreAuthorisation = { _ async in TransactionInitiationData() }\nsubmitConfig.onPostAuthorisation = { _ in }\n\nlet newCardConfig = NewCardComponentConfig(submit: submitConfig)\nlet newCard = try pxpCheckout.create(.newCard, componentConfig: newCardConfig) as! NewCardComponent\n\nnewCard.buildContent()\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"with-dynamic-card-image","__idx":3},"children":["With dynamic card image"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add a live card preview that updates as the customer types:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"let dynConfig = DynamicCardImageComponentConfig()\nlet dynamicCardImage = try pxpCheckout.create(.dynamicCardImage, componentConfig: dynConfig) as! DynamicCardImageComponent\n\nvar submitConfig = CardSubmitComponentConfig()\nsubmitConfig.onPreAuthorisation = { _ async in TransactionInitiationData() }\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 new card component automatically wires the card input fields to the dynamic card image. You just need to include both in your view hierarchy."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"advanced-configuration","__idx":4},"children":["Advanced configuration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Customise field labels, styling, and which fields to display:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"var fields = NewCardComponentFields(\n    cardNumber: CardNumberComponentConfig(\n        label: \"Card number\",\n        acceptedCardBrands: [.visa, .mastercard, .amex]\n    ),\n    expiryDate: CardExpiryDateComponentConfig(label: \"Expiry\", formatOptions: .mmYY),\n    cvc: NewCardOptionalField(config: CardCvcComponentConfig(label: \"CVC\", isRequired: true), isShown: true),\n    holderName: NewCardOptionalField(config: CardHolderNameComponentConfig(label: \"Name on card\"), isShown: true),\n    cardBrandSelector: CardBrandSelectorComponentConfig(),\n    cardConsent: NewCardOptionalField(config: CardConsentComponentConfig(), isShown: true)\n)\n\nvar submitConfig = CardSubmitComponentConfig()\nsubmitConfig.onPreAuthorisation = { _ async in TransactionInitiationData() }\nsubmitConfig.onPostAuthorisation = { _ in }\nsubmitConfig.onPostTokenisation = { result in\n    if let success = result as? CardTokenizationResultSuccess {\n        print(\"Token ID: \\(success.gatewayTokenId)\")\n    }\n}\n\nlet newCardConfig = NewCardComponentConfig(\n    styles: ContainerStyle(\n        cornerRadius: 12,\n        padding: EdgeInsets(top: 16, leading: 16, bottom: 16, trailing: 16),\n        spacing: 12\n    ),\n    inputStyles: FieldInputStateStyles(\n        base: FieldInputStyle(cornerRadius: 8, borderWidth: 1, borderColor: Color(.separator))\n    ),\n    fields: fields,\n    submit: submitConfig,\n    displayRequiredIcon: true\n)\n\nlet newCard = try pxpCheckout.create(.newCard, componentConfig: newCardConfig) as! NewCardComponent\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"configuration","__idx":5},"children":["Configuration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can customise the overall styling and nested field configurations:"]},{"$$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":["styles"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["ContainerStyle?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The container styling for the entire form. Controls spacing between fields, padding, border, background, shadow, and corner radius. Properties: ",{"$$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":["cornerRadius"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["padding"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["margin"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["opacity"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["shadow"]}," (ShadowStyle), ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["spacing"]}," (vertical space between fields), ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["horizontalSpacing"]}," (horizontal space between 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":["inputStyles"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["FieldInputStateStyles?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The input styling applied to all fields (card number, expiry, CVC, cardholder name). Overrides individual field ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["inputStyles"]}," if set. States: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["base"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["active"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["valid"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["invalid"]},". Each state supports: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["color"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["placeholderColor"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fontWeight"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fontSize"]},", ",{"$$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":["cornerRadius"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["padding"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["minHeight"]},". 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":["labelStyles"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["FieldLabelStateStyles?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The label styling applied to all fields. Overrides individual field ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["labelStyles"]}," if set. States: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["base"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["active"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["valid"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["invalid"]},". Each state supports: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["color"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["font"]},". Additional property: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["minWidth"]}," (CGFloat? - default: 80). 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":["fields"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["NewCardComponentFields?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The individual field configurations for card number, expiry date, CVC, cardholder name, card brand selector, and consent checkbox. Controls which fields are displayed and their specific settings. 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":["submit"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CardSubmitComponentConfig?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The card submit configuration. Controls payment flow, authentication, callbacks, button styling, and linked billing address components. See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/ios/card/card-submit"},"children":["Card submit"]},". 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":["dynamicCardImageComponent"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["DynamicCardImageComponent?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The optional dynamic card image component. When provided, the component automatically wires the card input fields to display live updates on the card image. 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":["displayRequiredIcon"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Bool?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Whether to display required field indicators. When ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]},", shows visual markers (e.g., asterisks) next to required 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":["onChange"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["((NewCardComponentState) -> Void)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Callback triggered when the component state changes. Receives the updated component state with field values and validation status. 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":["onBlur"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["(() -> Void)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Callback triggered when the component loses focus. 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":["onFocus"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["(() -> Void)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Callback triggered when the component gains focus. 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":["onValidation"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["(([ValidationResult]) -> Void)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Callback triggered when validation is performed on the component. Receives an array of validation results for all 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":["onPostTokenisation"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["((CardTokenizationResult) -> Void)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Callback triggered after card tokenisation completes. Receives the tokenisation result (success or failure). Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nil"]},"."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"field-configurations","__idx":6},"children":["Field configurations"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can control which fields to display and how they're configured:"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"newcardcomponentfields","__idx":7},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["NewCardComponentFields"]}]},{"$$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":["cardNumber"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CardNumberComponentConfig?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The card number field configuration. Controls label, placeholder, accepted card brands, validation messages, styling, and event handlers. 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":["expiryDate"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CardExpiryDateComponentConfig?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The expiry date field configuration. Controls label, placeholder, format options (MM/YY or MM/YYYY), validation messages, styling, and event handlers. 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":["cvc"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["NewCardOptionalField<CardCvcComponentConfig>?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The CVC field configuration and visibility. Controls label, placeholder, requirement status, validation messages, styling, and whether the field is displayed in the form. Defaults to shown."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["holderName"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["NewCardOptionalField<CardHolderNameComponentConfig>?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The cardholder name field configuration and visibility. Controls label, placeholder, requirement status, auto-capitalisation, validation messages, styling, and whether the field is displayed. Defaults to shown."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardBrandSelector"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CardBrandSelectorComponentConfig?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The card brand selector configuration. Displays accepted card brands and highlights the detected brand as the user types the card number. 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":["cardConsent"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["NewCardOptionalField<CardConsentComponentConfig>?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The consent checkbox configuration and visibility. Controls label, requirement status, checked/unchecked styling, and whether the checkbox is displayed. Used for obtaining user consent to save card details. Defaults to hidden."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"newcardoptionalfield","__idx":8},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["NewCardOptionalField"]}]},{"$$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":["config"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Config?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The field-specific configuration object. Type depends on the field (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["CardCvcComponentConfig"]}," for CVC, ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["CardHolderNameComponentConfig"]}," for cardholder name, ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["CardConsentComponentConfig"]}," for consent). 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":["isShown"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Bool?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Whether the field is displayed in the form. When ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]},", the field is completely hidden. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["nil"]},"."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"methods","__idx":9},"children":["Methods"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"buildcontent","__idx":10},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["buildContent()"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Returns SwiftUI content for the new card form:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"newCard.buildContent()\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"examples","__idx":11},"children":["Examples"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"basic-payment-form","__idx":12},"children":["Basic payment form"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A simple new card payment form with default settings:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"var submitConfig = CardSubmitComponentConfig()\nsubmitConfig.onPreAuthorisation = { _ async in TransactionInitiationData() }\nsubmitConfig.onPostAuthorisation = { result in\n    // Handle payment result\n}\n\nlet newCardConfig = NewCardComponentConfig(submit: submitConfig)\nlet newCard = try pxpCheckout.create(.newCard, componentConfig: newCardConfig) as! NewCardComponent\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"with-card-brand-selector","__idx":13},"children":["With card brand selector"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Display accepted card brands and highlight the detected brand:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"var fields = NewCardComponentFields(\n    cardNumber: CardNumberComponentConfig(\n        label: \"Card number\",\n        acceptedCardBrands: [.visa, .mastercard, .amex, .discover]\n    ),\n    cardBrandSelector: CardBrandSelectorComponentConfig()\n)\n\nvar submitConfig = CardSubmitComponentConfig()\nsubmitConfig.onPreAuthorisation = { _ async in TransactionInitiationData() }\nsubmitConfig.onPostAuthorisation = { _ in }\n\nlet newCardConfig = NewCardComponentConfig(\n    fields: fields,\n    submit: submitConfig\n)\nlet newCard = try pxpCheckout.create(.newCard, componentConfig: newCardConfig) as! NewCardComponent\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"with-custom-styling","__idx":14},"children":["With custom styling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Apply custom styling to the form and fields:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"var fields = NewCardComponentFields(\n    cardNumber: CardNumberComponentConfig(label: \"Card number\"),\n    expiryDate: CardExpiryDateComponentConfig(label: \"Expiry\"),\n    cvc: NewCardOptionalField(\n        config: CardCvcComponentConfig(label: \"CVC\", isRequired: true),\n        isShown: true\n    ),\n    holderName: NewCardOptionalField(\n        config: CardHolderNameComponentConfig(label: \"Name on card\"),\n        isShown: true\n    )\n)\n\nvar submitConfig = CardSubmitComponentConfig()\nsubmitConfig.onPreAuthorisation = { _ async in TransactionInitiationData() }\nsubmitConfig.onPostAuthorisation = { _ in }\n\nlet newCardConfig = NewCardComponentConfig(\n    styles: ContainerStyle(\n        backgroundColor: .white,\n        cornerRadius: 12,\n        borderWidth: 1,\n        borderColor: Color(.separator),\n        padding: EdgeInsets(top: 20, leading: 16, bottom: 20, trailing: 16),\n        spacing: 16\n    ),\n    inputStyles: FieldInputStateStyles(\n        base: FieldInputStyle(\n            cornerRadius: 8,\n            borderWidth: 1,\n            borderColor: Color(.separator),\n            padding: EdgeInsets(top: 12, leading: 12, bottom: 12, trailing: 12)\n        )\n    ),\n    fields: fields,\n    submit: submitConfig\n)\n\nlet newCard = try pxpCheckout.create(.newCard, componentConfig: newCardConfig) as! NewCardComponent\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"with-consent-checkbox","__idx":15},"children":["With consent checkbox"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Include a consent checkbox for saving the card:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"var fields = NewCardComponentFields(\n    cardConsent: NewCardOptionalField(\n        config: CardConsentComponentConfig(\n            label: \"Save card for future purchases\",\n            isRequired: false\n        ),\n        isShown: true\n    )\n)\n\nvar submitConfig = CardSubmitComponentConfig()\nsubmitConfig.onPreAuthorisation = { _ async in TransactionInitiationData() }\nsubmitConfig.onPostAuthorisation = { _ in }\nsubmitConfig.onPostTokenisation = { result in\n    if let success = result as? CardTokenizationResultSuccess {\n        print(\"Card saved with token: \\(success.gatewayTokenId)\")\n    }\n}\n\nlet newCardConfig = NewCardComponentConfig(\n    fields: fields,\n    submit: submitConfig\n)\nlet newCard = try pxpCheckout.create(.newCard, componentConfig: newCardConfig) as! NewCardComponent\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"with-3ds-authentication","__idx":16},"children":["With 3DS authentication"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Enable 3DS authentication for the payment:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"var submitConfig = CardSubmitComponentConfig()\nsubmitConfig.useUnityAuthenticationStrategy = true\nsubmitConfig.onPreInitiateAuthentication = { async in\n    PreInitiateIntegratedAuthenticationData(providerId: \"pxpfinancial\", timeout: 120)\n}\nsubmitConfig.onPreAuthentication = { async in\n    InitiateIntegratedAuthenticationData(\n        merchantCountryNumericCode: \"826\",\n        merchantLegalName: \"Example Ltd\",\n        challengeWindowSize: .size1,\n        requestorChallengeIndicator: .challengeRequestedMandate,\n        timeout: 180\n    )\n}\nsubmitConfig.onPreAuthorisation = { _ async in TransactionInitiationData() }\nsubmitConfig.onPostAuthorisation = { _ in }\n\nlet newCardConfig = NewCardComponentConfig(submit: submitConfig)\nlet newCard = try pxpCheckout.create(.newCard, componentConfig: newCardConfig) as! NewCardComponent\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"complete-implementation","__idx":17},"children":["Complete implementation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A comprehensive new card form with all features:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"let dynConfig = DynamicCardImageComponentConfig(\n    frontDynamicCardImageBackground: Image(\"CardFront\"),\n    backDynamicCardImageBackground: Image(\"CardBack\")\n)\nlet dynamicCardImage = try pxpCheckout.create(.dynamicCardImage, componentConfig: dynConfig) as! DynamicCardImageComponent\n\nvar fields = NewCardComponentFields(\n    cardNumber: CardNumberComponentConfig(\n        label: \"Card number\",\n        acceptedCardBrands: [.visa, .mastercard, .amex]\n    ),\n    expiryDate: CardExpiryDateComponentConfig(\n        label: \"Expiry\",\n        formatOptions: .mmYY\n    ),\n    cvc: NewCardOptionalField(\n        config: CardCvcComponentConfig(label: \"CVC\", isRequired: true),\n        isShown: true\n    ),\n    holderName: NewCardOptionalField(\n        config: CardHolderNameComponentConfig(label: \"Name on card\"),\n        isShown: true\n    ),\n    cardBrandSelector: CardBrandSelectorComponentConfig(),\n    cardConsent: NewCardOptionalField(\n        config: CardConsentComponentConfig(label: \"Save card for future use\"),\n        isShown: true\n    )\n)\n\nvar submitConfig = CardSubmitComponentConfig()\nsubmitConfig.useUnityAuthenticationStrategy = true\nsubmitConfig.onPreInitiateAuthentication = { async in\n    PreInitiateIntegratedAuthenticationData(providerId: \"pxpfinancial\", timeout: 120)\n}\nsubmitConfig.onPreAuthentication = { async in\n    InitiateIntegratedAuthenticationData(\n        merchantCountryNumericCode: \"826\",\n        merchantLegalName: \"Example Ltd\",\n        challengeWindowSize: .size1,\n        requestorChallengeIndicator: .challengeRequestedMandate,\n        timeout: 180\n    )\n}\nsubmitConfig.onPreAuthorisation = { _ async in TransactionInitiationData() }\nsubmitConfig.onPostAuthorisation = { result in\n    // Handle payment result\n}\nsubmitConfig.onPostTokenisation = { result in\n    if let success = result as? CardTokenizationResultSuccess {\n        print(\"Token created: \\(success.gatewayTokenId)\")\n    }\n}\n\nlet newCardConfig = NewCardComponentConfig(\n    styles: ContainerStyle(\n        backgroundColor: .white,\n        cornerRadius: 12,\n        borderWidth: 1,\n        borderColor: Color(.separator),\n        padding: EdgeInsets(top: 20, leading: 16, bottom: 20, trailing: 16),\n        spacing: 16\n    ),\n    inputStyles: FieldInputStateStyles(\n        base: FieldInputStyle(\n            cornerRadius: 8,\n            borderWidth: 1,\n            borderColor: Color(.separator)\n        )\n    ),\n    fields: fields,\n    submit: submitConfig,\n    dynamicCardImageComponent: dynamicCardImage,\n    displayRequiredIcon: true\n)\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":["For more information about payment flows and validation, see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/ios/card/card-submit"},"children":["Card submit"]},", ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/ios/card/3ds"},"children":["3DS transactions"]},", and ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/ios/card/data-validation"},"children":["Data validation"]},"."]}]}]},"headings":[{"value":"New card","id":"new-card","depth":1},{"value":"Basic usage","id":"basic-usage","depth":2},{"value":"Minimal configuration","id":"minimal-configuration","depth":3},{"value":"With dynamic card image","id":"with-dynamic-card-image","depth":3},{"value":"Advanced configuration","id":"advanced-configuration","depth":3},{"value":"Configuration","id":"configuration","depth":2},{"value":"Field configurations","id":"field-configurations","depth":3},{"value":"NewCardComponentFields","id":"newcardcomponentfields","depth":4},{"value":"NewCardOptionalField","id":"newcardoptionalfield","depth":4},{"value":"Methods","id":"methods","depth":2},{"value":"buildContent()","id":"buildcontent","depth":3},{"value":"Examples","id":"examples","depth":2},{"value":"Basic payment form","id":"basic-payment-form","depth":3},{"value":"With card brand selector","id":"with-card-brand-selector","depth":3},{"value":"With custom styling","id":"with-custom-styling","depth":3},{"value":"With consent checkbox","id":"with-consent-checkbox","depth":3},{"value":"With 3DS authentication","id":"with-3ds-authentication","depth":3},{"value":"Complete implementation","id":"complete-implementation","depth":3}],"frontmatter":{"seo":{"title":"New card"}},"lastModified":"2026-06-17T09:08:10.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/guides/checkout/components/ios/card/new-card","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}