Card consent

Learn how to configure the card consent component.

Basic usage

Minimal configuration

The card consent component displays a checkbox for collecting customer consent. At minimum, you can create it with a label:

import SwiftUI
import PXPCheckoutSDK

let config = CardConsentComponentConfig(
    label: "Save this card for future payments",
    checked: false
)

let consent = try pxpCheckout.create(.cardConsent, componentConfig: config) as! CardConsentComponent

consent.buildContent()

Advanced configuration

You can customise the label styling, checkbox colors, and size:

let config = CardConsentComponentConfig(
    label: "I agree to save my card securely for faster checkout next time",
    labelStyles: CheckboxLabelStyles(
        checked: CheckboxLabelStyle(
            color: .primary,
            fontSize: 15,
            fontWeight: .semibold
        ),
        unchecked: CheckboxLabelStyle(
            color: .secondary,
            fontSize: 15,
            fontWeight: .regular
        )
    ),
    checkedColor: .accentColor,
    uncheckedColor: Color.secondary.opacity(0.5),
    size: 24,
    checked: false
)

let consent = try pxpCheckout.create(.cardConsent, componentConfig: config) as! CardConsentComponent

Property	Description
`label` String?	The text displayed beside the checkbox. Defaults to SDK localisation when `nil`.
`labelStyles` CheckboxLabelStyles?	The label styling for checked and unchecked states. Defaults to `nil`. States: `checked` (when checkbox is selected), `unchecked` (when checkbox isn't selected). Each state supports: `color`, `fontSize`, `fontWeight`.
`checkedColor` Color?	The checkbox colour when checked. Defaults to `nil`.
`uncheckedColor` Color?	The checkbox colour when unchecked. Defaults to `nil`.
`size` CGFloat?	The checkbox size in points. Defaults to `nil` (uses SDK default of 16 points when rendered).
`checked` Bool	The initial checked state. When `true`, the checkbox appears checked on first render. Defaults to `false`.

`CheckboxLabelStyle`

Property	Description
`color` Color?	The label text colour. Defaults to `nil`.
`fontSize` CGFloat?	The label font size in points. Defaults to `nil`.
`fontWeight` Font.Weight?	The label font weight. Defaults to `nil`.

Styling

You can customise the checkbox appearance by providing label styles and colors:

let config = CardConsentComponentConfig(
    label: "Save card for future use",
    labelStyles: CheckboxLabelStyles(
        checked: CheckboxLabelStyle(color: .primary, fontSize: 16, fontWeight: .semibold),
        unchecked: CheckboxLabelStyle(color: .secondary, fontSize: 16)
    ),
    checkedColor: .blue,
    uncheckedColor: .gray.opacity(0.4),
    size: 22
)

Methods

`buildContent()`

Returns SwiftUI content for the consent checkbox:

consent.buildContent()

`getValue() -> Bool`

Returns whether the checkbox is currently checked:

let isChecked = consent.getValue()

Integration

With card submit

Pass the component to the card submit configuration:

var submitConfig = CardSubmitComponentConfig()
submitConfig.cardConsentComponent = consent

With new card

The new card component can include an optional consent field. See New card for configuration details.

Examples

Save-card wording

A simple consent checkbox for saving payment methods:

CardConsentComponentConfig(
    label: "Save my card for future purchases",
    checked: false
)

Custom visual states

Configure distinct styling for checked and unchecked states:

CardConsentComponentConfig(
    label: "I authorise secure storage of my card for recurring payments",
    labelStyles: CheckboxLabelStyles(
        checked: CheckboxLabelStyle(color: .green, fontSize: 16, fontWeight: .semibold),
        unchecked: CheckboxLabelStyle(color: .secondary, fontSize: 16)
    ),
    checkedColor: .green,
    uncheckedColor: .gray.opacity(0.4),
    size: 22,
    checked: false
)

Default configuration

Use default localised label and styling:

let consent = try pxpCheckout.create(.cardConsent, componentConfig: CardConsentComponentConfig()) as! CardConsentComponent

For general event patterns, see Events. For validation of other fields, see Data validation.