Consent component

Learn about how to configure the PayPal consent checkbox component.

Basic usage

Minimal configuration

At minimum, the PayPal consent component requires the following configuration to function:

val consentConfig = PayPalConsentConfig(
    label = "Save my PayPal account for faster checkout"
)

Property	Description
`label` String required	The plain text label displayed next to the checkbox. This describes what the user is consenting to.

Advanced configuration

For more complex implementations, you can configure additional settings:

val consentConfig = PayPalConsentConfig(
    // Required configuration
    label = "Save my PayPal account for faster checkout",
    
    // Rich text support
    annotatedLabel = buildAnnotatedString {
        append("I agree to save my PayPal account. ")
        pushStringAnnotation(tag = "terms", annotation = "https://example.com/terms")
        withStyle(style = SpanStyle(color = Color.Blue, textDecoration = TextDecoration.Underline)) {
            append("Terms and conditions")
        }
        pop()
    },
    
    // Initial state
    initialChecked = false,
    
    // Validation
    isRequired = true
)

Property	Description
`annotatedLabel` AnnotatedString?	The rich text label with formatting and hyperlink support. If provided, this overrides the plain `label`. Defaults to `null`.
`initialChecked` Boolean	The initial checkbox state. Defaults to `false`.
`isRequired` Boolean	Whether the consent is required for payment. When `true`, validation will ensure the checkbox is checked. Defaults to `false`.

The PayPal consent component uses CardConsentStyle, giving you fine-grained control over colours, typography, spacing, and checkbox dimensions.

Styling

Default styling

The PayPal consent component renders with these default styles:

paypalStyle = CardConsentStyle(
    colors = CardConsentStyle.ColorStyles(
        checkedColor = Color(0xFF0070BA),  // PayPal blue
        uncheckedColor = Color(0xFF9E9E9E),
        checkmarkColor = Color.White
    ),
    textStyles = CardConsentStyle.TextStyles(
        textStyle = TextStyle(fontSize = 14.sp)
    ),
    spacing = CardConsentStyle.SpacingStyles(
        horizontalSpacing = 12f
    ),
    dimensions = CardConsentStyle.DimensionStyles(
        checkboxSize = 20f
    )
)

Custom styling

You can override the default appearance by providing custom styles for any part of the component:

val consentConfig = PayPalConsentConfig(
    label = "Save my PayPal account for faster checkout",
    paypalStyle = CardConsentStyle.createDefault().apply {
        // Colour customisation
        colors = CardConsentStyle.ColorStyles(
            backgroundColor = Color.White,
            textColor = Color(0xFF2C2E2F),
            checkedColor = Color(0xFF0070BA),
            uncheckedColor = Color(0xFF9E9E9E),
            checkmarkColor = Color.White,
            disabledColor = Color(0xFFCCCCCC),
            errorColor = Color(0xFFDC3545),
            linkColor = Color(0xFF0070BA)
        )
        
        // Text style customisation
        textStyles = CardConsentStyle.TextStyles(
            textStyle = TextStyle(
                fontSize = 14.sp,
                fontWeight = FontWeight.Normal
            ),
            linkTextStyle = TextStyle(
                fontSize = 14.sp,
                fontWeight = FontWeight.Medium,
                textDecoration = TextDecoration.Underline
            ),
            errorStyle = TextStyle(
                fontSize = 12.sp,
                color = Color(0xFFDC3545)
            ),
            checkedLabelStyle = TextStyle(
                fontSize = 14.sp,
                fontWeight = FontWeight.Medium,
                color = Color(0xFF2C2E2F)
            ),
            uncheckedLabelStyle = TextStyle(
                fontSize = 14.sp,
                fontWeight = FontWeight.Normal,
                color = Color(0xFF6C757D)
            )
        )
        
        // Spacing customisation
    spacing = CardConsentStyle.SpacingStyles(
            horizontalSpacing = 12f,
            verticalSpacing = 8f,
            errorTextPaddingStart = 32f,
            errorTextPaddingTop = 4f
        )
        
        // Dimension customisation
    dimensions = CardConsentStyle.DimensionStyles(
            checkboxSize = 22f
        )
    }
)

Property	Description
`paypalStyle` CardConsentStyle	Custom styling configuration for the PayPal consent component. Defaults to `CardConsentStyle.createDefault()`.
`paypalStyle.colors` ColorStyles	Colour-related style configuration.
`paypalStyle.colors.backgroundColor` Color	The background colour of the consent component. Defaults to transparent.
`paypalStyle.colors.textColor` Color	The text colour for the label. Defaults to `Color.Black`.
`paypalStyle.colors.checkedColor` Color	The checkbox colour when checked. Defaults to PayPal blue (`0xFF0070BA`).
`paypalStyle.colors.uncheckedColor` Color	The checkbox border colour when unchecked. Defaults to grey (`0xFF9E9E9E`).
`paypalStyle.colors.checkmarkColor` Color	The colour of the checkmark inside checkbox. Defaults to `Color.White`.
`paypalStyle.colors.disabledColor` Color	The checkbox colour when disabled. Defaults to light grey.
`paypalStyle.colors.errorColor` Color	The colour for error messages. Defaults to red (`0xFFDC3545`).
`paypalStyle.colors.linkColor` Color	The colour for links in the label text. Defaults to PayPal blue.
`paypalStyle.textStyles` TextStyles	Text-related style configuration.
`paypalStyle.textStyles.textStyle` TextStyle	The main text style for the label. Defaults to 14sp normal weight.
`paypalStyle.textStyles.linkTextStyle` TextStyle	The style for clickable links. Defaults to underlined text.
`paypalStyle.textStyles.errorStyle` TextStyle	The text style for error messages. Defaults to 12sp red text.
`paypalStyle.textStyles.checkedLabelStyle` TextStyle	The label style when checked. Defaults to medium weight.
`paypalStyle.textStyles.uncheckedLabelStyle` TextStyle	The label style when unchecked. Defaults to normal weight.
`paypalStyle.spacing` SpacingStyles	Spacing-related style configuration.
`paypalStyle.spacing.horizontalSpacing` Float	The horizontal spacing between the checkbox and the label, in pixels. Defaults to `12f`.
`paypalStyle.spacing.verticalSpacing` Float	The vertical spacing between elements, in pixels. Defaults to `8f`.
`paypalStyle.spacing.errorTextPaddingStart` Float	The left padding for the error text, in pixels. Defaults to `32f`.
`paypalStyle.spacing.errorTextPaddingTop` Float	The top padding for the error text, in pixels. Defaults to `4f`.
`paypalStyle.dimensions` DimensionStyles	Dimension-related style configuration.
`paypalStyle.dimensions.checkboxSize` Float	The size of the checkbox in pixels. Defaults to `20f`.

Event handling

The PayPal consent component provides event handlers for user interactions:

val consentConfig = PayPalConsentConfig(
    onToggleChanged = { isChecked: Boolean -> },
    onLinkClick = { url: String -> },
    onTriggerFieldValidation = { result: ValidationResult -> }
)

Callback	Description
`onToggleChanged: ((Boolean) -> Unit)?`	Event handler for when the consent checkbox's state changes. The boolean parameter indicates the new checked state.
`onLinkClick: ((String) -> Unit)?`	Event handler for when links in the consent text are clicked (e.g., terms and conditions). The string parameter contains the URL annotation.
`onTriggerFieldValidation: ((ValidationResult) -> Unit)?`	Event handler for when validation events occur. The `ValidationResult` parameter contains validation status and messages.

For detailed information about event data structures and usage patterns, see Events.

Methods

The PayPal consent component provides methods for state management.

Content()

Renders the consent checkbox in Jetpack Compose:

@Composable
fun ConsentSection() {
    val consentComponent = remember {
        pxpCheckout.createComponent(
            type = ComponentType.PAYPAL_CONSENT,
            config = consentConfig
        )
    }
    
    pxpCheckout.buildComponentView(
        component = consentComponent,
        modifier = Modifier.fillMaxWidth()
    )
}

getValue()

Retrieves the current checkbox state:

val isConsentGiven = consentComponent.getValue() as? Boolean ?: false

Examples

A straightforward implementation with essential configuration:

val consentConfig = PayPalConsentConfig(
    label = "Save my PayPal account for faster checkout",
    initialChecked = false,
    isRequired = true,
    
    onToggleChanged = { isChecked ->
        Log.d("Consent", "User consent: $isChecked")
        if (isChecked) {
            // Enable one-click payment features
            enableOneClickPayment()
        }
    }
)

Implementation with rich text and clickable links:

val consentConfig = PayPalConsentConfig(
    label = "Save my PayPal account",
    annotatedLabel = buildAnnotatedString {
        append("I agree to save my PayPal account. ")
        pushStringAnnotation(tag = "terms", annotation = "https://example.com/terms")
        withStyle(
            style = SpanStyle(
                color = Color(0xFF0070BA),
                textDecoration = TextDecoration.Underline
            )
        ) {
            append("Terms and conditions")
        }
        pop()
        append(" apply.")
    },
    initialChecked = false,
    isRequired = true,
    
    onToggleChanged = { isChecked ->
        Log.d("Consent", "Consent status: $isChecked")
        updateConsentPreference(isChecked)
    },
    
    onLinkClick = { url ->
        Log.d("Consent", "Opening link: $url")
        openExternalBrowser(url)
    }
)

A comprehensive implementation with full customisation:

val consentConfig = PayPalConsentConfig(
    label = "Save my PayPal account for faster checkout",
    annotatedLabel = buildAnnotatedString {
        append("I agree to save my PayPal account. By checking this box, I accept the ")
        pushStringAnnotation(tag = "terms", annotation = "https://example.com/terms")
        withStyle(
            style = SpanStyle(
                color = Color(0xFF0070BA),
                textDecoration = TextDecoration.Underline,
                fontWeight = FontWeight.Medium
            )
        ) {
            append("Terms of Service")
        }
        pop()
        append(" and ")
        pushStringAnnotation(tag = "privacy", annotation = "https://example.com/privacy")
        withStyle(
            style = SpanStyle(
                color = Color(0xFF0070BA),
                textDecoration = TextDecoration.Underline,
                fontWeight = FontWeight.Medium
            )
        ) {
            append("Privacy Policy")
        }
        pop()
        append(".")
    },
    initialChecked = false,
    isRequired = true,
    
    paypalStyle = CardConsentStyle.createDefault().apply {
        colors = CardConsentStyle.ColorStyles(
            backgroundColor = Color(0xFFF8F9FA),
            textColor = Color(0xFF212529),
            checkedColor = Color(0xFF0070BA),
            uncheckedColor = Color(0xFF6C757D),
            checkmarkColor = Color.White,
            errorColor = Color(0xFFDC3545),
            linkColor = Color(0xFF0070BA)
        )
        
        textStyles = CardConsentStyle.TextStyles(
            textStyle = TextStyle(
                fontSize = 14.sp,
                fontWeight = FontWeight.Normal,
                lineHeight = 20.sp
            ),
            linkTextStyle = TextStyle(
                fontSize = 14.sp,
                fontWeight = FontWeight.Medium,
                textDecoration = TextDecoration.Underline
            ),
            checkedLabelStyle = TextStyle(
                fontSize = 14.sp,
                fontWeight = FontWeight.SemiBold,
                color = Color(0xFF212529)
            ),
            uncheckedLabelStyle = TextStyle(
                fontSize = 14.sp,
                fontWeight = FontWeight.Normal,
                color = Color(0xFF6C757D)
            ),
            errorStyle = TextStyle(
                fontSize = 12.sp,
                fontWeight = FontWeight.Normal,
                color = Color(0xFFDC3545)
            )
        )
        
        spacing = CardConsentStyle.SpacingStyles(
            horizontalSpacing = 16f,
            verticalSpacing = 12f,
            errorTextPaddingStart = 40f,
            errorTextPaddingTop = 8f
        )
        
        dimensions = CardConsentStyle.DimensionStyles(
            checkboxSize = 24f
        )
    },
    
    onToggleChanged = { isChecked ->
        Log.d("Consent", "User consent changed: $isChecked")
        
        // Track analytics
        trackAnalyticsEvent("consent_changed", mapOf(
            "consented" to isChecked,
            "timestamp" to System.currentTimeMillis()
        ))
        
        // Update user preferences
        updateConsentPreference(isChecked)
        
        // Enable/disable features based on consent
        if (isChecked) {
            enableVaultingFeatures()
        } else {
            disableVaultingFeatures()
        }
    },
    
    onLinkClick = { url ->
        Log.d("Consent", "Legal document requested: $url")
        
        // Track which document was clicked
        val documentType = when {
            url.contains("terms") -> "terms_of_service"
            url.contains("privacy") -> "privacy_policy"
            else -> "unknown"
        }
        
        trackAnalyticsEvent("legal_document_clicked", mapOf(
            "document_type" to documentType,
            "url" to url
        ))
        
        // Open in custom tab or external browser
        openLegalDocument(url)
    },
    
    onTriggerFieldValidation = { result ->
        if (!result.isValid) {
            Log.w("Consent", "Validation failed: ${result.message}")
            showValidationError("Please agree to the terms to continue")
        }
    }
)

Linked with PayPal component

Example showing how to link consent with PayPal component:

// Create consent component first
val consentComponent = pxpCheckout.createComponent(
    type = ComponentType.PAYPAL_CONSENT,
    config = PayPalConsentConfig(
        label = "Save my PayPal account for faster checkout",
        initialChecked = false
    )
)

// Link to PayPal component
val paypalConfig = PayPalComponentConfig(
    renderType = "standalone",
    fundingSources = "paypal",
    enableOneClickPayment = true,
    consentComponent = consentComponent,
    onGetConsent = {
        consentComponent.getValue() as? Boolean ?: false
    }
)