{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["sub-heading","admonition","br","details"]},"type":"markdown"},"seo":{"title":"Receiver 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":"receiver-component","__idx":0},"children":["Receiver component"]},{"$$mdtype":"Tag","name":"SubHeading","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Learn how to configure the PayPal payout receiver 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":["PayPalPayoutReceiverComponent"]}," displays the recipient's PayPal email address with optional masking for privacy. This component shows users which PayPal account will receive their payout. Use this component alongside the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PayoutAmountComponent"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PayoutSubmissionComponent"]}," for returning users who have already linked their PayPal accounts."]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This component is for users with stored PayPal credentials provided by your backend."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"pre-requisites","__idx":2},"children":["Pre-requisites"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Before using the payout receiver component, ensure you have:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Initialised the SDK with stored PayPal credentials:"]}]},{"$$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\",        // This email will be displayed\n            payerId: \"PAYERID123ABC\",         // Credentials from 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)\n\nlet pxpCheckout = try PxpCheckout.initialize(config: checkoutConfig)\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"ol","attributes":{"start":2},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Retrieved the user's PayPal credentials from your backend:"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"// Fetch stored PayPal credentials from your backend\nlet credentials = try await fetchPayPalCredentials(userId: currentUser.id)\n// Use credentials.paypalAccountId and credentials.paypalEmail in SDK initialisation\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"basic-usage","__idx":3},"children":["Basic usage"]},{"$$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 receiver component requires no mandatory configuration:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"let config = PayPalPayoutReceiverComponentConfig()\nlet component = try pxpCheckout.create(.paypalPayoutReceiver, componentConfig: config)\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"with-masking","__idx":5},"children":["With masking"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Enable email masking for privacy (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["j***@****.com"]},"):"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"let config = PayPalPayoutReceiverComponentConfig(\n    label: \"PayPal Account\",\n    accessibilityLabel: \"PayPal account email\",\n    applyMask: true,\n    showMaskToggle: true\n)\nlet component = try pxpCheckout.create(.paypalPayoutReceiver, 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 email 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":["applyMask"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Bool"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Whether to mask the email address. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["showMaskToggle"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Bool"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Whether to show a toggle button to reveal/hide the email. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]},"."]}]}]}]}]},{"$$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, configure styling, validation messages, and receiver type:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"let config = PayPalPayoutReceiverComponentConfig(\n    label: \"Receiving PayPal Account\",\n    placeholder: \"PayPal email\",\n    guideText: \"Funds will be sent to this account\",\n    accessibilityLabel: \"PayPal account receiving the payout\",\n    applyMask: true,\n    showMaskToggle: true,\n    receiverType: .email,\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    ),\n    \n    // Custom input text styling\n    inputStyles: FieldInputStateStyles(\n        base: FieldStyle(\n            color: Color(.label),\n            fontSize: 16,\n            fontWeight: .regular\n        )\n    ),\n    \n    // Custom label styling\n    labelStyles: FieldLabelStateStyles(\n        base: FieldStyle(\n            color: Color(.secondaryLabel),\n            fontSize: 14,\n            fontWeight: .medium\n        )\n    ),\n    \n    // Custom validation messages\n    validations: PayPalPayoutReceiverValidationResource(\n        PPE01: \"PayPal email is required\",\n        PPE02: \"Please enter a valid email address\"\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 email field."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["placeholder"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["String?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The placeholder text shown when the field is empty."]}]},{"$$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 email 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":["applyMask"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Bool"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Whether to mask the email address. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["showMaskToggle"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["Bool"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Whether to show a toggle to reveal/hide email. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["receiverType"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["PayoutRecipientType"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The recipient type. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".email"]},"."]}]},{"$$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."]}]},{"$$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 email text."]}]},{"$$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":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["validations"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["PayPalPayoutReceiverValidationResource?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Custom validation error messages."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"email-masking","__idx":7},"children":["Email masking"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The receiver component supports email masking for user privacy. When masking is enabled, emails are displayed in a protected format."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["john.doe@example.com"]},":"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["If ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["applyMask: false"]},", then ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["john.doe@example.com"]}," is displayed."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["If ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["applyMask: true"]},", then ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["j***@****.com"]}," is displayed."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Email masking displays:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["The first character of the local part (before ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["@"]},")"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Three asterisks replacing the remaining local part characters"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["@"]}," symbol"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Four asterisks the replacing domain name"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".com"]}," (or the actual TLD)"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"mask-toggle","__idx":8},"children":["Mask toggle"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["showMaskToggle"]}," is enabled, users can tap to reveal or hide their email:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"let config = PayPalPayoutReceiverComponentConfig(\n    applyMask: true,        // Start with masked email\n    showMaskToggle: true    // Allow user to reveal/hide\n)\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"privacy-focused-configuration","__idx":9},"children":["Privacy-focused configuration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For maximum privacy, hide the toggle so users can't reveal the full email:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"let config = PayPalPayoutReceiverComponentConfig(\n    label: \"PayPal Account\",\n    applyMask: true,\n    showMaskToggle: false\n)\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"full-display-configuration","__idx":10},"children":["Full display configuration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For contexts where privacy is less of a concern:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"let config = PayPalPayoutReceiverComponentConfig(\n    label: \"PayPal Account\",\n    applyMask: false,       \n    showMaskToggle: false   \n)\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"styling","__idx":11},"children":["Styling"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"default-styling","__idx":12},"children":["Default styling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The payout receiver 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    color: Color(red: 0.035, green: 0.035, blue: 0.047),\n    font: .system(size: 16, weight: .regular),\n    backgroundColor: Color(red: 0.929, green: 0.933, blue: 0.937),\n    borderColor: Color(red: 0.725, green: 0.741, blue: 0.753),\n    borderWidth: 1,\n    cornerRadius: 4,\n    padding: EdgeInsets(top: 12, leading: 16, bottom: 12, trailing: 16)\n)\n\n// Default label style\nFieldStyle(\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":13},"children":["Custom styling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Customise the appearance to match your app's design:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"let config = PayPalPayoutReceiverComponentConfig(\n    label: \"PayPal Account\",\n    applyMask: true,\n    showMaskToggle: true,\n    \n    // Container styling\n    styles: FieldStyle(\n        backgroundColor: Color(red: 0.0, green: 0.44, blue: 0.73).opacity(0.1),  // Light PayPal blue\n        borderColor: Color(red: 0.0, green: 0.44, blue: 0.73),\n        borderWidth: 1,\n        cornerRadius: 8,\n        padding: EdgeInsets(top: 14, leading: 16, bottom: 14, trailing: 16)\n    ),\n    \n    // Email text styling\n    inputStyles: FieldInputStateStyles(\n        base: FieldStyle(\n            color: Color(red: 0.0, green: 0.44, blue: 0.73),  // PayPal blue\n            fontSize: 16,\n            fontWeight: .medium\n        )\n    ),\n    \n    // Label styling\n    labelStyles: FieldLabelStateStyles(\n        base: FieldStyle(\n            color: Color(.secondaryLabel),\n            fontSize: 12,\n            fontWeight: .semibold\n        )\n    )\n)\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"paypal-branded-styling","__idx":14},"children":["PayPal branded styling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Apply PayPal's brand colours:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"struct PayPalBrand {\n    static let blue = Color(red: 0.0, green: 0.44, blue: 0.73)\n    static let darkBlue = Color(red: 0.0, green: 0.18, blue: 0.38)\n    static let lightBlue = Color(red: 0.0, green: 0.44, blue: 0.73).opacity(0.1)\n}\n\nlet config = PayPalPayoutReceiverComponentConfig(\n    label: \"PayPal Account\",\n    applyMask: true,\n    showMaskToggle: true,\n    \n    styles: FieldStyle(\n        backgroundColor: PayPalBrand.lightBlue,\n        borderColor: PayPalBrand.blue,\n        borderWidth: 2,\n        cornerRadius: 8,\n        padding: EdgeInsets(top: 16, leading: 20, bottom: 16, trailing: 20)\n    ),\n    \n    inputStyles: FieldInputStateStyles(\n        base: FieldStyle(\n            color: PayPalBrand.darkBlue,\n            fontSize: 16,\n            fontWeight: .semibold\n        )\n    ),\n    \n    labelStyles: FieldLabelStateStyles(\n        base: FieldStyle(\n            color: PayPalBrand.blue,\n            fontSize: 13,\n            fontWeight: .bold\n        )\n    )\n)\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"fieldstyle-properties","__idx":15},"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":{"align":"left","data-label":"Property"},"children":["Property"]},{"$$mdtype":"Tag","name":"th","attributes":{"align":"left","data-label":"Type"},"children":["Type"]},{"$$mdtype":"Tag","name":"th","attributes":{"align":"left","data-label":"Description"},"children":["Description"]},{"$$mdtype":"Tag","name":"th","attributes":{"align":"left","data-label":"Example"},"children":["Example"]}]}]},{"$$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":["color"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Color?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The text/foreground colour."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".label"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["font"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Font?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The SwiftUI font for the text."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".body"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fontWeight"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Font.Weight?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The font weight."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"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":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fontSize"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["CGFloat?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The font size in points."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["16"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["labelFont"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Font?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The SwiftUI font for labels."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".caption"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["labelColor"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Color?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The colour for labels."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".secondary"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["valueFont"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Font?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The SwiftUI font for values."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".body"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["valueColor"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Color?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The colour for values."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".primary"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["backgroundColor"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Color?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The background colour."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Color(.systemGray6)"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["borderColor"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Color?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The border colour."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".gray"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["borderWidth"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["CGFloat?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The border width in points."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["1"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cornerRadius"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["CGFloat?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The corner radius in points."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["8"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["padding"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["EdgeInsets?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The padding around the content."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"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":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["margin"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["EdgeInsets?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The margin around the component."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"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":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["textAlignment"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["TextAlignment?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The text alignment."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".leading"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["opacity"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Double?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The opacity (0.0 - 1.0)."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["1.0"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["shadow"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ShadowStyle?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Shadow styling."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"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":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["icon"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["IconStyle?"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Icon styling with size and tint colour."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["IconStyle(size: CGSize(width: 24, height: 24), tintColor: .white)"]}]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"validation","__idx":16},"children":["Validation"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"custom-validation-messages","__idx":17},"children":["Custom validation messages"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Provide custom error messages for validation scenarios:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"let config = PayPalPayoutReceiverComponentConfig(\n    label: \"PayPal Account\",\n    validations: PayPalPayoutReceiverValidationResource(\n        PPE01: \"Please provide a PayPal email address\",\n        PPE02: \"The email address format is invalid\"\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":"Validation"},"children":["Validation"]},{"$$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":["PPE01"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Message shown when the receiver email is missing."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PPE02"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Message shown when the email format is invalid."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"receivertype","__idx":18},"children":["receiverType"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Currently, only ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".email"]}," is supported:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"receiverType: .email  // Only supported value\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"methods","__idx":19},"children":["Methods"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"buildcontent","__idx":20},"children":["buildContent()"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Renders the receiver display as a SwiftUI view:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"func buildContent() -> AnyView\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Returns the component as a SwiftUI ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["AnyView"]},". The returned view is a read-only display showing the PayPal email from SDK configuration."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"struct PayoutView: View {\n    @State private var receiverComponent: BaseComponent?\n    \n    var body: some View {\n        VStack {\n            if let component = receiverComponent {\n                component.buildContent()\n                    .frame(maxWidth: .infinity)\n            }\n        }\n        .onAppear {\n            createReceiverComponent()\n        }\n    }\n    \n    private func createReceiverComponent() {\n        Task {\n            let config = PayPalPayoutReceiverComponentConfig(\n                label: \"PayPal Account\",\n                applyMask: true,\n                showMaskToggle: true\n            )\n            \n            let component = try pxpCheckout.create(.paypalPayoutReceiver, componentConfig: config)\n            \n            await MainActor.run {\n                self.receiverComponent = 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":["PayPalPayoutReceiverComponent"]}," is primarily a display component. The email address displayed is determined by the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["paypalConfig.payout.paypalWallet.email"]}," configured during the SDK initialisation."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"important-display-only-component","__idx":21},"children":["Important: Display-only component"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PayPalPayoutReceiverComponent"]}," is a read-only display component:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["The email address is sourced from ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PayPalWallet.email"]}," in the SDK configuration."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Users can't edit the email through this component."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["To change the displayed email, you must reinitialise SDK with a different ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PayPalWallet"]}," configuration."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["The component has no ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["getValue()"]}," method (display-only, no input collection)."]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"// To change the displayed email, update SDK configuration\nlet updatedPaypalWallet = PayPalWallet(\n    email: \"newemail@example.com\",  // New email to display\n    payerId: \"PAYERID123ABC\",\n    proceedPayoutWithSdk: true\n)\n\n// Reinitialise SDK with new configuration\nlet checkoutConfig = CheckoutConfig(\n    // ... other config\n    paypalConfig: PayPalConfig(\n        payout: PayPalPayoutConfig(\n            paypalWallet: updatedPaypalWallet\n        )\n    )\n)\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"examples","__idx":22},"children":["Examples"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"basic-receiver-display","__idx":23},"children":["Basic receiver display"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A simple implementation showing the PayPal email:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"import SwiftUI\nimport PXPCheckoutSDK\n\nstruct BasicReceiverView: View {\n    @State private var receiverComponent: BaseComponent?\n    \n    var body: some View {\n        VStack(spacing: 16) {\n            Text(\"Payout Destination\")\n                .font(.title)\n            \n            if let component = receiverComponent {\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 = PayPalPayoutReceiverComponentConfig(\n                label: \"PayPal Account\",\n                accessibilityLabel: \"PayPal account for receiving payout\",\n                applyMask: true,\n                showMaskToggle: true\n            )\n            \n            let component = try pxpCheckout.create(.paypalPayoutReceiver, componentConfig: config)\n            \n            await MainActor.run {\n                self.receiverComponent = component\n            }\n        }\n    }\n}\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"privacy-focused-display","__idx":24},"children":["Privacy-focused display"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Implementation with masked email and no reveal option:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"let config = PayPalPayoutReceiverComponentConfig(\n    label: \"Linked PayPal Account\",\n    guideText: \"Your email is hidden for security\",\n    accessibilityLabel: \"Linked PayPal account\",\n    applyMask: true,\n    showMaskToggle: false,  // Cannot reveal email\n    \n    styles: FieldStyle(\n        backgroundColor: Color(.systemGray6),\n        borderColor: Color(.systemGray4),\n        borderWidth: 1,\n        cornerRadius: 8,\n        padding: EdgeInsets(top: 14, leading: 16, bottom: 14, trailing: 16)\n    ),\n    \n    inputStyles: FieldInputStateStyles(\n        base: FieldStyle(\n            color: Color(.label),\n            fontSize: 16,\n            fontWeight: .medium,\n            // Add a lock icon style if supported\n        )\n    )\n)\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"combined-with-other-payout-components","__idx":25},"children":["Combined with other payout components"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use the receiver component alongside the amount 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            Divider()\n                .padding(.vertical, 8)\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            )\n            let amount = try pxpCheckout.create(.payoutAmount, componentConfig: amountConfig)\n            \n            // Create receiver component with PayPal branding\n            let receiverConfig = PayPalPayoutReceiverComponentConfig(\n                label: \"PayPal Account\",\n                applyMask: true,\n                showMaskToggle: true,\n                \n                styles: FieldStyle(\n                    backgroundColor: Color(red: 0.0, green: 0.44, blue: 0.73).opacity(0.05),\n                    borderColor: Color(red: 0.0, green: 0.44, blue: 0.73).opacity(0.3),\n                    borderWidth: 1,\n                    cornerRadius: 8\n                )\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":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"error-handling","__idx":26},"children":["Error handling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The receiver component can generate validation errors. Handle these errors through the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PayoutSubmissionComponent"]},"'s ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onError"]}," callback:"]},{"$$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":"Error code"},"children":["Error code"]},{"$$mdtype":"Tag","name":"th","attributes":{"align":"left","data-label":"Exception"},"children":["Exception"]},{"$$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":["SDK0803"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PaypalPayoutReceiverRequiredException"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The receiver is required."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["SDK0804"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PayoutReceiverTypeInvalidException"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Invalid receiver type."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["SDK0805"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PaypalPayoutReceiverTypeEmailOnlyException"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The receiver type must be ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Email"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["SDK0808"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PaypalPayoutEmailInvalidException"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Invalid email format."]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["While the receiver component displays the PayPal email, validation errors are triggered by the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PayoutSubmissionComponent"]}," when attempting to execute a payout. Handle these errors through the submission component's ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onError"]}," callback:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"swift","header":{"controls":{"copy":{}}},"source":"let submissionConfig = PayoutSubmissionComponentConfig(\n    onError: { error in\n        // Handle receiver-related validation errors here\n        switch error.errorCode {\n        case \"SDK0803\", \"SDK0804\", \"SDK0805\", \"SDK0808\":\n            // Receiver validation errors\n            print(\"Receiver error: \\(error.errorMessage)\")\n        default:\n            break\n        }\n    }\n)\n","lang":"swift"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For a complete list of error codes, see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/ios/paypal/payouts/data-validation"},"children":["Data validation"]},"."]}]},"headings":[{"value":"Receiver component","id":"receiver-component","depth":1},{"value":"Overview","id":"overview","depth":2},{"value":"Pre-requisites","id":"pre-requisites","depth":2},{"value":"Basic usage","id":"basic-usage","depth":2},{"value":"Minimal configuration","id":"minimal-configuration","depth":3},{"value":"With masking","id":"with-masking","depth":3},{"value":"Advanced configuration","id":"advanced-configuration","depth":3},{"value":"Email masking","id":"email-masking","depth":2},{"value":"Mask toggle","id":"mask-toggle","depth":3},{"value":"Privacy-focused configuration","id":"privacy-focused-configuration","depth":3},{"value":"Full display configuration","id":"full-display-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":"PayPal branded styling","id":"paypal-branded-styling","depth":3},{"value":"FieldStyle properties","id":"fieldstyle-properties","depth":3},{"value":"Validation","id":"validation","depth":2},{"value":"Custom validation messages","id":"custom-validation-messages","depth":3},{"value":"receiverType","id":"receivertype","depth":3},{"value":"Methods","id":"methods","depth":2},{"value":"buildContent()","id":"buildcontent","depth":3},{"value":"Important: Display-only component","id":"important-display-only-component","depth":2},{"value":"Examples","id":"examples","depth":2},{"value":"Basic receiver display","id":"basic-receiver-display","depth":3},{"value":"Privacy-focused display","id":"privacy-focused-display","depth":3},{"value":"Combined with other payout components","id":"combined-with-other-payout-components","depth":3},{"value":"Error handling","id":"error-handling","depth":2}],"frontmatter":{"seo":{"title":"Receiver component"}},"lastModified":"2026-04-13T14:44:58.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/guides/checkout/components/ios/paypal/payouts/receiver-component","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}