{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["sub-heading","br","details","admonition"]},"type":"markdown"},"seo":{"title":"Cardholder name","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":"cardholder-name","__idx":0},"children":["Cardholder name"]},{"$$mdtype":"Tag","name":"SubHeading","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Learn about customisation options for the cardholder name 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 cardHolderNameComponentConfig = CardHolderNameComponentConfig(\n    label = String,\n    placeholder = String,\n    defaultValue = String?,\n    maxLength = Int,\n    minLength = Int,\n    autoCapitalise = Boolean,\n    style = CardHolderNameStyle?,\n    showTrailingIcon = Boolean,\n    showTooltip = Boolean,\n    tooltipData = TooltipData,\n    showHintIcon = Boolean,\n    hintIcon = Int,\n    showValidIcon = Boolean,\n    validIcon = Int,\n    invalidIcon = Int,\n    showInvalidIcon = Boolean,\n    dynamicCardImageComponent = DynamicCardImageComponent?,\n    validations = CardHolderNameValidations\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":["label"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The field label text. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"Card Holder Name\""]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["placeholder"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The placeholder text displayed when the input field is empty. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"Card Holder Name\""]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["defaultValue"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Default value for the input field."]}]},{"$$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 number of characters allowed in the name input. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["100"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["minLength"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Int"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The minimum number of characters required for valid name input. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["3"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["autoCapitalise"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Whether to automatically capitalise first letters. 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":["style"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CardHolderNameStyle?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Custom styling configuration for the component."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["showTrailingIcon"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Whether to show the trailing person icon. 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":["showTooltip"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Whether to show the tooltip icon. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["tooltipData"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["TooltipData"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Tooltip configuration with card images and helpful text."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["showHintIcon"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Whether to show the hint icon. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["hintIcon"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Int"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Hint icon resource. Defaults to generic holder name icon."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["showValidIcon"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Whether to show validation icon when valid. 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":["validIcon"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Int"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The validation icon resource. Defaults to check icon."]}]},{"$$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":["Int"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The invalid icon resource. Defaults to invalid icon."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["showInvalidIcon"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Whether to show invalid icon when invalid. 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":["dynamicCardImageComponent"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["DynamicCardImageComponent?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Dynamic card image component reference for card brand synchronisation. 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":["validations"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CardHolderNameValidations"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Custom validation error messages for cardholder name validation."]}]}]}]}]},{"$$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 CardCvcComponentConfig(\n    val onChange: ((CvcInputEvent) -> Unit)? = null,\n    val onFocus: ((CvcFocusEvent) -> 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":["onChange: (CvcInputEvent) -> Unit"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Event handler for when the CVC value changes."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onFocus: (CvcFocusEvent) -> 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":"import androidx.compose.foundation.layout.Column\nimport androidx.compose.foundation.layout.fillMaxWidth\nimport androidx.compose.foundation.layout.padding\nimport androidx.compose.material3.Text\nimport androidx.compose.runtime.Composable\nimport androidx.compose.runtime.remember\nimport androidx.compose.ui.Modifier\nimport androidx.compose.ui.unit.dp\nimport com.pxp.PxpCheckout\nimport com.pxp.checkout.components.cardholdername.CardHolderNameComponent\nimport com.pxp.checkout.components.cardholdername.CardHolderNameComponentConfig\nimport com.pxp.checkout.types.ComponentType\n\n/**\n * Basic Card Holder Name component implementation using pxpcheckout\n */\n@Composable\nfun BasicCardHolderNameExample(checkout: PxpCheckout) {\n    Column(modifier = Modifier.fillMaxWidth()) {\n        Text(\n            text = \"Card Holder Name Component Example\",\n            modifier = Modifier.padding(bottom = 16.dp)\n        )\n        \n        // Create component configuration\n        val config = CardHolderNameComponentConfig().apply {\n            label = \"Cardholder Name\"\n            placeholder = \"Full name as shown on card\"\n            isRequired = true\n            minLength = 2\n            maxLength = 50\n            autoCapitalize = true\n        }\n        \n        // Create component using pxpcheckout factory\n        val component = remember {\n            checkout.createComponent<CardHolderNameComponent, CardHolderNameComponentConfig>(\n                type = ComponentType.CARD_HOLDER_NAME,\n                config = config\n            )\n        }\n        \n        // Render the component using pxpcheckout's buildComponentView\n        checkout.buildComponentView(\n            component = component,\n            modifier = Modifier.fillMaxWidth()\n        )\n    }\n}\n\n/**\n * Activity implementation showing how to initialise and use the component\n */\nclass PaymentActivity : ComponentActivity() {\n    private lateinit var pxpCheckout: PxpCheckout\n    \n    override fun onCreate(savedInstanceState: Bundle?) {\n        super.onCreate(savedInstanceState)\n        \n        // Initialise PXP Checkout SDK (example configuration)\n        val sdkConfig = PxpSdkConfig(\n            environment = Environment.TEST,\n            session = SessionConfig(\n                sessionId = \"your_session_id\",\n                sessionData = \"your_session_data\"\n            ),\n            transactionData = TransactionData(\n                amount = 100.0,\n                currency = CurrencyType.USD,\n                merchant = \"your_merchant_id\"\n            ),\n            clientId = \"your_client_id\"\n        )\n        \n        pxpCheckout = PxpCheckout.builder()\n            .withConfig(sdkConfig)\n            .withContext(this)\n            .withDebugMode(true)\n            .build()\n        \n        setContent {\n            BasicCardHolderNameExample(checkout = pxpCheckout)\n        }\n    }\n}\n","lang":"kotlin"},"children":[]}]},"headings":[{"value":"Cardholder name","id":"cardholder-name","depth":1},{"value":"Styling","id":"styling","depth":2},{"value":"Callbacks","id":"callbacks","depth":2},{"value":"Example","id":"example","depth":2}],"frontmatter":{"seo":{"title":"Cardholder name"}},"lastModified":"2026-02-26T12:14:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/guides/checkout/components/android/card/cardholder-name","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}