Card CVC

Learn about customisation options for the card CVC component.

Styling

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.

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,
    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.

Example

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
)

Card CVC

Styling

Callbacks

Example

Was this helpful?