Cardholder name

Learn about customisation options for the cardholder name component.

Styling

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.
`validations` CardHolderNameValidations	Custom validation error messages for cardholder name validation.

Callbacks

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.

Example

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)
        }
    }
}

Cardholder name

Styling

Callbacks

Example

Was this helpful?