{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["sub-heading","br","details","admonition"]},"type":"markdown"},"seo":{"title":"Card number","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":"card-number","__idx":0},"children":["Card number"]},{"$$mdtype":"Tag","name":"SubHeading","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Learn about customisation options for the card number 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 cardNumberComponentConfig = CardNumberComponentConfig(\n    label = String,\n    placeholder = String,\n    onCardBrandChanged = ((CardBrand?) -> Unit)?,\n    onCardBrandCannotRecognised = (() -> Unit)?,\n    style = CardNumberStyle?,\n    formatCardNumber = Boolean,\n    validationEnabled = Boolean,\n    validations = CardNumberValidations,\n    showTrailingIcon = Boolean,\n    showValidIcon = Boolean,\n    validIcon = Int,\n    invalidIcon = Int,\n    showInvalidIcon = Boolean,\n    useTransparentCardBrandImage = Boolean,\n    acceptedCardBrands = List<CardBrand>,\n    renderCardBrandSelector = Boolean,\n    cardBrandSelectorComponent = CardBrandSelectorComponent?,\n    cardCvcComponent = CardCvcComponent?,\n    showTooltip = Boolean,\n    showHintIcon = Boolean,\n    hintIcon = Int,\n    tooltipData = TooltipData,\n    dynamicCardImageComponent = DynamicCardImageComponent?,\n    focusOrder = Int,\n    displayRequiredIcon = Boolean?,\n    isRequired = Boolean\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":["inputAttributes"]}," ",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["InputAttributes?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Additional input field attributes and configurations."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["isRequired"]}," ",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Whether the card number field is required for submission."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["placeholder"]}," ",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The placeholder text showing the card number format."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["mask"]}," ",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The input mask pattern for formatting (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["#### #### #### ####"]},")."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["componentStyles"]}," ",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["ComponentStyles?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Custom styling for the component container."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["inputStyles"]}," ",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["StateStyles?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Styling for the input field in various states."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["label"]}," ",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The input label's text."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["labelStyles"]}," ",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["StateStyles?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The label styling based on the state."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["labelPosition"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["LabelPosition"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The position of the label relative to the input.",{"$$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":["ABOVE"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["BELOW"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["START"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["END"]}]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["isFloatingLabel"]}," ",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Whether the label should float above the input when focused."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["invalidTextStyles"]}," ",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["ComponentStyle?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Styling for the validation message text."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["invalidTextPosition"]}," ",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["ErrorPosition"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The position of the error messages relative to the input.",{"$$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":["ABOVE"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["BELOW"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["START"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["END"]}]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["guideText"]}," ",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Helper text to display below the input field."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["validations"]}," ",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CardNumberValidationRules?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Validation rules for card numbers."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["invalidIcon"]}," ",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["IconConfig?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Configuration for the invalid state icon."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["validIcon"]}," ",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["IconConfig?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Configuration for the valid state icon."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardBrandIcon"]}," ",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["IconConfig?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Configuration for the card brand icon display."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["displayValidIcon"]}," ",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Whether to show a success icon when valid."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["displayInvalidIcon"]}," ",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Whether to show an error icon when invalid."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["displayCardBrandIcon"]}," ",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Whether to show a detected card brand icon."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["enableLuhnValidation"]}," ",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Whether to enable Luhn algorithm validation."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["enableCardBrandDetection"]}," ",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Whether to auto-detect the card brand from the number."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["supportedCardBrands"]}," ",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["List<CardBrand>>"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["A list of supported card brands."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["maskInput"]}," ",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Whether to apply formatting mask to input."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["autoFormat"]}," ",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Whether to automatically format input with spaces."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["maxLength"]}," ",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Int"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The maximum length including formatting characters."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["enableSecureInput"]}," ",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Whether to enable secure input mode."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["maskAfterInput"]}," ",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Whether to mask numbers after input."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["securityDelay"]}," ",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Long"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The delay before masking input, in milliseconds."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["contentDescription"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String?"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardBrandContentDescription"]}," ",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Accessibility description for card brand icon."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["allowCopyPaste"]}," ",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Whether to allow copy/paste. This is usually disabled for security reasons."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["validationOnBlur"]}," ",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Whether to validate when the input loses focus."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["validationOnChange"]}," ",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Whether to validate as the value changes."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["focusOrder"]}," ",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Int"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The tab order for accessibility navigation."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["enableAnimations"]}," ",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Whether to enable component animations."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardBrandAnimationDuration"]}," ",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Long"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The duration of the card brand change animations."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["validationAnimationDuration"]}," ",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Long"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The duration of the validation state animations."]}]}]}]}]},{"$$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 CardNumberComponentConfig(\n    val onCardBrandChanged: ((CardBrandChangeEvent) -> Unit)? = null,\n    val onCardBrandCanNotRecognized: ((CardBrandChangeEvent) -> Unit)? = null,\n    val onChange: ((CardNumberInputEvent) -> Unit)? = null,\n    val onFocus: ((CardNumberFocusEvent) -> Unit)? = null,\n    val onValidationPassed: ((List<ValidationResult>) -> Unit)? = null,\n    val onValidationFailed: ((List<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":["onCardBrandChanged: (CardBrandChangeEvent) -> Unit"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Event handler for when the detected brand changes."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onCardBrandCanNotRecognized: () -> Unit"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Event handler for when the card brand can't be recognised."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onChange: (CardNumberInputEvent) -> Unit"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Event handler for when the card number value changes."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onFocus: (CardNumberFocusEvent) -> Unit"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Event handler for when the input receives focus."]}]},{"$$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."]}]},{"$$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."]}]}]}]}]},{"$$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":"class CardNumberComponentExample : ComponentActivity() {\n    private lateinit var pxpCheckout: PxpCheckout\n    private lateinit var cardNumberComponent: CardNumberComponent\n    \n    override fun onCreate(savedInstanceState: Bundle?) {\n        super.onCreate(savedInstanceState)\n        \n        setupCardNumberComponent()\n        \n        setContent {\n            MaterialTheme {\n                CardNumberComponentScreen()\n            }\n        }\n    }\n    \n    private fun setupCardNumberComponent() {\n        val cardNumberConfig = CardNumberComponentConfig(\n            // Basic configuration\n            label = \"Card Number\",\n            placeholder = \"1234 5678 9012 3456\",\n            mask = \"#### #### #### ####\",\n            isRequired = true,\n            \n            // Input attributes\n            inputAttributes = InputAttributes(\n                maxLength = 19,\n                keyboardType = KeyboardType.Number,\n                imeAction = ImeAction.Next,\n                autoComplete = AutoCompleteType.CREDIT_CARD_NUMBER\n            ),\n            \n            // Card number specific features\n            enableLuhnValidation = true,\n            enableCardBrandDetection = true,\n            supportedCardBrands = listOf(\n                CardBrand.VISA,\n                CardBrand.MASTERCARD,\n                CardBrand.AMERICAN_EXPRESS,\n                CardBrand.DISCOVER\n            ),\n            maskInput = true,\n            autoFormat = true,\n            maxLength = 19,\n            \n            // Security configuration\n            enableSecureInput = true,\n            maskAfterInput = false,\n            securityDelay = 3000L,\n            \n            // Component styling\n            componentStyles = ComponentStyles(\n                container = StateStyles(\n                    base = ComponentStyle(\n                        colors = ComponentColors(\n                            background = Color.White,\n                            border = Color(0xFFE0E0E0)\n                        ),\n                        dimensions = ComponentDimensions(\n                            padding = PaddingValues(16.dp),\n                            cornerRadius = 8.dp\n                        ),\n                        borders = ComponentBorders(\n                            width = 1.dp,\n                            style = BorderStyle.SOLID\n                        )\n                    ),\n                    valid = ComponentStyle(\n                        colors = ComponentColors(\n                            border = Color(0xFF4CAF50),\n                            background = Color(0xFFF8FFF8)\n                        ),\n                        animations = ComponentAnimations(\n                            duration = 300.milliseconds,\n                            easing = FastOutSlowInEasing\n                        )\n                    ),\n                    invalid = ComponentStyle(\n                        colors = ComponentColors(\n                            border = Color(0xFFF44336),\n                            background = Color(0xFFFFF8F8)\n                        ),\n                        animations = ComponentAnimations(\n                            duration = 300.milliseconds,\n                            easing = FastOutSlowInEasing\n                        )\n                    ),\n                    focused = ComponentStyle(\n                        colors = ComponentColors(\n                            border = Color(0xFF2196F3)\n                        ),\n                        dimensions = ComponentDimensions(\n                            elevation = 2.dp\n                        )\n                    )\n                )\n            ),\n            \n            // Input field styling\n            inputStyles = StateStyles(\n                base = ComponentStyle(\n                    typography = ComponentTypography(\n                        fontSize = 18.sp,\n                        fontWeight = FontWeight.Medium,\n                        color = Color(0xFF212121),\n                        fontFamily = FontFamily.Monospace,\n                        letterSpacing = 1.sp\n                    ),\n                    colors = ComponentColors(\n                        background = Color.Transparent,\n                        text = Color(0xFF212121),\n                        placeholder = Color(0xFF9E9E9E)\n                    ),\n                    dimensions = ComponentDimensions(\n                        padding = PaddingValues(horizontal = 16.dp, vertical = 12.dp)\n                    )\n                ),\n                valid = ComponentStyle(\n                    colors = ComponentColors(\n                        text = Color(0xFF2E7D32)\n                    )\n                ),\n                invalid = ComponentStyle(\n                    colors = ComponentColors(\n                        text = Color(0xFFD32F2F)\n                    )\n                ),\n                focused = ComponentStyle(\n                    colors = ComponentColors(\n                        text = Color(0xFF1976D2)\n                    )\n                )\n            ),\n            \n            // Label styling\n            labelStyles = StateStyles(\n                base = ComponentStyle(\n                    typography = ComponentTypography(\n                        fontSize = 14.sp,\n                        fontWeight = FontWeight.Medium,\n                        color = Color(0xFF757575),\n                        letterSpacing = 0.1.sp\n                    ),\n                    dimensions = ComponentDimensions(\n                        padding = PaddingValues(bottom = 8.dp)\n                    )\n                ),\n                invalid = ComponentStyle(\n                    typography = ComponentTypography(\n                        color = Color(0xFFD32F2F)\n                    )\n                ),\n                focused = ComponentStyle(\n                    typography = ComponentTypography(\n                        color = Color(0xFF1976D2)\n                    )\n                )\n            ),\n            \n            // Label configuration\n            labelPosition = LabelPosition.ABOVE,\n            isFloatingLabel = false,\n            \n            // Error message styling\n            invalidTextStyles = ComponentStyle(\n                typography = ComponentTypography(\n                    fontSize = 12.sp,\n                    color = Color(0xFFD32F2F),\n                    fontStyle = FontStyle.Normal\n                ),\n                dimensions = ComponentDimensions(\n                    padding = PaddingValues(top = 4.dp, start = 16.dp)\n                )\n            ),\n            invalidTextPosition = ErrorPosition.BELOW,\n            \n            // Guide text\n            guideText = \"Enter your 16-digit card number\",\n            \n            // Validation rules\n            validations = CardNumberValidationRules(\n                minLength = 13,\n                maxLength = 19,\n                enableLuhnCheck = true,\n                allowedBrands = listOf(\n                    CardBrand.VISA,\n                    CardBrand.MASTERCARD,\n                    CardBrand.AMERICAN_EXPRESS,\n                    CardBrand.DISCOVER\n                ),\n                customValidator = { cardNumber ->\n                    when {\n                        cardNumber.isBlank() -> ValidationResult(\n                            isValid = false,\n                            errorMessage = \"Card number is required\",\n                            errorCode = \"REQUIRED\"\n                        )\n                        cardNumber.replace(\" \", \"\").length < 13 -> ValidationResult(\n                            isValid = false,\n                            errorMessage = \"Card number is too short\",\n                            errorCode = \"TOO_SHORT\"\n                        )\n                        !isValidLuhn(cardNumber.replace(\" \", \"\")) -> ValidationResult(\n                            isValid = false,\n                            errorMessage = \"Invalid card number\",\n                            errorCode = \"INVALID_LUHN\"\n                        )\n                        else -> ValidationResult(isValid = true)\n                    }\n                }\n            ),\n            \n            // Icon configuration\n            validIcon = IconConfig(\n                icon = Icons.Default.CheckCircle,\n                tint = Color(0xFF4CAF50),\n                size = 20.dp\n            ),\n            invalidIcon = IconConfig(\n                icon = Icons.Default.Error,\n                tint = Color(0xFFF44336),\n                size = 20.dp\n            ),\n            cardBrandIcon = IconConfig(\n                icon = Icons.Default.CreditCard,\n                tint = Color(0xFF757575),\n                size = 24.dp\n            ),\n            displayValidIcon = true,\n            displayInvalidIcon = true,\n            displayCardBrandIcon = true,\n            \n            // Accessibility\n            contentDescription = \"Credit card number input field\",\n            cardBrandContentDescription = \"Detected card brand\",\n            \n            // Input behaviour\n            allowCopyPaste = false, // Security consideration\n            validationOnBlur = true,\n            validationOnChange = true,\n            focusOrder = 1,\n            \n            // Animation configuration\n            enableAnimations = true,\n            cardBrandAnimationDuration = 300L,\n            validationAnimationDuration = 200L,\n            \n            // Callback functions\n            onChange = { event ->\n                Log.d(\"CardNumber\", \"Card number changed: ${event.formattedValue}\")\n                Log.d(\"CardNumber\", \"Is valid: ${event.isValid}\")\n                Log.d(\"CardNumber\", \"Detected brand: ${event.detectedBrand?.displayName}\")\n                Log.d(\"CardNumber\", \"Luhn valid: ${event.luhnValid}\")\n                \n                if (event.validationErrors.isNotEmpty()) {\n                    Log.d(\"CardNumber\", \"Validation errors: ${event.validationErrors}\")\n                }\n                \n                handleCardNumberChange(event)\n            },\n            \n            onFocus = { event ->\n                Log.d(\"CardNumber\", \"Card number focused: ${event.isFocused}\")\n                handleCardNumberFocus(event)\n            },\n            \n            onBlur = { event ->\n                Log.d(\"CardNumber\", \"Card number blurred: ${event.isFocused}\")\n                handleCardNumberBlur(event)\n            },\n            \n            onValidationPassed = { results ->\n                Log.d(\"CardNumber\", \"Card number validation passed\")\n                handleValidationPassed(results)\n            },\n            \n            onValidationFailed = { results ->\n                Log.d(\"CardNumber\", \"Card number validation failed: $results\")\n                handleValidationFailed(results)\n            },\n            \n            onCardBrandDetected = { brandEvent ->\n                Log.d(\"CardNumber\", \"Card brand detected: ${brandEvent.cardBrand.displayName}\")\n                Log.d(\"CardNumber\", \"Detection confidence: ${brandEvent.confidence}\")\n                Log.d(\"CardNumber\", \"Is supported: ${brandEvent.isSupported}\")\n                \n                handleCardBrandDetected(brandEvent)\n            },\n            \n            onCardBrandChanged = { changeEvent ->\n                Log.d(\"CardNumber\", \"Brand changed from ${changeEvent.previousBrand?.displayName} to ${changeEvent.newBrand?.displayName}\")\n                handleCardBrandChanged(changeEvent)\n            },\n            \n            onLuhnValidation = { luhnEvent ->\n                Log.d(\"CardNumber\", \"Luhn validation: ${luhnEvent.isValid}\")\n                Log.d(\"CardNumber\", \"Checksum: ${luhnEvent.checksum}\")\n                handleLuhnValidation(luhnEvent)\n            }\n        )\n        \n        cardNumberComponent = pxpCheckout.createComponent(\n            ComponentType.CARD_NUMBER,\n            cardNumberConfig\n        )\n    }\n    \n    @Composable\n    private fun CardNumberComponentScreen() {\n        var cardNumber by remember { mutableStateOf(\"\") }\n        var detectedBrand by remember { mutableStateOf<CardBrand?>(null) }\n        var isValid by remember { mutableStateOf(false) }\n        var validationErrors by remember { mutableStateOf<List<ValidationError>>(emptyList()) }\n        var isLuhnValid by remember { mutableStateOf(false) }\n        \n        Column(\n            modifier = Modifier\n                .fillMaxSize()\n                .padding(16.dp),\n            verticalArrangement = Arrangement.spacedBy(16.dp)\n        ) {\n            Text(\n                text = \"Card Number Component\",\n                style = MaterialTheme.typography.headlineMedium,\n                modifier = Modifier.padding(bottom = 8.dp)\n            )\n            \n            // Card number component\n            Card(\n                modifier = Modifier.fillMaxWidth(),\n                elevation = CardDefaults.cardElevation(defaultElevation = 2.dp)\n            ) {\n                Column(modifier = Modifier.padding(16.dp)) {\n                    pxpCheckout.buildComponentView(\n                        component = cardNumberComponent,\n                        modifier = Modifier.fillMaxWidth()\n                    )\n                }\n            }\n            \n            // Card brand display\n            detectedBrand?.let { brand ->\n                Card(\n                    modifier = Modifier.fillMaxWidth(),\n                    colors = CardDefaults.cardColors(\n                        containerColor = Color(0xFFF3F4F6)\n                    )\n                ) {\n                    Row(\n                        modifier = Modifier.padding(16.dp),\n                        verticalAlignment = Alignment.CenterVertically,\n                        horizontalArrangement = Arrangement.spacedBy(12.dp)\n                    ) {\n                        Image(\n                            painter = painterResource(brand.iconResId),\n                            contentDescription = brand.displayName,\n                            modifier = Modifier.size(32.dp)\n                        )\n                        \n                        Column {\n                            Text(\n                                text = \"Detected Card Brand\",\n                                style = MaterialTheme.typography.labelMedium,\n                                color = Color(0xFF757575)\n                            )\n                            Text(\n                                text = brand.displayName,\n                                style = MaterialTheme.typography.bodyMedium,\n                                fontWeight = FontWeight.Medium\n                            )\n                        }\n                        \n                        Spacer(modifier = Modifier.weight(1f))\n                        \n                        if (isValid && isLuhnValid) {\n                            Icon(\n                                imageVector = Icons.Default.CheckCircle,\n                                contentDescription = \"Valid\",\n                                tint = Color(0xFF4CAF50)\n                            )\n                        }\n                    }\n                }\n            }\n            \n            // Validation status\n            Card(\n                modifier = Modifier.fillMaxWidth(),\n                colors = CardDefaults.cardColors(\n                    containerColor = when {\n                        isValid && isLuhnValid -> Color(0xFFE8F5E8)\n                        validationErrors.isNotEmpty() -> Color(0xFFFFEBEE)\n                        else -> MaterialTheme.colorScheme.surfaceVariant\n                    }\n                )\n            ) {\n                Column(modifier = Modifier.padding(16.dp)) {\n                    Row(\n                        verticalAlignment = Alignment.CenterVertically,\n                        horizontalArrangement = Arrangement.spacedBy(8.dp)\n                    ) {\n                        when {\n                            isValid && isLuhnValid -> {\n                                Icon(\n                                    imageVector = Icons.Default.CheckCircle,\n                                    contentDescription = null,\n                                    tint = Color(0xFF4CAF50)\n                                )\n                                Text(\n                                    text = \"Valid card number\",\n                                    style = MaterialTheme.typography.bodyMedium,\n                                    fontWeight = FontWeight.Medium,\n                                    color = Color(0xFF2E7D32)\n                                )\n                            }\n                            validationErrors.isNotEmpty() -> {\n                                Icon(\n                                    imageVector = Icons.Default.Error,\n                                    contentDescription = null,\n                                    tint = Color(0xFFF44336)\n                                )\n                                Text(\n                                    text = \"Invalid card number\",\n                                    style = MaterialTheme.typography.bodyMedium,\n                                    fontWeight = FontWeight.Medium,\n                                    color = Color(0xFFD32F2F)\n                                )\n                            }\n                            else -> {\n                                Icon(\n                                    imageVector = Icons.Default.Info,\n                                    contentDescription = null,\n                                    tint = Color(0xFF2196F3)\n                                )\n                                Text(\n                                    text = \"Enter card number\",\n                                    style = MaterialTheme.typography.bodyMedium,\n                                    fontWeight = FontWeight.Medium\n                                )\n                            }\n                        }\n                    }\n                    \n                    if (cardNumber.isNotEmpty()) {\n                        Spacer(modifier = Modifier.height(8.dp))\n                        \n                        Row(\n                            horizontalArrangement = Arrangement.spacedBy(16.dp)\n                        ) {\n                            Column {\n                                Text(\n                                    text = \"Length\",\n                                    style = MaterialTheme.typography.labelSmall,\n                                    color = Color(0xFF757575)\n                                )\n                                Text(\n                                    text = \"${cardNumber.replace(\" \", \"\").length} digits\",\n                                    style = MaterialTheme.typography.bodySmall\n                                )\n                            }\n                            \n                            Column {\n                                Text(\n                                    text = \"Luhn Check\",\n                                    style = MaterialTheme.typography.labelSmall,\n                                    color = Color(0xFF757575)\n                                )\n                                Text(\n                                    text = if (isLuhnValid) \"Valid\" else \"Invalid\",\n                                    style = MaterialTheme.typography.bodySmall,\n                                    color = if (isLuhnValid) Color(0xFF4CAF50) else Color(0xFFF44336)\n                                )\n                            }\n                        }\n                    }\n                    \n                    if (validationErrors.isNotEmpty()) {\n                        Spacer(modifier = Modifier.height(8.dp))\n                        Column {\n                            validationErrors.forEach { error ->\n                                Text(\n                                    text = \"• ${error.message}\",\n                                    style = MaterialTheme.typography.bodySmall,\n                                    color = Color(0xFFF44336)\n                                )\n                            }\n                        }\n                    }\n                }\n            }\n        }\n    }\n    \n    private fun handleCardNumberChange(event: CardNumberInputEvent) {\n        // Update UI state\n        // Validate card number\n        // Update other components based on detected brand\n    }\n    \n    private fun handleCardNumberFocus(event: CardNumberFocusEvent) {\n        // Handle focus state changes\n        // Show additional help if needed\n    }\n    \n    private fun handleCardNumberBlur(event: CardNumberFocusEvent) {\n        // Handle blur state changes\n        // Trigger comprehensive validation\n    }\n    \n    private fun handleValidationPassed(results: List<ValidationResult>) {\n        // Handle successful validation\n        // Enable next form field\n        // Update form progress\n    }\n    \n    private fun handleValidationFailed(results: List<ValidationResult>) {\n        // Handle validation failures\n        // Show specific error messages\n        // Disable form submission\n    }\n    \n    private fun handleCardBrandDetected(brandEvent: CardBrandEvent) {\n        // Update UI to show detected brand\n        // Update card brand icon\n        // Configure other form fields based on brand\n        \n        if (!brandEvent.isSupported) {\n            showUnsupportedCardBrandMessage(brandEvent.cardBrand)\n        }\n    }\n    \n    private fun handleCardBrandChanged(changeEvent: CardBrandChangeEvent) {\n        // Handle brand change\n        // Update form validation rules\n        // Reset related field validations if needed\n    }\n    \n    private fun handleLuhnValidation(luhnEvent: LuhnValidationEvent) {\n        // Handle Luhn validation result\n        // Update security indicators\n        // Log validation for analytics\n    }\n    \n    private fun showUnsupportedCardBrandMessage(cardBrand: CardBrand) {\n        // Show message about unsupported card brand\n        // Suggest supported alternatives\n    }\n    \n    private fun isValidLuhn(cardNumber: String): Boolean {\n        // Implement Luhn algorithm validation\n        val digits = cardNumber.filter { it.isDigit() }.map { it.digitToInt() }\n        if (digits.size < 13) return false\n        \n        val checksum = digits.asReversed().mapIndexed { index, digit ->\n            if (index % 2 == 1) {\n                val doubled = digit * 2\n                if (doubled > 9) doubled - 9 else doubled\n            } else {\n                digit\n            }\n        }.sum()\n        \n        return checksum % 10 == 0\n    }\n}\n","lang":"kotlin"},"children":[]}]},"headings":[{"value":"Card number","id":"card-number","depth":1},{"value":"Styling","id":"styling","depth":2},{"value":"Callbacks","id":"callbacks","depth":2},{"value":"Example","id":"example","depth":2}],"frontmatter":{"seo":{"title":"Card number"}},"lastModified":"2026-02-26T12:14:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/guides/checkout/components/android/card/card-number","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}