# Card CVC

Learn about customisation options for the card CVC component.

## Styling


```kotlin
val cardCvcComponentConfig = CardCvcComponentConfig(
    label = String,
    placeholder = String,
    cardBrand = CardBrand?,
    validations = CardCvcValidations,
    style = CardCvcStyle?,
    showTrailingIcon = Boolean,
    showTooltip = Boolean,
    showLabel = Boolean,
    showErrorMessage = Boolean,
    visibilityOnIcon = Int,
    visibilityOffIcon = Int,
    tooltipData = TooltipData,
    applyMask = Boolean,
    showMaskToggle = Boolean,
    showHintIcon = Boolean,
    hintIcon = Int,
    showValidIcon = Boolean,
    validIcon = Int,
    invalidIcon = Int,
    showInvalidIcon = Boolean,
    displayRequiredIcon = Boolean?,
    guideText = String?,
    dynamicCardImageComponent = DynamicCardImageComponent?
)
```

| Property | Description |
|  --- | --- |
| `label`String | The input label's text. Defaults to `"CVC"`. |
| `placeholder`String | The placeholder text for the field. Defaults to an empty string. |
| `cardBrand`CardBrand? | The current card brand to determine CVC requirements. This affects validation length. |
| `validations`CardCvcValidations | Custom validation error messages for CVC validation. |
| `style`CardCvcStyle? | Custom styling configuration for the component. |
| `showTrailingIcon`Boolean | Whether to show the trailing icon. Defaults to `true`. |
| `showTooltip`Boolean | Whether to show the tooltip icon. Defaults to `false`. |
| `showLabel`Boolean | Whether to show the label. Defaults to `true`. |
| `showErrorMessage`Boolean | Whether to show error messages. Defaults to `true`. |
| `visibilityOnIcon`Int | The resource ID for the visibility on icon (when CVC is visible). |
| `visibilityOffIcon`Int | The resource ID for the visibility off icon (when CVC is masked). |
| `tooltipData`TooltipData | Tooltip configuration data with card images and text. |
| `applyMask`Boolean | Whether to mask the CVC by default. Defaults to `false`. |
| `showMaskToggle`Boolean | Whether to show the mask toggle button (eye icon). Defaults to `false`. |
| `showHintIcon`Boolean | Whether to show the hint icon. Defaults to `false`. |
| `hintIcon`Int | Custom hint icon resource. Defaults to a generic CVC icon. |
| `showValidIcon`Boolean | Whether to show the validation icon when the CVC is valid. Defaults to `true`. |
| `validIcon`Int | The valid icon resource. |
| `invalidIcon`Int | The invalid icon resource. |
| `showInvalidIcon`Boolean | Whether to show the invalid icon when the CVC is invalid. Defaults to `true`. |
| `displayRequiredIcon`Boolean? | Whether to display the required icon when the field is required. |
| `guideText`String? | Helper text to display below the input field. |
| `dynamicCardImageComponent`DynamicCardImageComponent? | Component to display dynamic card images. See [Dynamic card image](/guides/checkout/components/android/card/dynamic-card-image). |


## 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,
    val onMaskingChange: ((SecurityCheckEvent) -> 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. |
| `onMaskingChange: (Boolean) -> Unit` | Event handler for when the masking state changes. |


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

## Example


```kotlin
import com.pxp.checkout.components.cardcvc.CardCvcValidations

val config = CardCvcComponentConfig(
    label = "Security Code",
    cardBrand = CardBrand.AMEX,
    applyMask = true,
    showMaskToggle = true,
    showTrailingIcon = true,
    showValidIcon = true,
    showInvalidIcon = true,
    validations = CardCvcValidations(
        required = "Security code is required",
        invalidFormat = "Please enter only numbers",
        invalidLength = "Security code is incomplete",
        exceededMaxLength = "Security code is too long"
    ),
    style = customCvcStyle
)

val cardCvcComponent = checkout.createComponent<CardCvcComponent, CardCvcComponentConfig>(
    type = ComponentType.CARD_CVC,
    config = config
)
```