Consent component

Learn about how to configure the PayPal consent checkbox component for iOS.

Basic usage

Minimal configuration

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

let consentConfig = PayPalConsentComponentConfig(
    label: "Save my PayPal account for faster checkout"
)

Property	Description
`label` String?	The text label displayed next to the checkbox. This describes what the user is consenting to. Defaults to a standard consent message if not provided.

Advanced configuration

For more complex implementations, you can configure additional settings:

let consentConfig = PayPalConsentComponentConfig(
    label: "Save my PayPal account for faster checkout",
    labelStyles: CheckboxLabelStyles(
        checked: CheckboxLabelStyle(
            font: .system(size: 14),
            fontWeight: .semibold,
            color: .primary
        ),
        unchecked: CheckboxLabelStyle(
            font: .system(size: 14),
            fontWeight: .regular,
            color: .secondary
        )
    ),
    checkedColor: Color(red: 0, green: 0.44, blue: 0.73), // PayPal blue
    uncheckedColor: .gray,
    size: 24,
    checked: false
)

Property	Description
`labelStyles` CheckboxLabelStyles?	Custom styles for the label in different states. Defaults to `nil`.
`labelStyles.checked` CheckboxLabelStyle?	Style to apply when the checkbox is checked.
`labelStyles.unchecked` CheckboxLabelStyle?	Style to apply when the checkbox is unchecked.
`checkedColor` Color?	The colour of the checkbox when checked. Defaults to PayPal blue.
`uncheckedColor` Color?	The colour of the checkbox border when unchecked. Defaults to gray.
`size` CGFloat?	The size of the checkbox icon in points. Defaults to `16`.
`checked` Bool	The initial checkbox state. Defaults to `false`.

The PayPal consent component is a specialised checkbox component built using SwiftUI, providing a native iOS experience with customisable styling.

Styling

Default styling

The PayPal consent component renders with these default styles:

checkedColor = Color(red: 0, green: 0.44, blue: 0.73) // PayPal blue
uncheckedColor = .gray
size = 16.0

Custom styling

You can override the default appearance by providing custom styles:

let consentConfig = PayPalConsentComponentConfig(
    label: "Save my PayPal account for faster checkout",
    
    // Label styling for different states
    labelStyles: CheckboxLabelStyles(
        checked: CheckboxLabelStyle(
            font: .system(size: 14),
            fontWeight: .semibold,
            color: .primary
        ),
        unchecked: CheckboxLabelStyle(
            font: .system(size: 14),
            fontWeight: .regular,
            color: .secondary
        )
    ),
    
    // Checkbox colours
    checkedColor: Color(red: 0, green: 0.44, blue: 0.73),
    uncheckedColor: Color(red: 0.6, green: 0.6, blue: 0.6),
    
    // Checkbox size
    size: 24
)

Property	Description
`labelStyles` CheckboxLabelStyles	Custom styles for the label in different states.
`labelStyles.checked` CheckboxLabelStyle	Style configuration for the label when checked.
`labelStyles.checked.font` Font	The font to use for the label when checked.
`labelStyles.checked.fontWeight` Font.Weight?	The font weight for the label when checked.
`labelStyles.checked.color` Color	The text colour for the label when checked.
`labelStyles.unchecked` CheckboxLabelStyle	Style configuration for the label when unchecked.
`labelStyles.unchecked.font` Font	The font to use for the label when unchecked.
`labelStyles.unchecked.fontWeight` Font.Weight?	The font weight for the label when unchecked.
`labelStyles.unchecked.color` Color	The text colour for the label when unchecked.
`checkedColor` Color	The colour of the checkbox icon when checked. Defaults to PayPal blue.
`uncheckedColor` Color	The border colour of the checkbox when unchecked. Defaults to gray.
`size` CGFloat	The size of the checkbox in points. Defaults to `16.0`.

Methods

The PayPal consent component provides methods for state management.

buildContent()

Renders the consent checkbox in SwiftUI:

struct ConsentView: View {
    @State private var consentComponent: BaseComponent?
    
    var body: some View {
        VStack {
            if let component = consentComponent {
                component.buildContent()
            }
        }
        .onAppear {
            createConsentComponent()
        }
    }
}

getValue()

Retrieves the current checkbox state:

let isConsentGiven = consentComponent?.getValue() as? Bool ?? false

Note: The hasConsented() method exists internally but is not publicly accessible. Use getValue() instead, which returns a Bool indicating the checkbox state.

Note: The setConsent(_:) method is internal and not publicly accessible. The consent state can only be changed through user interaction with the checkbox.

Examples

A straightforward implementation with essential configuration:

let consentConfig = PayPalConsentComponentConfig(
    label: "Save my PayPal account for faster checkout",
    checked: false
)

let consentComponent = try pxpCheckout.create(
    .paypalConsent,
    componentConfig: consentConfig
)

Linked with PayPal button

Example showing how to link consent with PayPal button component:

// Create consent component first
let consentConfig = PayPalConsentComponentConfig(
    label: "Save my PayPal account for faster checkout",
    checked: false
)
let consentComponent = try pxpCheckout.create(
    .paypalConsent,
    componentConfig: consentConfig
)

// Link to PayPal button component
let paypalConfig = PayPalButtonComponentConfig()
paypalConfig.fundingSource = .paypal
paypalConfig.paypalConsentComponent = consentComponent as? PayPalConsentComponent

// Alternative: Use onGetConsent callback
paypalConfig.onGetConsent = {
    // Check consent status
    let consentGiven = consentComponent.getValue() as? Bool ?? false
    return consentGiven
}

let paypalComponent = try pxpCheckout.create(
    .paypalButton,
    componentConfig: paypalConfig
)

// Compose in SwiftUI
VStack(spacing: 16) {
    // Consent checkbox
    consentComponent.buildContent()
        .padding(.horizontal)
    
    // PayPal button
    paypalComponent.buildContent()
        .frame(height: 50)
        .padding(.horizontal)
}

Complete SwiftUI implementation

Example showing a complete view with consent and PayPal button:

import SwiftUI
import PXPCheckoutSDK

struct PayPalWithConsentView: View {
    @State private var pxpCheckout: PxpCheckout?
    @State private var paypalComponent: BaseComponent?
    @State private var consentComponent: BaseComponent?
    @State private var isLoading = true
    @State private var errorMessage: String?
    
    var body: some View {
        VStack(spacing: 20) {
            if isLoading {
                ProgressView("Initialising...")
            } else if let consent = consentComponent, let paypal = paypalComponent {
                VStack(alignment: .leading, spacing: 16) {
                    // Consent section
                    VStack(alignment: .leading, spacing: 8) {
                        Text("Payment Consent")
                            .font(.headline)
                        
                        consent.buildContent()
                            .frame(maxWidth: .infinity, alignment: .leading)
                    }
                    .padding()
                    .background(Color.gray.opacity(0.1))
                    .cornerRadius(8)
                    
                    // PayPal button
                    paypal.buildContent()
                        .frame(height: 50)
                }
                .padding()
            } else if let error = errorMessage {
                Text("Error: \(error)")
                    .foregroundColor(.red)
                    .padding()
            }
        }
        .onAppear {
            createComponents()
        }
    }
    
    private func createComponents() {
        Task {
            do {
                // Initialise SDK
                let sessionData = SessionData(
                    sessionId: "your-session-id",
                    hmacKey: "your-hmac-key",
                    encryptionKey: "your-encryption-key"
                )
                
                let transactionData = TransactionData(
                    amount: 25.00,
                    currency: "USD",
                    entryType: .ecom,
                    intent: TransactionIntentData(card: nil, paypal: .authorisation),
                    merchantTransactionId: "tx-\(UUID().uuidString)",
                    merchantTransactionDate: { Date() }
                )
                
                let checkoutConfig = CheckoutConfig(
                    environment: .test,
                    session: sessionData,
                    transactionData: transactionData,
                    merchantShopperId: "shopper-123",
                    ownerId: "owner-456"
                )
                
                let pxpCheckout = try PxpCheckout.initialize(config: checkoutConfig)
                self.pxpCheckout = pxpCheckout
                
                // Create consent component
                let consentConfig = PayPalConsentComponentConfig(
                    label: "I agree to save my PayPal account for future transactions",
                    labelStyles: CheckboxLabelStyles(
                        checked: CheckboxLabelStyle(
                            font: .system(size: 14),
                            fontWeight: .semibold,
                            color: .primary
                        ),
                        unchecked: CheckboxLabelStyle(
                            font: .system(size: 14),
                            fontWeight: .regular,
                            color: .secondary
                        )
                    ),
                    checkedColor: Color(red: 0, green: 0.44, blue: 0.73),
                    uncheckedColor: .gray,
                    size: 22,
                    checked: false
                )
                
                let consentComponent = try pxpCheckout.create(
                    .paypalConsent,
                    componentConfig: consentConfig
                )
                
                // Create PayPal button with consent
                let paypalConfig = PayPalButtonComponentConfig()
                paypalConfig.fundingSource = .paypal
                paypalConfig.paypalConsentComponent = consentComponent as? PayPalConsentComponent
                
                paypalConfig.onApprove = { approvalData in
                    let consentGiven = consentComponent.getValue() as? Bool ?? false
                    print("Payment approved. Consent given: \(consentGiven)")
                    
                    if consentGiven {
                        // Save vaulting preference
                        UserDefaults.standard.set(true, forKey: "paypal_vaulted")
                    }
                }
                
                let paypalComponent = try pxpCheckout.create(
                    .paypalButton,
                    componentConfig: paypalConfig
                )
                
                await MainActor.run {
                    self.consentComponent = consentComponent
                    self.paypalComponent = paypalComponent
                    self.isLoading = false
                }
            } catch {
                await MainActor.run {
                    if let sdkError = error as? BaseSdkException {
                        self.errorMessage = sdkError.errorMessage
                    } else {
                        self.errorMessage = error.localizedDescription
                    }
                    self.isLoading = false
                }
            }
        }
    }
}