{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["sub-heading","admonition","details"]},"type":"markdown"},"seo":{"title":"About configuration","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":"about-configuration","__idx":0},"children":["About configuration"]},{"$$mdtype":"Tag","name":"SubHeading","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Learn about how to configure PayPal payout components for iOS."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"overview","__idx":1},"children":["Overview"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The PayPal iOS SDK provides configurable components for integrating PayPal payouts into your iOS application. Each component is built with SwiftUI and offers comprehensive configuration options for styling, behaviour, and event handling."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"configuration-structure","__idx":2},"children":["Configuration structure"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["All PayPal payout components follow a consistent configuration pattern:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"// Payout submission component\nlet submissionConfig = PayoutSubmissionComponentConfig(\n    submitText: \"Withdraw to PayPal\",\n    submitAccessibilityLabel: \"Withdraw funds to PayPal\"\n)\n\n// Styling\nsubmissionConfig.styles = ButtonStateStyles(\n    base: FieldStyle(\n        color: .white,\n        backgroundColor: Color(red: 0, green: 0.44, blue: 0.73)\n    )\n)\n\n// Event handlers\nsubmissionConfig.onPostPayout = { result in\n    // Handle payout completion\n}\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Environment and PayPal credentials are configured at SDK initialisation via ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["CheckoutConfig"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PayPalConfig"]},". The payout execution mode (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["proceedPayoutWithSdk"]},") is configured via ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PayPalConfig"]},"."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"basic-configuration","__idx":3},"children":["Basic configuration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Each component can be customised with configuration properties:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"// Payout submission component\nlet submissionConfig = PayoutSubmissionComponentConfig(\n    submitText: \"Withdraw to PayPal\",\n    submitAccessibilityLabel: \"Withdraw funds to PayPal\"\n)\n\n// Payout amount component (display only)\nlet amountConfig = PayoutAmountComponentConfig(\n    label: \"Payout Amount\",\n    accessibilityLabel: \"Payout amount\"\n)\n\n// PayPal payout receiver component (display only)\nlet receiverConfig = PayPalPayoutReceiverComponentConfig(\n    label: \"PayPal Account\",\n    accessibilityLabel: \"PayPal account email\"\n)\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"component-property-reference","__idx":4},"children":["Component property reference"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Each component supports the following configuration properties:"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"payoutsubmissioncomponentconfig","__idx":5},"children":["PayoutSubmissionComponentConfig"]},{"$$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":{"data-label":"Property"},"children":["Property"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["recipientType"]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["PayoutRecipientType"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The recipient type. Default: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".email"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["wallet"]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["PayPalPayoutWalletType"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The wallet type. Default: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".paypal"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["submitText"]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Custom text for the submit button. Default: \"Withdraw with PayPal\"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["submitAccessibilityLabel"]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Accessibility label for the button. Default: \"Withdraw with PayPal\"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles"]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["ButtonStateStyles?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Custom button styles for different states."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onClick"]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["(() -> Void)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Called when the button is clicked (before validation)."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPrePayoutSubmit"]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["(() async -> PrePayoutSubmitResult?)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Called for merchant approval before payout (SDK-managed mode only)."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPostPayout"]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["((MerchantSubmitResult) -> Void)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Called after payout completes (SDK-managed mode only)."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onCancel"]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["(() -> Void)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Called when the payout is cancelled."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onError"]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["((BaseSdkException) -> Void)?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Called when an error occurs. Parameter: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["error"]}," - Exception with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["errorCode"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["errorMessage"]}," properties."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"payoutamountcomponentconfig","__idx":6},"children":["PayoutAmountComponentConfig"]},{"$$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":{"data-label":"Property"},"children":["Property"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["label"]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Label text displayed above the amount field."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["placeholder"]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Placeholder text shown when amount is empty."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["guideText"]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Helper text displayed below the amount field."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["accessibilityLabel"]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Accessibility label for screen readers."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles"]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["FieldStyle?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Custom styling for the container."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["inputStyles"]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["FieldInputStateStyles?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Custom styling for the amount text."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["labelStyles"]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["FieldLabelStateStyles?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Custom styling for the label text."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"paypalpayoutreceivercomponentconfig","__idx":7},"children":["PayPalPayoutReceiverComponentConfig"]},{"$$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":{"data-label":"Property"},"children":["Property"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["label"]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Label text displayed above the email field."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["placeholder"]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Placeholder text shown when field is empty."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["guideText"]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Helper text displayed below the email field."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["accessibilityLabel"]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Accessibility label for screen readers."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["applyMask"]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Bool"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Whether to mask the email address. Default: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["showMaskToggle"]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Bool"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Whether to show a toggle to reveal/hide email. Default: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["receiverType"]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["PayoutRecipientType"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The recipient type. Default: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".email"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles"]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["FieldStyle?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Custom styling for the container."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["inputStyles"]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["FieldInputStateStyles?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Custom styling for the email text."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["labelStyles"]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["FieldLabelStateStyles?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Custom styling for the label text."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["validations"]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["PayPalPayoutReceiverValidationResource?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Custom validation error messages."]}]}]}]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Error callback type handling:"]}," While the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onError"]}," callback signature accepts ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Error"]},", the SDK always passes a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["BaseSdkException"]}," instance at runtime, allowing access to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".errorCode"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".errorMessage"]}," properties."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"advanced-configuration","__idx":8},"children":["Advanced configuration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For more complex implementations, you can configure styling, callbacks, and additional features:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"let submissionConfig = PayoutSubmissionComponentConfig(\n    submitText: \"Withdraw to PayPal\",\n    submitAccessibilityLabel: \"Withdraw funds to PayPal\",\n    \n    // Custom button styling\n    styles: ButtonStateStyles(\n        base: FieldStyle(\n            color: .white,\n            fontSize: 16,\n            fontWeight: .semibold,\n            backgroundColor: Color(red: 0, green: 0.44, blue: 0.73),\n            cornerRadius: 8,\n            padding: EdgeInsets(top: 14, leading: 24, bottom: 14, trailing: 24)\n        ),\n        disabled: FieldStyle(\n            backgroundColor: Color(.systemGray5),\n            opacity: 0.6\n        ),\n        loading: FieldStyle(\n            backgroundColor: Color(red: 0, green: 0.37, blue: 0.65),\n            opacity: 0.9\n        )\n    ),\n    \n    // Event handlers\n    onClick: {\n        print(\"Submit button clicked\")\n    },\n    \n    onPrePayoutSubmit: {\n        return await showApprovalDialog()\n    },\n    \n    onPostPayout: { result in\n        showSuccessMessage(result.merchantTransactionId)\n    },\n    \n    onError: { error in\n        handlePayoutError(error)\n    }\n)\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"styling-components","__idx":9},"children":["Styling components"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"default-styling","__idx":10},"children":["Default styling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["All components come with PayPal-branded default styling:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Submission button:"]}," PayPal blue with collapsed size."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Amount display:"]}," Read-only field with label."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Receiver display:"]}," Read-only field with email masking."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"custom-styling","__idx":11},"children":["Custom styling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Each component offers comprehensive styling options:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Colours:"]}," Customise all colour properties including backgrounds, text, and states."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Typography:"]}," Control font sizes, weights, and text styles."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Layout:"]}," Configure spacing, padding, dimensions, and positioning."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Shapes:"]}," Adjust corner radius and border styles."]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"// Custom button styling with states\nlet buttonStyles = ButtonStateStyles(\n    base: FieldStyle(\n        color: .white,\n        fontSize: 18,\n        fontWeight: .bold,\n        backgroundColor: Color(red: 0.2, green: 0.7, blue: 0.3),\n        borderColor: Color(red: 0.2, green: 0.7, blue: 0.3),\n        borderWidth: 0,\n        cornerRadius: 12,\n        padding: EdgeInsets(top: 16, leading: 32, bottom: 16, trailing: 32),\n        opacity: 1.0\n    ),\n    disabled: FieldStyle(\n        color: Color(.systemGray2),\n        backgroundColor: Color(.systemGray5),\n        opacity: 0.5\n    ),\n    loading: FieldStyle(\n        color: .white,\n        backgroundColor: Color(red: 0.15, green: 0.55, blue: 0.25),\n        opacity: 0.9\n    )\n)\n\nlet submissionConfig = PayoutSubmissionComponentConfig(\n    submitText: \"Withdraw to PayPal\",\n    styles: buttonStyles\n)\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"field-styling-for-display-components","__idx":12},"children":["Field styling for display components"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The display components (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PayoutAmountComponent"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PayPalPayoutReceiverComponent"]},") support field-specific styling:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"let amountConfig = PayoutAmountComponentConfig(\n    label: \"Payout Amount\",\n    placeholder: \"$0.00\",\n    guideText: \"Amount to be sent to your PayPal account\",\n    accessibilityLabel: \"Payout amount\",\n    styles: FieldStyle(\n        backgroundColor: Color(.systemGray6),\n        cornerRadius: 12,\n        padding: EdgeInsets(top: 20, leading: 20, bottom: 20, trailing: 20)\n    ),\n    inputStyles: FieldInputStateStyles(\n        base: FieldStyle(\n            color: Color(red: 0.2, green: 0.7, blue: 0.3),\n            fontSize: 32,\n            fontWeight: .bold,\n            textAlignment: .center\n        )\n    ),\n    labelStyles: FieldLabelStateStyles(\n        base: FieldStyle(\n            color: .secondary,\n            fontSize: 14,\n            fontWeight: .medium\n        )\n    )\n)\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"event-handling","__idx":13},"children":["Event handling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["All components provide event handlers for user interactions and lifecycle events."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Common event patterns:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Click handlers:"]}," Called when the button is tapped."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Success handlers:"]}," Called when operations complete successfully."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Error handlers:"]}," Called when errors occur."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Cancellation handlers:"]}," Called when the user cancels the flow."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Approval handlers:"]}," Called for merchant approval before payout execution."]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"let submissionConfig = PayoutSubmissionComponentConfig(\n    submitText: \"Withdraw to PayPal\",\n    \n    // Click handling\n    onClick: {\n        print(\"Button clicked\")\n        showLoadingIndicator()\n    },\n    \n    // Merchant approval (SDK-managed mode)\n    onPrePayoutSubmit: {\n        let approved = await showApprovalDialog(\n            amount: 100.00,\n            currency: \"USD\"\n        )\n        \n        guard approved else { return nil }\n        \n        return PrePayoutSubmitResult(isApproved: true)\n    },\n    \n    // Success handling\n    onPostPayout: { result in\n        print(\"Payout completed: \\(result.merchantTransactionId)\")\n        navigateToSuccessScreen()\n    },\n    \n    // Error handling\n    onError: { error in\n        print(\"Payout error: \\(error.errorMessage)\")\n        showErrorDialog(error.errorMessage)\n    },\n    \n    // Cancellation handling\n    onCancel: {\n        print(\"User cancelled payout\")\n        showCancelMessage()\n    }\n)\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"component-types","__idx":14},"children":["Component types"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The payout SDK provides components for displaying payout information and executing transactions:"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"display-components","__idx":15},"children":["Display components"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PayoutAmountComponent"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PayPalPayoutReceiverComponent"]}," to show payout details to users:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"// Create amount display\nlet amountConfig = PayoutAmountComponentConfig(\n    label: \"Amount\"\n)\nlet amountComponent = try pxpCheckout.create(\n    .payoutAmount,\n    componentConfig: amountConfig\n)\n\n// Create receiver display\nlet receiverConfig = PayPalPayoutReceiverComponentConfig(\n    label: \"PayPal Account\",\n    applyMask: true,\n    showMaskToggle: true\n)\nlet receiverComponent = try pxpCheckout.create(\n    .paypalPayoutReceiver,\n    componentConfig: receiverConfig\n)\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"submission-component","__idx":16},"children":["Submission component"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PayoutSubmissionComponent"]}," to provide a button for users to execute the payout:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"// Configure SDK with stored credentials\nlet paypalConfig = PayPalConfig(\n    payout: PayPalPayoutConfig(\n        paypalWallet: PayPalWallet(\n            email: \"user@example.com\",\n            payerId: \"PAYERID123ABC\",\n            proceedPayoutWithSdk: true\n        )\n    )\n)\n\nlet submissionConfig = PayoutSubmissionComponentConfig(\n    submitText: \"Withdraw to PayPal\",\n    onPostPayout: { result in\n        print(\"Payout completed: \\(result.merchantTransactionId)\")\n    }\n)\nlet submitComponent = try pxpCheckout.create(\n    .payoutSubmission,\n    componentConfig: submissionConfig\n)\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"payout-execution-modes","__idx":17},"children":["Payout execution modes"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Configure how payouts are executed via ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PayPalConfig"]},". The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["proceedPayoutWithSdk"]}," parameter controls whether the SDK or your backend manages payout execution."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"sdk-managed-payouts","__idx":18},"children":["SDK-managed payouts"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The SDK executes the payout after merchant approval:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"let paypalConfig = PayPalConfig(\n    payout: PayPalPayoutConfig(\n        paypalWallet: PayPalWallet(\n            email: \"user@example.com\",      // From your backend\n            payerId: \"PAYERID123ABC\",       // From your backend\n            proceedPayoutWithSdk: true      // SDK manages payout\n        )\n    )\n)\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["With SDK-managed payouts, implement the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPrePayoutSubmit"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPostPayout"]}," callbacks."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"backend-managed-payouts-default","__idx":19},"children":["Backend-managed payouts (default)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Your backend handles payout execution:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"let paypalConfig = PayPalConfig(\n    payout: PayPalPayoutConfig(\n        paypalWallet: PayPalWallet(\n            email: \"user@example.com\",      // From your backend\n            payerId: \"PAYERID123ABC\",       // From your backend\n            proceedPayoutWithSdk: false     // Backend manages payout (default)\n        )\n    )\n)\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["With backend-managed payouts, your iOS app notifies the backend when the user requests a payout, then your backend executes the payout via the Unity API."]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Default behaviour:"]}," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["proceedPayoutWithSdk"]}," defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]},". When ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]},":"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["SDK doessn't execute the payout"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPrePayoutSubmit"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPostPayout"]}," callbacks aren't triggered."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Your backend must handle payout execution."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["The iOS app notifies the backend when the user initiates a payout."]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"best-practices","__idx":20},"children":["Best practices"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"configure-for-your-brand","__idx":21},"children":["Configure for your brand"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Customise the styling to match your app's design:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"// Define brand colours\nstruct BrandColors {\n    static let primary = Color(red: 0, green: 0.44, blue: 0.73)\n    static let success = Color(red: 0.2, green: 0.7, blue: 0.3)\n    static let surface = Color(red: 0.97, green: 0.98, blue: 0.98)\n    static let onSurface = Color(red: 0.13, green: 0.15, blue: 0.16)\n}\n\n// Apply to components\nlet submissionConfig = PayoutSubmissionComponentConfig(\n    submitText: \"Withdraw to PayPal\",\n    styles: ButtonStateStyles(\n        base: FieldStyle(\n            color: .white,\n            backgroundColor: BrandColors.primary,\n            cornerRadius: 8\n        )\n    )\n)\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"handle-all-events","__idx":22},"children":["Handle all events"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Implement comprehensive event handling:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"let submissionConfig = PayoutSubmissionComponentConfig(\n    submitText: \"Withdraw to PayPal\",\n    onClick: { handleClick() },\n    onPrePayoutSubmit: { await handleApproval() },\n    onPostPayout: { handleSuccess($0) },\n    onCancel: { handleCancel() },\n    onError: { handleError($0) }\n)\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For more information about events, see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/ios/paypal/payouts/events"},"children":["Events"]},"."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"test-different-configurations","__idx":23},"children":["Test different configurations"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Test your components in various scenarios:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Light and dark mode."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Different screen sizes (iPhone, iPad)."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Various payout amounts."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Error conditions."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Network failures."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"complete-configuration-example","__idx":24},"children":["Complete configuration example"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Here's a comprehensive example showing all configuration options for a complete payout flow:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"import SwiftUI\nimport PXPCheckoutSDK\n\n// Initialise SDK\nlet sessionData = SessionData(\n    sessionId: \"your-session-id\",\n    hmacKey: \"your-hmac-key\",\n    encryptionKey: \"your-encryption-key\",\n    allowedFundingTypes: nil\n)\n\nlet transactionData = TransactionData(\n    amount: Decimal(100.00),\n    currency: \"USD\",\n    entryType: .ecom,\n    intent: TransactionIntentData(card: nil, paypal: .payout),\n    merchantTransactionId: \"payout-\\(UUID().uuidString)\",\n    merchantTransactionDate: { Date() }\n)\n\nlet paypalConfig = PayPalConfig(\n    payout: PayPalPayoutConfig(\n        paypalWallet: PayPalWallet(\n            email: \"user@example.com\",      // From your backend\n            payerId: \"PAYERID123ABC\",       // From your backend\n            proceedPayoutWithSdk: true\n        )\n    )\n)\n\nlet checkoutConfig = CheckoutConfig(\n    environment: .test,\n    session: sessionData,\n    transactionData: transactionData,\n    merchantShopperId: \"user-123\",\n    ownerId: \"merchant-456\",\n    paypalConfig: paypalConfig,\n    analyticsEvent: { event in\n        print(\"Analytics: \\(event.eventName)\")\n    }\n)\n\nlet pxpCheckout = try PxpCheckout.initialize(config: checkoutConfig)\n\n// Create amount display component\nlet amountConfig = PayoutAmountComponentConfig(\n    label: \"Payout Amount\"\n)\nlet amountComponent = try pxpCheckout.create(.payoutAmount, componentConfig: amountConfig)\n\n// Create receiver display component  \nlet receiverConfig = PayPalPayoutReceiverComponentConfig(\n    label: \"PayPal Account\",\n    applyMask: true,\n    showMaskToggle: true\n)\nlet receiverComponent = try pxpCheckout.create(.paypalPayoutReceiver, componentConfig: receiverConfig)\n\n// Create submission component with full configuration\nlet submissionConfig = PayoutSubmissionComponentConfig(\n    recipientType: .email,\n    wallet: .paypal,\n    submitText: \"Withdraw to PayPal\",\n    submitAccessibilityLabel: \"Withdraw funds to PayPal\",\n    \n    // Custom styling\n    styles: ButtonStateStyles(\n        base: FieldStyle(\n            color: .white,\n            fontSize: 16,\n            fontWeight: .semibold,\n            backgroundColor: Color(red: 0, green: 0.44, blue: 0.73),\n            borderColor: Color(red: 0, green: 0.44, blue: 0.73),\n            borderWidth: 0,\n            cornerRadius: 8,\n            padding: EdgeInsets(top: 14, leading: 24, bottom: 14, trailing: 24),\n            opacity: 1.0\n        ),\n        disabled: FieldStyle(\n            color: Color(.systemGray),\n            backgroundColor: Color(.systemGray5),\n            borderColor: Color(.systemGray5),\n            opacity: 0.6\n        ),\n        loading: FieldStyle(\n            color: .white,\n            backgroundColor: Color(red: 0, green: 0.37, blue: 0.65),\n            opacity: 0.9\n        )\n    ),\n    \n    // Event handlers\n    onClick: {\n        print(\"Withdraw button clicked\")\n        Analytics.track(\"payout_initiated\")\n    },\n    \n    onPrePayoutSubmit: {\n        print(\"Approval requested\")\n        \n        // Show confirmation dialog\n        let approved = await showPayoutApprovalDialog(\n            amount: 100.00,\n            currency: \"USD\"\n        )\n        \n        guard approved else {\n            Analytics.track(\"payout_approval_rejected\")\n            return nil\n        }\n        \n        Analytics.track(\"payout_approval_granted\")\n        \n        return PrePayoutSubmitResult(isApproved: true)\n    },\n    \n    onPostPayout: { result in\n        print(\"Payout successful!\")\n        print(\"Merchant TX ID: \\(result.merchantTransactionId)\")\n        print(\"System TX ID: \\(result.systemTransactionId)\")\n        \n        Analytics.track(\"payout_completed\", properties: [\n            \"transactionId\": result.merchantTransactionId\n        ])\n        \n        navigateToSuccessScreen(result.merchantTransactionId)\n    },\n    \n    onCancel: {\n        print(\"User cancelled payout\")\n        Analytics.track(\"payout_cancelled\")\n        showCancelMessage()\n    },\n    \n    onError: { error in\n        print(\"Payout error: \\(error.errorCode) - \\(error.errorMessage)\")\n        \n        Analytics.track(\"payout_error\", properties: [\n            \"errorCode\": error.errorCode,\n            \"errorMessage\": error.errorMessage\n        ])\n        \n        showErrorDialog(error.errorMessage)\n    }\n)\n\n// Create submission component\nlet submitComponent = try pxpCheckout.create(\n    .payoutSubmission,\n    componentConfig: submissionConfig\n)\n\n// Render in SwiftUI\nVStack(spacing: 16) {\n    amountComponent.buildContent()\n    receiverComponent.buildContent()\n    submitComponent.buildContent()\n}\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"next-steps","__idx":25},"children":["Next steps"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Now that you understand component configuration fundamentals, dive into the detailed documentation for each component:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/ios/paypal/payouts/amount-component"},"children":["Payout amount component"]},":"]}," Amount display configuration."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/ios/paypal/payouts/receiver-component"},"children":["Payout receiver component"]},":"]}," Receiver display configuration."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/ios/paypal/payouts/submission-component"},"children":["Payout submission component"]},":"]}," Submit button configuration."]}]}]},"headings":[{"value":"About configuration","id":"about-configuration","depth":1},{"value":"Overview","id":"overview","depth":2},{"value":"Configuration structure","id":"configuration-structure","depth":2},{"value":"Basic configuration","id":"basic-configuration","depth":3},{"value":"Component property reference","id":"component-property-reference","depth":3},{"value":"PayoutSubmissionComponentConfig","id":"payoutsubmissioncomponentconfig","depth":4},{"value":"PayoutAmountComponentConfig","id":"payoutamountcomponentconfig","depth":4},{"value":"PayPalPayoutReceiverComponentConfig","id":"paypalpayoutreceivercomponentconfig","depth":4},{"value":"Advanced configuration","id":"advanced-configuration","depth":3},{"value":"Styling components","id":"styling-components","depth":2},{"value":"Default styling","id":"default-styling","depth":3},{"value":"Custom styling","id":"custom-styling","depth":3},{"value":"Field styling for display components","id":"field-styling-for-display-components","depth":3},{"value":"Event handling","id":"event-handling","depth":2},{"value":"Component types","id":"component-types","depth":2},{"value":"Display components","id":"display-components","depth":3},{"value":"Submission component","id":"submission-component","depth":3},{"value":"Payout execution modes","id":"payout-execution-modes","depth":2},{"value":"SDK-managed payouts","id":"sdk-managed-payouts","depth":3},{"value":"Backend-managed payouts (default)","id":"backend-managed-payouts-default","depth":3},{"value":"Best practices","id":"best-practices","depth":2},{"value":"Configure for your brand","id":"configure-for-your-brand","depth":3},{"value":"Handle all events","id":"handle-all-events","depth":3},{"value":"Test different configurations","id":"test-different-configurations","depth":3},{"value":"Complete configuration example","id":"complete-configuration-example","depth":2},{"value":"Next steps","id":"next-steps","depth":2}],"frontmatter":{"seo":{"title":"About configuration"}},"lastModified":"2026-05-08T12:23:09.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/guides/checkout/components/ios/paypal/payouts/about-configuration","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}