Amount component

Learn how to configure the payout amount component for iOS.

Overview

The PayoutAmountComponent displays the payout amount to the user. This is a read-only display component that shows the transaction amount configured in the SDK. This component is typically used as part of the payout flow alongside the PayPalPayoutReceiverComponent and PayoutSubmissionComponent.

Basic usage

Pre-requisites

Before using the payout amount component, ensure you have:

Initialised the SDK with valid transaction data:

let checkoutConfig = CheckoutConfig(
    environment: .test,
    session: sessionData,
    transactionData: transactionData,  // Amount is taken from here
    merchantShopperId: "user-123",
    ownerId: "merchant-456"
)

let pxpCheckout = try PxpCheckout.initialize(config: checkoutConfig)

If you're using the amount component as part of a complete payout flow with returning users, you'll also need to configure paypalConfig with stored PayPal credentials. However, the amount component itself only requires valid transactionData with amount and currency.

Set a valid payout amount in transactionData:

let transactionData = TransactionData(
    amount: 100.00,  // This amount will be displayed
    currency: "USD",
    entryType: .ecom,
    intent: TransactionIntentData(card: nil, paypal: .payout),
    merchantTransactionId: "payout-\(UUID().uuidString)",
    merchantTransactionDate: { Date() }
)

Minimal configuration

At minimum, the payout amount component requires no mandatory configuration:

let config = PayoutAmountComponentConfig()
let component = try pxpCheckout.create(.payoutAmount, componentConfig: config)

With label

Add a label to provide context for the amount display:

let config = PayoutAmountComponentConfig(
    label: "Payout amount",
    accessibilityLabel: "Payout amount"
)
let component = try pxpCheckout.create(.payoutAmount, componentConfig: config)

Property	Description
`label` String?	The label text displayed above the amount field.
`accessibilityLabel` String?	The accessibility label for screen readers.

Advanced configuration

For more complex implementations, you can configure guide text and custom styling:

let config = PayoutAmountComponentConfig(
    label: "Available for Withdrawal",
    guideText: "This amount will be sent to your PayPal account",
    accessibilityLabel: "Available payout amount",
    
    // Custom container styling
    styles: FieldStyle(
        backgroundColor: Color(.systemGray6),
        borderColor: Color(.systemGray4),
        borderWidth: 1,
        cornerRadius: 8,
        padding: EdgeInsets(top: 12, leading: 16, bottom: 12, trailing: 16),
        textAlignment: .trailing
    ),
    
    // Custom input text styling
    inputStyles: FieldInputStateStyles(
        base: FieldInputStyle(
            color: Color(.label),
            fontSize: 24,
            fontWeight: .bold
        )
    ),
    
    // Custom label styling
    labelStyles: FieldLabelStateStyles(
        base: FieldLabelStyle(
            color: Color(.secondaryLabel),
            font: .system(size: 14, weight: .medium)
        )
    )
)

Property	Description
`label` String?	The label text displayed above the amount field.
`guideText` String?	The helper text displayed below the amount field.
`accessibilityLabel` String?	The accessibility label for screen readers.
`styles` FieldStyle?	Custom styling for the container and amount text alignment.
`inputStyles` FieldInputStateStyles?	Custom styling for the amount text (color, font size, and font weight). info: The current implementation has limited support for these styles.
`labelStyles` FieldLabelStateStyles?	Custom styling for the label text.

Styling

Default styling

The payout amount component renders with default styling suitable for most applications:

// Default container style
FieldStyle(
    backgroundColor: Color(red: 0.929, green: 0.933, blue: 0.937),  // rgba(237, 238, 239, 1)
    borderColor: Color(red: 0.725, green: 0.741, blue: 0.753),      // rgba(185, 189, 192, 1)
    borderWidth: 1,
    cornerRadius: 4,
    padding: EdgeInsets(top: 12, leading: 16, bottom: 12, trailing: 16),
    textAlignment: .trailing
)

// Default input text style
FieldInputStyle(
    color: Color(red: 0.035, green: 0.035, blue: 0.047),  // rgba(9, 9, 12, 1)
    fontSize: 16,
    fontWeight: .regular
)

// Default label style
FieldLabelStyle(
    color: Color.primary,
    font: .system(size: 14, weight: .bold)
)

Custom styling

You can customise the appearance to match your app's design:

let config = PayoutAmountComponentConfig(
    label: "Your payout",
    
    // Container styling
    styles: FieldStyle(
        backgroundColor: Color(red: 0.95, green: 0.98, blue: 0.95),  // Light green background
        borderColor: Color(red: 0.2, green: 0.7, blue: 0.3),         // Green border
        borderWidth: 2,
        cornerRadius: 12,
        padding: EdgeInsets(top: 16, leading: 20, bottom: 16, trailing: 20),
        textAlignment: .center,
        shadow: ShadowStyle(color: .black.opacity(0.1), radius: 4, x: 0, y: 2)
    ),
    
    // Amount text styling
    inputStyles: FieldInputStateStyles(
        base: FieldInputStyle(
            color: Color(red: 0.1, green: 0.5, blue: 0.2),  // Dark green
            fontSize: 32,
            fontWeight: .bold
        )
    ),
    
    // Label styling
    labelStyles: FieldLabelStateStyles(
        base: FieldLabelStyle(
            color: Color(red: 0.3, green: 0.6, blue: 0.4),
            font: .system(size: 12, weight: .semibold)
        )
    )
)

FieldStyle properties

Each FieldStyle object supports the following SwiftUI-based properties:

Property	Description	Example
`color` Color?	The text/foreground colour.	`.label`
`font` Font?	The SwiftUI font for the text.	`.body`
`fontWeight` Font.Weight?	The font weight.	`.semibold`, `.bold`
`fontSize` CGFloat?	The font size in points.	`16`
`labelFont` Font?	The SwiftUI font for labels.	`.caption`
`labelColor` Color?	The colour for labels.	`.secondary`
`valueFont` Font?	The SwiftUI font for values.	`.body`
`valueColor` Color?	The colour for values.	`.primary`
`backgroundColor` Color?	The background colour.	`Color(.systemGray6)`
`borderColor` Color?	The border colour.	`.gray`
`borderWidth` CGFloat?	The border width in points.	`1`
`cornerRadius` CGFloat?	The corner radius in points.	`8`
`padding` EdgeInsets?	The padding around the content.	`EdgeInsets(top: 12, leading: 16, bottom: 12, trailing: 16)`
`margin` EdgeInsets?	The margin around the component.	`EdgeInsets(top: 8, leading: 0, bottom: 8, trailing: 0)`
`textAlignment` TextAlignment?	The text alignment.	`.center`
`opacity` Double?	The opacity (0.0 - 1.0).	`1.0`
`shadow` ShadowStyle?	Shadow styling.	`ShadowStyle(color: .black.opacity(0.2), radius: 4, x: 0, y: 2)`
`icon` IconStyle?	Icon styling with size and tint colour.	`IconStyle(size: CGSize(width: 24, height: 24), tintColor: .white)`

Methods

buildContent()

Renders the amount display in SwiftUI:

struct PayoutView: View {
    @State private var amountComponent: BaseComponent?
    
    var body: some View {
        VStack {
            if let component = amountComponent {
                component.buildContent()
                    .frame(maxWidth: .infinity)
            }
        }
        .onAppear {
            createAmountComponent()
        }
    }
    
    private func createAmountComponent() {
        Task {
            let config = PayoutAmountComponentConfig(
                label: "Payout Amount"
            )
            
            let component = try pxpCheckout.create(.payoutAmount, componentConfig: config)
            
            await MainActor.run {
                self.amountComponent = component
            }
        }
    }
}

The PayoutAmountComponent is a display-only component. It doesn't emit events or have interactive callbacks. The amount displayed is determined by the transactionData.amount configured during the SDK initialisation.

Examples

Basic amount display

A simple implementation showing the payout amount:

import SwiftUI
import PXPCheckoutSDK

struct BasicAmountView: View {
    @State private var amountComponent: BaseComponent?
    
    var body: some View {
        VStack(spacing: 16) {
            Text("Withdraw Funds")
                .font(.title)
            
            if let component = amountComponent {
                component.buildContent()
                    .frame(maxWidth: .infinity)
            }
        }
        .padding()
        .onAppear {
            createComponent()
        }
    }
    
    private func createComponent() {
        Task {
            let config = PayoutAmountComponentConfig(
                label: "Available Balance",
                accessibilityLabel: "Available balance for withdrawal"
            )
            
            let component = try pxpCheckout.create(.payoutAmount, componentConfig: config)
            
            await MainActor.run {
                self.amountComponent = component
            }
        }
    }
}

Styled amount with guide text

An implementation with custom styling and helper text:

let config = PayoutAmountComponentConfig(
    label: "Earnings Ready for Payout",
    guideText: "Funds will arrive in 1-2 business days",
    accessibilityLabel: "Earnings available for payout",
    
    styles: FieldStyle(
        backgroundColor: Color(.systemBackground),
        borderColor: Color(.systemGray3),
        borderWidth: 1,
        cornerRadius: 12,
        padding: EdgeInsets(top: 20, leading: 24, bottom: 20, trailing: 24),
        textAlignment: .center
    ),
    
    inputStyles: FieldInputStateStyles(
        base: FieldInputStyle(
            color: Color(red: 0.2, green: 0.6, blue: 0.2),  // Success green
            fontSize: 36,
            fontWeight: .bold
        )
    ),
    
    labelStyles: FieldLabelStateStyles(
        base: FieldLabelStyle(
            color: Color(.secondaryLabel),
            font: .system(size: 14, weight: .medium)
        )
    )
)

Combined with other payout components

Use the amount component alongside the receiver and submission components:

struct DirectPayoutView: View {
    @State private var amountComponent: BaseComponent?
    @State private var receiverComponent: BaseComponent?
    @State private var submissionComponent: BaseComponent?
    
    var body: some View {
        VStack(spacing: 20) {
            Text("Withdraw to PayPal")
                .font(.title)
            
            // Amount display
            if let amount = amountComponent {
                amount.buildContent()
                    .frame(maxWidth: .infinity)
            }
            
            // Receiver display
            if let receiver = receiverComponent {
                receiver.buildContent()
                    .frame(maxWidth: .infinity)
            }
            
            Spacer().frame(height: 12)
            
            // Submit button
            if let submit = submissionComponent {
                submit.buildContent()
                    .frame(maxWidth: .infinity)
            }
        }
        .padding()
        .onAppear {
            createComponents()
        }
    }
    
    private func createComponents() {
        Task {
            // Create amount component
            let amountConfig = PayoutAmountComponentConfig(
                label: "Payout Amount",
                styles: FieldStyle(
                    backgroundColor: Color(.systemGray6),
                    cornerRadius: 8,
                    padding: EdgeInsets(top: 16, leading: 16, bottom: 16, trailing: 16)
                ),
                inputStyles: FieldInputStateStyles(
                    base: FieldInputStyle(
                        fontSize: 28,
                        fontWeight: .bold
                    )
                )
            )
            let amount = try pxpCheckout.create(.payoutAmount, componentConfig: amountConfig)
            
            // Create receiver component
            let receiverConfig = PayPalPayoutReceiverComponentConfig(
                label: "PayPal Account",
                applyMask: true,
                showMaskToggle: true
            )
            let receiver = try pxpCheckout.create(.paypalPayoutReceiver, componentConfig: receiverConfig)
            
            // Create submission component
            let submissionConfig = PayoutSubmissionComponentConfig(
                submitText: "Withdraw Now",
                onPostPayout: { result in
                    print("Payout completed: \(result.merchantTransactionId)")
                }
            )
            let submission = try pxpCheckout.create(.payoutSubmission, componentConfig: submissionConfig)
            
            await MainActor.run {
                self.amountComponent = amount
                self.receiverComponent = receiver
                self.submissionComponent = submission
            }
        }
    }
}