Card consent

Learn about how to customise the card consent component.

Styling

val cardConsentConfig = CardConsentConfig(
    initialChecked = Boolean,
    validations = CardConsentValidations,
    style = CardConsentStyle,
    label = String,
    annotatedLabel = AnnotatedString?,
    onLinkClick = ((String) -> Unit)?,
    onToggleChanged = ((Boolean) -> Unit)?,
    onTriggerFieldValidation = ((ValidationResult) -> Unit)?
)

Property	Description
`initialChecked` Boolean	The initial checked state of the consent checkbox. Defaults to `false`.
`validations` CardConsentValidations	Validation rules for the consent component.
`style` CardConsentStyle	The visual style configuration.
`label` String	The plain text label displayed next to the checkbox.
`annotatedLabel` AnnotatedString?	A rich text label with formatting and hyperlink support.

Callbacks

data class CardConsentComponentConfig(
    val onToggleChanged: ((Boolean) -> Unit)? = null,
    val onLinkClick: ((String) -> Unit)? = null,
    val onTriggerFieldValidation`: ((ValidationResult) -> Unit)? = null
)

Callback	Description
`onToggleChanged: (Boolean) -> Unit`	Event handler for when the checkbox state changes.
`onLinkClick: (String) -> Unit`	Event handler for when links in annotated text are clicked.
`onTriggerFieldValidation: (ValidationResult) -> Unit`	Event handler for field validation.

For more information about callbacks, see Events.

Example

import androidx.compose.ui.text.AnnotatedString
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.style.TextDecoration
import androidx.compose.ui.text.withStyle
import com.pxp.checkout.components.cardconsent.CardConsentValidations

// Build rich text with links
val annotatedText = buildAnnotatedString {
    append("I agree to store my card information and accept the ")
    
    pushStringAnnotation(tag = "terms", annotation = "https://example.com/terms")
    withStyle(style = SpanStyle(textDecoration = TextDecoration.Underline)) {
        append("Terms & Conditions")
    }
    pop()
    
    append(" and ")
    
    pushStringAnnotation(tag = "privacy", annotation = "https://example.com/privacy")
    withStyle(style = SpanStyle(textDecoration = TextDecoration.Underline)) {
        append("Privacy Policy")
    }
    pop()
}

val config = CardConsentConfig(
    annotatedLabel = annotatedText,
    initialChecked = false,
    isRequired = true,
    validations = CardConsentValidations(
        required = "You must accept the terms to proceed"
    ),
    onLinkClick = { url ->
        // Handle link clicks
        when (url) {
            "https://example.com/terms" -> openTermsAndConditions()
            "https://example.com/privacy" -> openPrivacyPolicy()
        }
    },
    onToggleChanged = { isChecked ->
        println("Consent state changed: $isChecked")
    }
)

val cardConsentComponent = checkout.createComponent<CardConsentComponent, CardConsentConfig>(
    type = ComponentType.CARD_CONSENT,
    config = config
)

Card consent

Styling

Callbacks

Example

Was this helpful?