{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["sub-heading","admonition","br","details"]},"type":"markdown"},"seo":{"title":"Amount component","description":"Transform your commerce with PXP's unified platform—seamless payments, real-time insights, and global growth in one powerful integration.","lang":"en-UK","siteUrl":"https://developer.pxp.io","llmstxt":{"hide":false,"sections":[{"title":"Table of contents","includeFiles":["**/*"],"excludeFiles":[]}],"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"amount-component","__idx":0},"children":["Amount component"]},{"$$mdtype":"Tag","name":"SubHeading","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Learn how to configure the payout amount component for iOS."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"overview","__idx":1},"children":["Overview"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["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 ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PayPalPayoutReceiverComponent"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PayoutSubmissionComponent"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"basic-usage","__idx":2},"children":["Basic usage"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"pre-requisites","__idx":3},"children":["Pre-requisites"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Before using the payout amount component, ensure you have:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Initialised the SDK with valid transaction data:"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"let checkoutConfig = CheckoutConfig(\n    environment: .test,\n    session: sessionData,\n    transactionData: transactionData,  // Amount is taken from here\n    merchantShopperId: \"user-123\",\n    ownerId: \"merchant-456\"\n)\n\nlet pxpCheckout = try PxpCheckout.initialize(config: checkoutConfig)\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If you're using the amount component as part of a complete payout flow with returning users, you'll also need to configure ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["paypalConfig"]}," with stored PayPal credentials. However, the amount component itself only requires valid ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["transactionData"]}," with amount and currency."]}]},{"$$mdtype":"Tag","name":"ol","attributes":{"start":2},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Set a valid payout amount in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["transactionData"]},":"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"let transactionData = TransactionData(\n    amount: 100.00,  // This amount will be displayed\n    currency: \"USD\",\n    entryType: .ecom,\n    intent: TransactionIntentData(card: nil, paypal: .payout),\n    merchantTransactionId: \"payout-\\(UUID().uuidString)\",\n    merchantTransactionDate: { Date() }\n)\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"minimal-configuration","__idx":4},"children":["Minimal configuration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["At minimum, the payout amount component requires no mandatory configuration:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"let config = PayoutAmountComponentConfig()\nlet component = try pxpCheckout.create(.payoutAmount, componentConfig: config)\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"with-label","__idx":5},"children":["With label"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add a label to provide context for the amount display:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"let config = PayoutAmountComponentConfig(\n    label: \"Payout amount\",\n    accessibilityLabel: \"Payout amount\"\n)\nlet component = try pxpCheckout.create(.payoutAmount, componentConfig: config)\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"align":"left","data-label":"Property"},"children":["Property"]},{"$$mdtype":"Tag","name":"th","attributes":{"align":"left","data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["label"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The label text displayed above the amount field."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["accessibilityLabel"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The accessibility label for screen readers."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"advanced-configuration","__idx":6},"children":["Advanced configuration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For more complex implementations, you can configure guide text and custom styling:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"let config = PayoutAmountComponentConfig(\n    label: \"Available for Withdrawal\",\n    guideText: \"This amount will be sent to your PayPal account\",\n    accessibilityLabel: \"Available payout amount\",\n    \n    // Custom container styling\n    styles: FieldStyle(\n        backgroundColor: Color(.systemGray6),\n        borderColor: Color(.systemGray4),\n        borderWidth: 1,\n        cornerRadius: 8,\n        padding: EdgeInsets(top: 12, leading: 16, bottom: 12, trailing: 16),\n        textAlignment: .trailing\n    ),\n    \n    // Custom input text styling\n    inputStyles: FieldInputStateStyles(\n        base: FieldInputStyle(\n            color: Color(.label),\n            fontSize: 24,\n            fontWeight: .bold\n        )\n    ),\n    \n    // Custom label styling\n    labelStyles: FieldLabelStateStyles(\n        base: FieldLabelStyle(\n            color: Color(.secondaryLabel),\n            font: .system(size: 14, weight: .medium)\n        )\n    )\n)\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"align":"left","data-label":"Property"},"children":["Property"]},{"$$mdtype":"Tag","name":"th","attributes":{"align":"left","data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["label"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The label text displayed above the amount field."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["guideText"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The helper text displayed below the amount field."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["accessibilityLabel"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The accessibility label for screen readers."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["FieldStyle?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Custom styling for the container and amount text alignment."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["inputStyles"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["FieldInputStateStyles?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Custom styling for the amount text (color, font size, and font weight). info: The current implementation has limited support for these styles."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["labelStyles"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["FieldLabelStateStyles?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Custom styling for the label text."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"styling","__idx":7},"children":["Styling"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"default-styling","__idx":8},"children":["Default styling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The payout amount component renders with default styling suitable for most applications:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"// Default container style\nFieldStyle(\n    backgroundColor: Color(red: 0.929, green: 0.933, blue: 0.937),  // rgba(237, 238, 239, 1)\n    borderColor: Color(red: 0.725, green: 0.741, blue: 0.753),      // rgba(185, 189, 192, 1)\n    borderWidth: 1,\n    cornerRadius: 4,\n    padding: EdgeInsets(top: 12, leading: 16, bottom: 12, trailing: 16),\n    textAlignment: .trailing\n)\n\n// Default input text style\nFieldInputStyle(\n    color: Color(red: 0.035, green: 0.035, blue: 0.047),  // rgba(9, 9, 12, 1)\n    fontSize: 16,\n    fontWeight: .regular\n)\n\n// Default label style\nFieldLabelStyle(\n    color: Color.primary,\n    font: .system(size: 14, weight: .bold)\n)\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"custom-styling","__idx":9},"children":["Custom styling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can customise the appearance to match your app's design:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"let config = PayoutAmountComponentConfig(\n    label: \"Your payout\",\n    \n    // Container styling\n    styles: FieldStyle(\n        backgroundColor: Color(red: 0.95, green: 0.98, blue: 0.95),  // Light green background\n        borderColor: Color(red: 0.2, green: 0.7, blue: 0.3),         // Green border\n        borderWidth: 2,\n        cornerRadius: 12,\n        padding: EdgeInsets(top: 16, leading: 20, bottom: 16, trailing: 20),\n        textAlignment: .center,\n        shadow: ShadowStyle(color: .black.opacity(0.1), radius: 4, x: 0, y: 2)\n    ),\n    \n    // Amount text styling\n    inputStyles: FieldInputStateStyles(\n        base: FieldInputStyle(\n            color: Color(red: 0.1, green: 0.5, blue: 0.2),  // Dark green\n            fontSize: 32,\n            fontWeight: .bold\n        )\n    ),\n    \n    // Label styling\n    labelStyles: FieldLabelStateStyles(\n        base: FieldLabelStyle(\n            color: Color(red: 0.3, green: 0.6, blue: 0.4),\n            font: .system(size: 12, weight: .semibold)\n        )\n    )\n)\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"fieldstyle-properties","__idx":10},"children":["FieldStyle properties"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Each ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["FieldStyle"]}," object supports the following SwiftUI-based properties:"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"width":"20%","data-label":"Property"},"children":["Property "]},{"$$mdtype":"Tag","name":"th","attributes":{"width":"40%","data-label":"Description"},"children":["Description "]},{"$$mdtype":"Tag","name":"th","attributes":{"width":"40%","data-label":"Example"},"children":["Example "]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["color"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Color?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The text/foreground colour."]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".label"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["font"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Font?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The SwiftUI font for the text."]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".body"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fontWeight"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Font.Weight?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The font weight."]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".semibold"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".bold"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fontSize"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CGFloat?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The font size in points."]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["16"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["labelFont"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Font?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The SwiftUI font for labels."]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".caption"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["labelColor"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Color?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The colour for labels."]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".secondary"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["valueFont"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Font?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The SwiftUI font for values."]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".body"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["valueColor"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Color?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The colour for values."]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".primary"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["backgroundColor"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Color?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The background colour."]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Color(.systemGray6)"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["borderColor"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Color?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The border colour."]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".gray"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["borderWidth"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CGFloat?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The border width in points."]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["1"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cornerRadius"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CGFloat?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The corner radius in points."]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["8"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["padding"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["EdgeInsets?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The padding around the content."]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["EdgeInsets(top: 12, leading: 16, bottom: 12, trailing: 16)"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["margin"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["EdgeInsets?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The margin around the component."]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["EdgeInsets(top: 8, leading: 0, bottom: 8, trailing: 0)"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["textAlignment"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["TextAlignment?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The text alignment."]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".center"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["opacity"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Double?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The opacity (0.0 - 1.0)."]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["1.0"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["shadow"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["ShadowStyle?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Shadow styling."]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ShadowStyle(color: .black.opacity(0.2), radius: 4, x: 0, y: 2)"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["icon"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["IconStyle?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Icon styling with size and tint colour."]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["IconStyle(size: CGSize(width: 24, height: 24), tintColor: .white)"]}]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"methods","__idx":11},"children":["Methods"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"buildcontent","__idx":12},"children":["buildContent()"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Renders the amount display in SwiftUI:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"struct PayoutView: View {\n    @State private var amountComponent: BaseComponent?\n    \n    var body: some View {\n        VStack {\n            if let component = amountComponent {\n                component.buildContent()\n                    .frame(maxWidth: .infinity)\n            }\n        }\n        .onAppear {\n            createAmountComponent()\n        }\n    }\n    \n    private func createAmountComponent() {\n        Task {\n            let config = PayoutAmountComponentConfig(\n                label: \"Payout Amount\"\n            )\n            \n            let component = try pxpCheckout.create(.payoutAmount, componentConfig: config)\n            \n            await MainActor.run {\n                self.amountComponent = component\n            }\n        }\n    }\n}\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PayoutAmountComponent"]}," is a display-only component. It doesn't emit events or have interactive callbacks. The amount displayed is determined by the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["transactionData.amount"]}," configured during the SDK initialisation."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"examples","__idx":13},"children":["Examples"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"basic-amount-display","__idx":14},"children":["Basic amount display"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A simple implementation showing the payout amount:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"import SwiftUI\nimport PXPCheckoutSDK\n\nstruct BasicAmountView: View {\n    @State private var amountComponent: BaseComponent?\n    \n    var body: some View {\n        VStack(spacing: 16) {\n            Text(\"Withdraw Funds\")\n                .font(.title)\n            \n            if let component = amountComponent {\n                component.buildContent()\n                    .frame(maxWidth: .infinity)\n            }\n        }\n        .padding()\n        .onAppear {\n            createComponent()\n        }\n    }\n    \n    private func createComponent() {\n        Task {\n            let config = PayoutAmountComponentConfig(\n                label: \"Available Balance\",\n                accessibilityLabel: \"Available balance for withdrawal\"\n            )\n            \n            let component = try pxpCheckout.create(.payoutAmount, componentConfig: config)\n            \n            await MainActor.run {\n                self.amountComponent = component\n            }\n        }\n    }\n}\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"styled-amount-with-guide-text","__idx":15},"children":["Styled amount with guide text"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["An implementation with custom styling and helper text:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"let config = PayoutAmountComponentConfig(\n    label: \"Earnings Ready for Payout\",\n    guideText: \"Funds will arrive in 1-2 business days\",\n    accessibilityLabel: \"Earnings available for payout\",\n    \n    styles: FieldStyle(\n        backgroundColor: Color(.systemBackground),\n        borderColor: Color(.systemGray3),\n        borderWidth: 1,\n        cornerRadius: 12,\n        padding: EdgeInsets(top: 20, leading: 24, bottom: 20, trailing: 24),\n        textAlignment: .center\n    ),\n    \n    inputStyles: FieldInputStateStyles(\n        base: FieldInputStyle(\n            color: Color(red: 0.2, green: 0.6, blue: 0.2),  // Success green\n            fontSize: 36,\n            fontWeight: .bold\n        )\n    ),\n    \n    labelStyles: FieldLabelStateStyles(\n        base: FieldLabelStyle(\n            color: Color(.secondaryLabel),\n            font: .system(size: 14, weight: .medium)\n        )\n    )\n)\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"combined-with-other-payout-components","__idx":16},"children":["Combined with other payout components"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use the amount component alongside the receiver and submission components:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"struct DirectPayoutView: View {\n    @State private var amountComponent: BaseComponent?\n    @State private var receiverComponent: BaseComponent?\n    @State private var submissionComponent: BaseComponent?\n    \n    var body: some View {\n        VStack(spacing: 20) {\n            Text(\"Withdraw to PayPal\")\n                .font(.title)\n            \n            // Amount display\n            if let amount = amountComponent {\n                amount.buildContent()\n                    .frame(maxWidth: .infinity)\n            }\n            \n            // Receiver display\n            if let receiver = receiverComponent {\n                receiver.buildContent()\n                    .frame(maxWidth: .infinity)\n            }\n            \n            Spacer().frame(height: 12)\n            \n            // Submit button\n            if let submit = submissionComponent {\n                submit.buildContent()\n                    .frame(maxWidth: .infinity)\n            }\n        }\n        .padding()\n        .onAppear {\n            createComponents()\n        }\n    }\n    \n    private func createComponents() {\n        Task {\n            // Create amount component\n            let amountConfig = PayoutAmountComponentConfig(\n                label: \"Payout Amount\",\n                styles: FieldStyle(\n                    backgroundColor: Color(.systemGray6),\n                    cornerRadius: 8,\n                    padding: EdgeInsets(top: 16, leading: 16, bottom: 16, trailing: 16)\n                ),\n                inputStyles: FieldInputStateStyles(\n                    base: FieldInputStyle(\n                        fontSize: 28,\n                        fontWeight: .bold\n                    )\n                )\n            )\n            let amount = try pxpCheckout.create(.payoutAmount, componentConfig: amountConfig)\n            \n            // Create receiver component\n            let receiverConfig = PayPalPayoutReceiverComponentConfig(\n                label: \"PayPal Account\",\n                applyMask: true,\n                showMaskToggle: true\n            )\n            let receiver = try pxpCheckout.create(.paypalPayoutReceiver, componentConfig: receiverConfig)\n            \n            // Create submission component\n            let submissionConfig = PayoutSubmissionComponentConfig(\n                submitText: \"Withdraw Now\",\n                onPostPayout: { result in\n                    print(\"Payout completed: \\(result.merchantTransactionId)\")\n                }\n            )\n            let submission = try pxpCheckout.create(.payoutSubmission, componentConfig: submissionConfig)\n            \n            await MainActor.run {\n                self.amountComponent = amount\n                self.receiverComponent = receiver\n                self.submissionComponent = submission\n            }\n        }\n    }\n}\n","lang":"swift"},"children":[]}]},"headings":[{"value":"Amount component","id":"amount-component","depth":1},{"value":"Overview","id":"overview","depth":2},{"value":"Basic usage","id":"basic-usage","depth":2},{"value":"Pre-requisites","id":"pre-requisites","depth":2},{"value":"Minimal configuration","id":"minimal-configuration","depth":3},{"value":"With label","id":"with-label","depth":3},{"value":"Advanced configuration","id":"advanced-configuration","depth":3},{"value":"Styling","id":"styling","depth":2},{"value":"Default styling","id":"default-styling","depth":3},{"value":"Custom styling","id":"custom-styling","depth":3},{"value":"FieldStyle properties","id":"fieldstyle-properties","depth":3},{"value":"Methods","id":"methods","depth":2},{"value":"buildContent()","id":"buildcontent","depth":3},{"value":"Examples","id":"examples","depth":2},{"value":"Basic amount display","id":"basic-amount-display","depth":3},{"value":"Styled amount with guide text","id":"styled-amount-with-guide-text","depth":3},{"value":"Combined with other payout components","id":"combined-with-other-payout-components","depth":3}],"frontmatter":{"seo":{"title":"Amount component"}},"lastModified":"2026-04-24T14:08:13.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/guides/checkout/components/ios/paypal/payouts/amount-component","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}