Card expiry date

Learn about customisation options for the card expiry date component.

Styling

val cardExpiryDateComponentConfig = CardExpiryDateComponentConfig(
    label = String,
    validations = CardExpiryDateValidations,
    style = CardExpiryDateStyle?,
    formatOptions = ExpiryDateFormat,
    numberOfMonthExpired = Int?,
    showTrailingIcon = Boolean,
    showTooltip = Boolean,
    showHintIcon = Boolean,
    hintIcon = Int,
    showValidIcon = Boolean,
    validIcon = Int,
    invalidIcon = Int,
    showInvalidIcon = Boolean,
    tooltipData = TooltipData,
    dynamicCardImageComponent = DynamicCardImageComponent?,
    displayRequiredIcon = Boolean?,
    placeholder = String,
    isRequired = Boolean
)

Property	Description
`label` String	The input label's text. Defaults to `"Expiry Date".
`placeholder` String	The placeholder text showing the expected format (e.g., `MM/YY`).
`formatOptions` ExpiryDateFormat	The date format pattern. Defaults to `SHORT_SLASH`.
`numberOfMonthExpired` Int?	The grace period for expired cards, in months.
`isRequired` Boolean	Whether the expiry date field is required for submission. Defaults to `true`. Can't be overriden.
`showTrailingIcon` Boolean	Whether to show a calendar icon. Defaults to `true`.
`showValidIcon` Boolean	Whether to show a checkmark when valid. Defaults to `true`.
`showInvalidIcon` Boolean	Whether to show an error icon when invalid. Defaults to `true`.
`validIcon` Int	The valid state icon resource.
`invalidIcon` Int	The invalid state icon resource.
`hintIcon` Int	The hint icon resource.
`showHintIcon` Boolean	Whether to display a hint icon. Defaults to `false`.
`style` CardExpiryDateStyle?	Custom styling configuration.
`validations` CardExpiryDateValidations	Custom validation messages.

Callbacks

data class CardExpiryDateComponentConfig(
    val onChange: ((ExpiryDateInputEvent) -> Unit)? = null,
    val onFocus: ((ExpiryDateFocusEvent) -> Unit)? = null,
    val onBlur: ((ExpiryDateFocusEvent) -> Unit)? = null,
    val onValidationPassed: ((List<ValidationResult>) -> Unit)? = null,
    val onValidationFailed: ((List<ValidationResult>) -> Unit)? = null,
    val onMonthChanged: ((Int) -> Unit)? = null,
    val onYearChanged: ((Int) -> Unit)? = null,
    val onFormatChange: ((ExpiryFormatEvent) -> Unit)? = null
)

Callback	Description
`onChange: (ExpiryDateInputEvent) -> Unit`	Event handler for when the expiry date value changes.
`onFocus: (ExpiryDateFocusEvent) -> Unit`	Event handler for when the input receives focus.
`onBlur: (ExpiryDateFocusEvent) -> Unit`	Event handler for when the input loses focus.
`onValidationPassed: (List<ValidationResult>) -> Unit`	Event handler for when the validation passes.
`onValidationFailed: (List<ValidationResult>) -> Unit`	Event handler for when the validation fails.
`onMonthChanged: (Int) -> Unit`	Event handler for when a month's value changes
`onYearChanged: (Int) -> Unit`	Event handler for when a year's value changes.
`onFormatChange: (ExpiryFormatEvent) -> Unit`	Event handler for when the date format changes.

For more information about callbacks, see Events.

Example

import com.pxp.checkout.components.cardexpirydate.CardExpiryDateValidations

val config = CardExpiryDateComponentConfig(
    label = "Card Expiry Date",
    formatOptions = ExpiryDateFormat.LONG_SLASH,
    numberOfMonthExpired = 6, // 6-month grace period
    showTrailingIcon = true,
    showValidIcon = true,
    showInvalidIcon = true,
    validations = CardExpiryDateValidations(
        required = "Expiry date is required",
        invalidFormat = "Please enter numbers only",
        invalidMonth = "Month must be between 01-12",
        invalidFormatPattern = "Please use MM/YYYY format",
        expired = "Card has expired, please use a valid card"
    ),
    style = customExpiryDateStyle
)

val cardExpiryDateComponent = checkout.createComponent<CardExpiryDateComponent, CardExpiryDateComponentConfig>(
    type = ComponentType.CARD_EXPIRY_DATE,
    config = config
)

Card expiry date

Styling

Callbacks

Example

Was this helpful?