# Cardholder name

Learn about customisation options for the cardholder name component.

## Styling

```kotlin
val cardHolderNameComponentConfig = CardHolderNameComponentConfig(
    label = String,
    placeholder = String,
    defaultValue = String?,
    maxLength = Int,
    minLength = Int,
    autoCapitalise = Boolean,
    style = CardHolderNameStyle?,
    showTrailingIcon = Boolean,
    showTooltip = Boolean,
    tooltipData = TooltipData,
    showHintIcon = Boolean,
    hintIcon = Int,
    showValidIcon = Boolean,
    validIcon = Int,
    invalidIcon = Int,
    showInvalidIcon = Boolean,
    dynamicCardImageComponent = DynamicCardImageComponent?,
    validations = CardHolderNameValidations
)
```

| Property | Description |
|  --- | --- |
| `label`String | The field label text. Defaults to `"Card Holder Name"`. |
| `placeholder`String | The placeholder text displayed when the input field is empty. Defaults to `"Card Holder Name"`. |
| `defaultValue`String? | Default value for the input field. |
| `maxLength`Int | The maximum number of characters allowed in the name input. Defaults to `100`. |
| `minLength`Int | The minimum number of characters required for valid name input. Defaults to `3`. |
| `autoCapitalise`Boolean | Whether to automatically capitalise first letters. Defaults to `true`. |
| `style`CardHolderNameStyle? | Custom styling configuration for the component. |
| `showTrailingIcon`Boolean | Whether to show the trailing person icon. Defaults to `true`. |
| `showTooltip`Boolean | Whether to show the tooltip icon. Defaults to `false`. |
| `tooltipData`TooltipData | Tooltip configuration with card images and helpful text. |
| `showHintIcon`Boolean | Whether to show the hint icon. Defaults to `false`. |
| `hintIcon`Int | Hint icon resource. Defaults to generic holder name icon. |
| `showValidIcon`Boolean | Whether to show validation icon when valid. Defaults to `true`. |
| `validIcon`Int | The validation icon resource. Defaults to check icon. |
| `invalidIcon`Int | The invalid icon resource. Defaults to invalid icon. |
| `showInvalidIcon`Boolean | Whether to show invalid icon when invalid. Defaults to `true`. |
| `dynamicCardImageComponent`DynamicCardImageComponent? | Dynamic card image component reference for card brand synchronisation. See [Dynamic card image](/guides/checkout/components/android/card/dynamic-card-image). |
| `validations`CardHolderNameValidations | Custom validation error messages for cardholder name validation. |


## Callbacks

```kotlin
data class CardCvcComponentConfig(
    val onChange: ((CvcInputEvent) -> Unit)? = null,
    val onFocus: ((CvcFocusEvent) -> Unit)? = null,
    val onValidationPassed: ((List<ValidationResult>) -> Unit)? = null,
    val onValidationFailed: ((List<ValidationResult>) -> Unit)? = null
)
```

| Callback | Description |
|  --- | --- |
| `onChange: (CvcInputEvent) -> Unit` | Event handler for when the CVC value changes. |
| `onFocus: (CvcFocusEvent) -> Unit` | Event handler for when the input receives focus. |
| `onValidationPassed: (List<ValidationResult>) -> Unit` | Event handler for when validation passes. |
| `onValidationFailed: (List<ValidationResult>) -> Unit` | Event handler for when validation fails. |


For more information about callbacks, see [Events](/guides/checkout/components/android/card/events).

## Example

```kotlin
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.pxp.PxpCheckout
import com.pxp.checkout.components.cardholdername.CardHolderNameComponent
import com.pxp.checkout.components.cardholdername.CardHolderNameComponentConfig
import com.pxp.checkout.types.ComponentType

/**
 * Basic Card Holder Name component implementation using pxpcheckout
 */
@Composable
fun BasicCardHolderNameExample(checkout: PxpCheckout) {
    Column(modifier = Modifier.fillMaxWidth()) {
        Text(
            text = "Card Holder Name Component Example",
            modifier = Modifier.padding(bottom = 16.dp)
        )
        
        // Create component configuration
        val config = CardHolderNameComponentConfig().apply {
            label = "Cardholder Name"
            placeholder = "Full name as shown on card"
            isRequired = true
            minLength = 2
            maxLength = 50
            autoCapitalize = true
        }
        
        // Create component using pxpcheckout factory
        val component = remember {
            checkout.createComponent<CardHolderNameComponent, CardHolderNameComponentConfig>(
                type = ComponentType.CARD_HOLDER_NAME,
                config = config
            )
        }
        
        // Render the component using pxpcheckout's buildComponentView
        checkout.buildComponentView(
            component = component,
            modifier = Modifier.fillMaxWidth()
        )
    }
}

/**
 * Activity implementation showing how to initialise and use the component
 */
class PaymentActivity : ComponentActivity() {
    private lateinit var pxpCheckout: PxpCheckout
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        // Initialise PXP Checkout SDK (example configuration)
        val sdkConfig = PxpSdkConfig(
            environment = Environment.TEST,
            session = SessionConfig(
                sessionId = "your_session_id",
                sessionData = "your_session_data"
            ),
            transactionData = TransactionData(
                amount = 100.0,
                currency = CurrencyType.USD,
                merchant = "your_merchant_id"
            ),
            clientId = "your_client_id"
        )
        
        pxpCheckout = PxpCheckout.builder()
            .withConfig(sdkConfig)
            .withContext(this)
            .withDebugMode(true)
            .build()
        
        setContent {
            BasicCardHolderNameExample(checkout = pxpCheckout)
        }
    }
}
```