{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["sub-heading","br","details","admonition"]},"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 customisation options for the new card 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 newCardComponentConfig = NewCardComponentConfig(\n    fields = Fields,\n    newCardStyle = NewCardStyle,\n    dynamicCardImageComponent = DynamicCardImageComponent?,\n    displayRequiredIcon = Boolean?,\n    autoFlipCardOnCvcFocus = Boolean,\n    submit = CardSubmitComponentConfig?\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":["fields"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Fields"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Configuration for card form fields. Contains nested configurations for individual card components."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["newCardStyle"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["NewCardStyle"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["New card component specific styling configuration. Defaults to default style."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"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":{},"children":["Optional reference to a dynamic card image component for visual card representation. See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/android/card/dynamic-card-image"},"children":["Dynamic card image"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["displayRequiredIcon"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Boolean?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Whether to show a required icon for all required fields."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["autoFlipCardOnCvcFocus"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Whether to automatically flip the card when the CVC field is focused. Only applies when ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["dynamicCardImageComponent"]}," is set. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"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":{},"children":["Configuration for the submit button, including custom validation support via ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onCustomValidation"]},". See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/android/card/card-submit"},"children":["Card submit"]},"."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"fields-configuration","__idx":2},"children":["Fields configuration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fields"]}," property contains nested configurations for individual card components:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"class Fields {\n    var cardNumber: CardNumberComponentConfig? = null\n    var expiryDate: CardExpiryDateComponentConfig? = null\n    var cvc: CardCvcComponentConfig? = null\n    var holderName: CardHolderNameComponentConfig? = null\n    var cardBrandSelector: CardBrandSelectorConfig? = null\n    var cardConsent: CardConsentConfig? = 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":"Field"},"children":["Field"]},{"$$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":["cardNumber"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CardNumberComponentConfig?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Card number field configuration. If null, uses default configuration."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"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":{},"children":["Card expiry date field configuration. If null, uses default configuration."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cvc"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CardCvcComponentConfig?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Card CVC/CVV field configuration. If null, uses default configuration."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["holderName"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CardHolderNameComponentConfig?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Card holder name field configuration. If null, uses default configuration."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardBrandSelector"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CardBrandSelectorConfig?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Card brand selector configuration. If null, uses default configuration."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardConsent"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CardConsentConfig?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Card consent field configuration. If null, consent field is not shown."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"callbacks","__idx":3},"children":["Callbacks"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"data class NewCardComponentConfig(\n    val onValidationPassed: ((List<ValidationResult>) -> Unit)? = null,\n    val onValidationFailed: ((List<ValidationResult>) -> Unit)? = null,\n    val onTriggerFieldValidation: ((ValidationResult) -> 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":["onValidationPassed: ((List<ValidationResult>) -> Unit)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Event handler for when validation passes. Inherited from ComponentConfigImpl."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onValidationFailed: ((List<ValidationResult>) -> Unit)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Event handler for when validation fails. Inherited from ComponentConfigImpl."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onTriggerFieldValidation: ((ValidationResult) -> Unit)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Event handler for when field validation is triggered individually. Inherited from ComponentConfigImpl."]}]}]}]}]},{"$$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":4},"children":["Example"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"import com.pxp.checkout.components.newCard.NewCardComponent\nimport com.pxp.checkout.components.newCard.NewCardComponentConfig\nimport com.pxp.checkout.components.cardnumber.CardNumberComponentConfig\nimport com.pxp.checkout.components.cardexpirydate.CardExpiryDateComponentConfig\nimport com.pxp.checkout.components.cardcvc.CardCvcComponentConfig\nimport com.pxp.checkout.components.cardholdername.CardHolderNameComponentConfig\nimport com.pxp.checkout.components.cardbrandselector.CardBrandSelectorConfig\nimport com.pxp.checkout.components.cardconsent.CardConsentConfig\nimport com.pxp.checkout.components.cardsubmit.CardSubmitComponentConfig\nimport com.pxp.checkout.components.dynamicCardImage.DynamicCardImageComponent\nimport com.pxp.checkout.styles.NewCardStyle\n\n// Create dynamic card image component (optional)\nval dynamicCardImageComponent = checkout.createComponent<DynamicCardImageComponent, DynamicCardImageComponentConfig>(\n    type = ComponentType.DYNAMIC_CARD_IMAGE,\n    config = DynamicCardImageComponentConfig(\n        cardDisplayMode = CardDisplayMode.BOTH_STAGGERED,\n        highlightedCardField = CardFieldType.CARD_NUMBER\n    )\n)\n\n// Configure individual fields\nval fields = NewCardComponentConfig.Fields().apply {\n    // Card number configuration\n    cardNumber = CardNumberComponentConfig(\n        label = \"Card Number\",\n        placeholder = \"1234 5678 9012 3456\",\n        formatCardNumber = true,\n        acceptedCardBrands = listOf(CardBrand.VISA, CardBrand.MASTERCARD, CardBrand.AMEX),\n        onCardBrandChanged = { brand ->\n            println(\"Card brand detected: $brand\")\n        }\n    )\n    \n    // Expiry date configuration\n    expiryDate = CardExpiryDateComponentConfig(\n        label = \"Expiry Date\",\n        placeholder = \"MM/YY\",\n        formatOptions = ExpiryDateFormat.MM_YY,\n        dynamicCardImageComponent = dynamicCardImageComponent\n    )\n    \n    // CVC configuration\n    cvc = CardCvcComponentConfig(\n        label = \"CVC\",\n        placeholder = \"123\",\n        showMaskToggle = true,\n        applyMask = false,\n        dynamicCardImageComponent = dynamicCardImageComponent\n    )\n    \n    // Cardholder name configuration\n    holderName = CardHolderNameComponentConfig(\n        label = \"Cardholder Name\",\n        placeholder = \"John Doe\",\n        autoCapitalise = true,\n        maxLength = 100,\n        dynamicCardImageComponent = dynamicCardImageComponent\n    )\n    \n    // Card brand selector configuration (optional)\n    cardBrandSelector = CardBrandSelectorConfig(\n        allowedBrands = listOf(CardBrand.VISA, CardBrand.MASTERCARD, CardBrand.AMEX),\n        onBrandChange = { brand ->\n            println(\"Manual brand selection: $brand\")\n        }\n    )\n    \n    // Card consent configuration (optional)\n    cardConsent = CardConsentConfig(\n        label = \"Save this card for future payments\",\n        initialChecked = false\n    )\n}\n\n// Configure submit button (optional)\nval submitConfig = CardSubmitComponentConfig(\n    buttonText = \"Add Card\",\n    loadingText = \"Adding Card...\",\n    disableUntilValidated = true,\n    onSubmit = {\n        println(\"New card form submitted\")\n    }\n)\n\n// Optional: Create custom styling\nval customStyle = NewCardStyle(\n    fieldSpacing = 16.dp,\n    borderRadius = 8.dp,\n    backgroundColor = Color.White,\n    borderColor = Color.Gray\n)\n\nval config = NewCardComponentConfig(\n    // Field configurations\n    fields = fields,\n    \n    // Dynamic card image integration\n    dynamicCardImageComponent = dynamicCardImageComponent,\n    autoFlipCardOnCvcFocus = true,\n    \n    // Submit button integration\n    submit = submitConfig,\n    \n    // Display configuration\n    displayRequiredIcon = true,\n    \n    // Styling\n    newCardStyle = customStyle\n)\n\nval newCardComponent = checkout.createComponent<NewCardComponent, NewCardComponentConfig>(\n    type = ComponentType.NEW_CARD,\n    config = config\n)\n","lang":"kotlin"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"card-restrictions","__idx":5},"children":["Card restrictions"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can restrict what card types the new card component accepts by configuring the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["restrictions"]}," parameter in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PxpSdkConfig"]},". This provides frontend validation based on card owner type and funding source."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"kotlin","header":{"controls":{"copy":{}}},"source":"val sdkConfig = PxpSdkConfig(\n    // ... other config\n    restrictions = Restrictions(\n        card = RestrictionsCard(\n            ownerTypes = listOf(RestrictionOwnerType.CONSUMER),\n            fundingSources = listOf(RestrictionFundingSource.CREDIT, RestrictionFundingSource.DEBIT)\n        )\n    )\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":"Restriction"},"children":["Restriction"]},{"$$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":["ownerTypes"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Restricts cards based on the card owner segment.",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},"Possible values:",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["RestrictionOwnerType.CORPORATE"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["RestrictionOwnerType.CONSUMER"]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fundingSources"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Restricts cards based on the funding source.",{"$$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":["RestrictionFundingSource.PREPAID"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["RestrictionFundingSource.CREDIT"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["RestrictionFundingSource.DEBIT"]}]}]}]}]}]}]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Card restrictions work alongside component-level ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["acceptedCardBrands"]}," validation. Both validations must pass for a card to be accepted. See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/android/card/data-validation#card-restrictions-vs-accepted-card-brands"},"children":["Data validation"]}," for details."]}]}]},"headings":[{"value":"New card","id":"new-card","depth":1},{"value":"Styling","id":"styling","depth":2},{"value":"Fields configuration","id":"fields-configuration","depth":3},{"value":"Callbacks","id":"callbacks","depth":2},{"value":"Example","id":"example","depth":2},{"value":"Card restrictions","id":"card-restrictions","depth":2}],"frontmatter":{"seo":{"title":"New card"}},"lastModified":"2026-05-07T11:25:00.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/guides/checkout/components/android/card/new-card","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}