Click-once

Learn about customisation options for the click-once component.

Styling

val clickOnceComponentConfig = ClickOnceComponentConfig(
    headerTitle = String,
    submitText = String?,
    submitProcessingText = String?,
    selectCardText = String,
    expiredText = String?,
    validThruText = String?,
    hideCardBrandLogo = Boolean,
    disableCardSelection = Boolean,
    isRenderLastPurchaseCard = Boolean,
    isRenderLastPayoutCard = Boolean,
    isCvcRequired = Boolean,
    useTransparentCardBrandImage = Boolean,
    isProcessNextStepOnCardClick = Boolean,
    cvcComponentConfig = CardCvcComponentConfig?,
    cardSubmitComponentConfig = CardSubmitComponentConfig?,
    notificationConfig = NotificationConfig,
    cardBrandImages = CardBrandImages?,
    filterBy = CardTokenFilter,
    orderBy = CardTokenOrder,
    limitTokens = Int?,
    style = ClickOnceStyle
)

Property	Description
`headerTitle` String	Title text displayed at the top of the component. Defaults to default header title.
`submitText` String?	Text displayed on the submit button.
`submitProcessingText` String?	Text displayed during processing/loading state. Defaults to default processing text.
`selectCardText` String	Text for card selection prompt. Defaults to "Select Card".
`expiredText` String?	Text displayed for expired cards.
`validThruText` String?	Text displayed before expiry date (e.g., "Valid Thru"). Defaults to "Valid Thru".
`hideCardBrandLogo` Boolean	Whether to hide the card brand logo/icon. Defaults to `false`.
`disableCardSelection` Boolean	Whether to disable card selection functionality. Defaults to `false`.
`isRenderLastPurchaseCard` Boolean	Whether to render cards used for last purchase. Defaults to `true`.
`isRenderLastPayoutCard` Boolean	Whether to render cards used for last payout. Defaults to `true`.
`isCvcRequired` Boolean	Whether CVC input is required for card selection. Defaults to `true`.
`useTransparentCardBrandImage` Boolean	Whether to use transparent background for card brand images. Defaults to `true`.
`isProcessNextStepOnCardClick` Boolean	Whether to automatically process next step when card is clicked. Defaults to `true`.
`cvcComponentConfig` CardCvcComponentConfig?	Configuration for the CVC input component.
`cardSubmitComponentConfig` CardSubmitComponentConfig?	Configuration for the card submit component.
`notificationConfig` NotificationConfig	Configuration for notifications display. Defaults to default configuration.
`cardBrandImages` CardBrandImages?	Custom card brand images configuration.
`filterBy` CardTokenFilter	Filter criteria for card tokens. Defaults to default filter.
`orderBy` CardTokenOrder	Sorting/ordering criteria for card tokens. Defaults to default order.
`limitTokens` Int?	Maximum number of tokens to display (null = no limit).
`style` ClickOnceStyle	Visual styling configuration for the component. Defaults to default style.
`onOnceCardClick` (() -> Unit)?	Callback triggered when a card is clicked.
`onPreRenderTokens` ((List<CardToken>) -> List<CardTokenMapping>)?	Callback for custom token processing before rendering.

Callbacks

data class ClickOnceComponentConfig(
    val onValidationPassed: ((List<ValidationResult>) -> Unit)? = null,
    val onValidationFailed: ((List<ValidationResult>) -> Unit)? = null,
    val onTriggerFieldValidation: ((ValidationResult) -> Unit)? = null,
    val onOnceCardClick: (() -> Unit)? = null,
    val onPreRenderTokens: ((List<CardToken>) -> List<CardTokenMapping>)? = null
)

Callback	Description
`onValidationPassed: ((List<ValidationResult>) -> Unit)?`	Event handler for when validation passes. Inherited from ComponentConfigImpl.
`onValidationFailed: ((List<ValidationResult>) -> Unit)?`	Event handler for when validation fails. Inherited from ComponentConfigImpl.
`onTriggerFieldValidation: ((ValidationResult) -> Unit)?`	Event handler for when field validation is triggered individually. Inherited from ComponentConfigImpl.
`onOnceCardClick: (() -> Unit)?`	Event handler triggered when a card is clicked.
`onPreRenderTokens: ((List<CardToken>) -> List<CardTokenMapping>)?`	Event handler for custom token processing before rendering.

For more information about callbacks, see Events.

When using click-once with card submit, you can leverage the onCustomValidation callback via cardSubmitComponentConfig to implement custom business rule validation before payment submission. See Card submit for details.

Example

import com.pxp.checkout.components.clickonce.ClickOnceComponent
import com.pxp.checkout.components.clickonce.ClickOnceComponentConfig
import com.pxp.checkout.components.cardcvc.CardCvcComponentConfig
import com.pxp.checkout.components.cardsubmit.CardSubmitComponentConfig
import com.pxp.checkout.models.CardTokenFilter
import com.pxp.checkout.models.CardTokenOrder
import com.pxp.checkout.styles.ClickOnceStyle

// Optional: Create custom CVC configuration
val cvcConfig = CardCvcComponentConfig(
    label = "CVC",
    placeholder = "123",
    showMaskToggle = true
)

// Optional: Create custom submit configuration
val submitConfig = CardSubmitComponentConfig(
    buttonText = "Pay Now",
    loadingText = "Processing..."
)

// Optional: Create custom filtering and ordering
val tokenFilter = CardTokenFilter(
    excludeExpired = true,
    includeBrands = listOf(CardBrand.VISA, CardBrand.MASTERCARD)
)

val tokenOrder = CardTokenOrder(
    sortByLastUsed = true,
    sortByExpiryDate = false
)

// Optional: Create custom styling
val customStyle = ClickOnceStyle(
    colors = ClickOnceColors(
        primaryColor = Color.Blue,
        surfaceColor = Color.White,
        onSurfaceColor = Color.Black
    ),
    textStyles = ClickOnceTextStyles(
        cardNumberStyle = TextStyle(
            fontSize = 16.sp,
            fontWeight = FontWeight.SemiBold
        )
    )
)

val config = ClickOnceComponentConfig(
    // Display text configuration
    headerTitle = "Select Payment Method",
    submitText = "Pay Now",
    submitProcessingText = "Processing Payment...",
    selectCardText = "Choose your card",
    validThruText = "Valid Thru",
    
    // Behaviour configuration
    hideCardBrandLogo = false,
    disableCardSelection = false,
    isRenderLastPurchaseCard = true,
    isRenderLastPayoutCard = true,
    isCvcRequired = true,
    useTransparentCardBrandImage = true,
    isProcessNextStepOnCardClick = true,
    
    // Component integrations
    cvcComponentConfig = cvcConfig,
    cardSubmitComponentConfig = submitConfig,
    
    // Data management
    filterBy = tokenFilter,
    orderBy = tokenOrder,
    limitTokens = 5,
    
    // Styling
    style = customStyle,
    
    // Event handlers
    onOnceCardClick = {
        println("Card clicked for quick payment")
    },
    onPreRenderTokens = { tokens ->
        // Custom processing of tokens before display
        tokens.map { token ->
            CardTokenMapping(
                token = token,
                displayLabel = "•••• ${token.lastFourDigits}"
            )
        }
    }
)

val clickOnceComponent = checkout.createComponent<ClickOnceComponent, ClickOnceComponentConfig>(
    type = ComponentType.CLICK_ONCE,
    config = config
)

Click-once

Styling

Callbacks

Example

Was this helpful?