# Card consent

Learn about how to customise the card consent component.

## Styling


```kotlin
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


```kotlin
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](/guides/checkout/components/android/card/events).

## Example


```kotlin
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
)
```