{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["sub-heading","br","details","admonition"]},"type":"markdown"},"seo":{"title":"PayPal 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":"paypal-receiver-component","__idx":0},"children":["PayPal receiver component"]},{"$$mdtype":"Tag","name":"SubHeading","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Learn how to configure the PayPal payout receiver component for Web."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"basic-usage","__idx":1},"children":["Basic usage"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"minimal-configuration","__idx":2},"children":["Minimal configuration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The PayPal receiver component displays the recipient's PayPal email address from the SDK configuration. No additional configuration is required for basic usage."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const receiverComponent = pxpCheckoutSdk.create('paypal-payout-receiver');\nreceiverComponent.mount('payout-receiver-container');\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"advanced-configuration","__idx":3},"children":["Advanced configuration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For more control over display and masking behaviour, you can configure custom options:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const receiverConfig = {\n  label: \"PayPal Account\",\n  showMaskToggle: true,\n  applyMask: true,\n  style: {\n    color: \"#333333\",\n    backgroundColor: \"#f5f5f5\",\n    borderColor: \"#cccccc\",\n    borderRadius: \"4px\",\n    padding: \"12px 16px\",\n    fontSize: \"16px\"\n  },\n  labelStyle: {\n    color: \"#666666\",\n    fontSize: \"14px\",\n    fontWeight: \"500\",\n    marginBottom: \"8px\"\n  }\n};\n\nconst receiverComponent = pxpCheckoutSdk.create('paypal-payout-receiver', receiverConfig);\nreceiverComponent.mount('payout-receiver-container');\n","lang":"typescript"},"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 custom text for the receiver label. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"PayPal Email\""]},"."]}]},{"$$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":["boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Whether to display the eye icon for show/hide functionality. 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":["applyMask"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Whether to mask the email when eye icon is disabled. Only applies when ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["showMaskToggle"]}," is ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]},". 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":["style"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CSSProperties"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["CSS styles applied to the receiver value element."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["labelStyle"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CSSProperties"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["CSS styles applied to the label element."]}]}]}]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The PayPal email is read from the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["paypalConfig.payoutConfig.paypalWallet.email"]}," value provided during SDK initialisation. This component is display-only."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"masking-behaviour","__idx":4},"children":["Masking behaviour"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The component supports email masking for privacy protection. By default, emails are displayed in a masked format (e.g., ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["c***@example.com"]},")."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"with-toggle-default","__idx":5},"children":["With toggle (default)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["showMaskToggle"]}," is ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]}," (default), an eye icon is displayed allowing users to toggle between masked and unmasked views:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const receiverConfig = {\n  showMaskToggle: true  // Shows eye icon, starts masked\n};\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"without-toggle","__idx":6},"children":["Without toggle"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["showMaskToggle"]}," is ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]},", the masking is controlled by the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["applyMask"]}," property:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"// Always masked, no toggle\nconst receiverConfig = {\n  showMaskToggle: false,\n  applyMask: true\n};\n\n// Always visible, no toggle\nconst receiverConfig = {\n  showMaskToggle: false,\n  applyMask: false\n};\n","lang":"typescript"},"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":"Configuration"},"children":["Configuration"]},{"$$mdtype":"Tag","name":"th","attributes":{"align":"left","data-label":"Behaviour"},"children":["Behaviour"]}]}]},{"$$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":["showMaskToggle: true"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Eye icon visible. User can toggle masking. Starts masked."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["showMaskToggle: false, applyMask: true"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["No eye icon. Email always masked."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["showMaskToggle: false, applyMask: false"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["No eye icon. Email always visible."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"styling","__idx":7},"children":["Styling"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"default-styling","__idx":8},"children":["Default styling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The PayPal receiver component renders with minimal default styling, allowing it to adapt to your page's existing styles."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"custom-styling","__idx":9},"children":["Custom styling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can customise both the label and the receiver display:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const receiverConfig = {\n  label: \"Receiving Account\",\n  showMaskToggle: true,\n  style: {\n    color: \"#003087\",\n    backgroundColor: \"#f0f4f8\",\n    borderColor: \"#003087\",\n    borderWidth: \"1px\",\n    borderStyle: \"solid\",\n    borderRadius: \"8px\",\n    padding: \"16px 20px\",\n    fontSize: \"16px\",\n    fontWeight: \"500\"\n  },\n  labelStyle: {\n    color: \"#003087\",\n    fontSize: \"12px\",\n    fontWeight: \"600\",\n    textTransform: \"uppercase\",\n    letterSpacing: \"0.5px\"\n  }\n};\n","lang":"typescript"},"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":["style"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CSSProperties"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Styling for the receiver value container."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["labelStyle"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CSSProperties"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Styling for the label text above the receiver."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"style-properties","__idx":10},"children":["Style properties"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["style"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["labelStyle"]}," objects accept standard CSS 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":"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":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The text colour."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"#333333\""]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["backgroundColor"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$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":["\"#f5f5f5\""]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["borderColor"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$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":["\"#cccccc\""]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["borderWidth"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The border width."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"1px\""]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["borderStyle"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The border style."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"solid\""]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["borderRadius"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The corner radius."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"8px\""]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["padding"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The inner padding."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"16px 20px\""]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fontSize"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The font size."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"16px\""]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fontWeight"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string | number"]}]},{"$$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":["\"500\""]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fontFamily"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The font family."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"Arial, sans-serif\""]}]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"methods","__idx":11},"children":["Methods"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"mountcontainerid","__idx":12},"children":["mount(containerId)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Renders the receiver component in the specified container:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const receiverComponent = pxpCheckoutSdk.create('paypal-payout-receiver', receiverConfig);\nreceiverComponent.mount('payout-receiver-container');\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"unmount","__idx":13},"children":["unmount()"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Removes the component from the DOM:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"receiverComponent.unmount();\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"examples","__idx":14},"children":["Examples"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"basic-receiver-display","__idx":15},"children":["Basic receiver display"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A simple implementation showing the PayPal email with default masking toggle:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const receiverComponent = pxpCheckoutSdk.create('paypal-payout-receiver', {\n  label: \"PayPal Email\"\n});\nreceiverComponent.mount('payout-receiver-container');\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"receiver-with-paypal-branding","__idx":16},"children":["Receiver with PayPal branding"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["An implementation styled to match PayPal's brand colours:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const receiverConfig = {\n  label: \"PayPal Account\",\n  showMaskToggle: true,\n  style: {\n    color: \"#003087\",\n    backgroundColor: \"#ffffff\",\n    borderColor: \"#003087\",\n    borderWidth: \"2px\",\n    borderStyle: \"solid\",\n    borderRadius: \"4px\",\n    padding: \"14px 16px\",\n    fontSize: \"16px\",\n    fontWeight: \"500\"\n  },\n  labelStyle: {\n    color: \"#003087\",\n    fontSize: \"13px\",\n    fontWeight: \"600\"\n  }\n};\n\nconst receiverComponent = pxpCheckoutSdk.create('paypal-payout-receiver', receiverConfig);\nreceiverComponent.mount('payout-receiver-container');\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"always-visible-receiver-no-masking","__idx":17},"children":["Always visible receiver (no masking)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For use cases where the email should always be visible:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const receiverConfig = {\n  label: \"Payout Destination\",\n  showMaskToggle: false,\n  applyMask: false,\n  style: {\n    color: \"#333333\",\n    backgroundColor: \"#f9f9f9\",\n    padding: \"12px 16px\",\n    fontSize: \"15px\"\n  }\n};\n\nconst receiverComponent = pxpCheckoutSdk.create('paypal-payout-receiver', receiverConfig);\nreceiverComponent.mount('payout-receiver-container');\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"always-masked-receiver-maximum-privacy","__idx":18},"children":["Always masked receiver (maximum privacy)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For sensitive contexts where the email should always be partially hidden:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const receiverConfig = {\n  label: \"Verified PayPal Account\",\n  showMaskToggle: false,\n  applyMask: true,\n  style: {\n    color: \"#666666\",\n    backgroundColor: \"#f5f5f5\",\n    padding: \"12px 16px\",\n    fontSize: \"15px\",\n    fontStyle: \"italic\"\n  }\n};\n\nconst receiverComponent = pxpCheckoutSdk.create('paypal-payout-receiver', receiverConfig);\nreceiverComponent.mount('payout-receiver-container');\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"complete-payout-flow-example","__idx":19},"children":["Complete payout flow example"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A full example showing the PayPal receiver component in context:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"import { PxpCheckout, IntentType, CurrencyType } from \"@pxpio/web-components-sdk\";\n\nasync function initializePayoutPage() {\n  const sessionData = await getSessionDataFromBackend();\n  const customerWallet = await getStoredCustomerWallet();\n  \n  const pxpCheckoutSdk = PxpCheckout.initialize({\n    environment: \"test\",\n    session: sessionData,\n    ownerId: \"Unity\",\n    ownerType: \"MerchantGroup\",\n    transactionData: {\n      amount: 150.00,\n      currency: \"USD\" as CurrencyType,\n      entryType: \"Ecom\",\n      intent: { paypal: IntentType.Payout },\n      merchantTransactionId: crypto.randomUUID(),\n      merchantTransactionDate: () => new Date().toISOString()\n    },\n    paypalConfig: {\n      payoutConfig: {\n        proceedPayoutWithSdk: true,\n        paypalWallet: {\n          email: customerWallet.email,\n          payerId: customerWallet.payerId\n        }\n      }\n    }\n  });\n\n  // Create amount component\n  const amountComponent = pxpCheckoutSdk.create('payout-amount', {\n    label: \"Withdrawal Amount\"\n  });\n\n  // Create PayPal receiver component\n  const receiverComponent = pxpCheckoutSdk.create('paypal-payout-receiver', {\n    label: \"PayPal Account\",\n    showMaskToggle: true,\n    style: {\n      backgroundColor: \"#f8f9fa\",\n      borderRadius: \"8px\",\n      padding: \"14px 16px\"\n    }\n  });\n\n  // Create submission component\n  const submitComponent = pxpCheckoutSdk.create('payout-submission', {\n    recipientWallet: \"Paypal\"\n  });\n\n  // Mount all components\n  amountComponent.mount('payout-amount-container');\n  receiverComponent.mount('payout-receiver-container');\n  submitComponent.mount('payout-submit-container');\n\n  // Cleanup on page unload\n  window.addEventListener('beforeunload', () => {\n    amountComponent.unmount();\n    receiverComponent.unmount();\n    submitComponent.unmount();\n  });\n}\n\ninitializePayoutPage();\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The corresponding HTML structure:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"<div class=\"payout-page\">\n  <h1>Withdraw to PayPal</h1>\n  <div id=\"payout-amount-container\"></div>\n  <div id=\"payout-receiver-container\"></div>\n  <div id=\"payout-submit-container\"></div>\n</div>\n","lang":"html"},"children":[]}]},"headings":[{"value":"PayPal receiver component","id":"paypal-receiver-component","depth":1},{"value":"Basic usage","id":"basic-usage","depth":2},{"value":"Minimal configuration","id":"minimal-configuration","depth":3},{"value":"Advanced configuration","id":"advanced-configuration","depth":3},{"value":"Masking behaviour","id":"masking-behaviour","depth":2},{"value":"With toggle (default)","id":"with-toggle-default","depth":3},{"value":"Without toggle","id":"without-toggle","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":"Style properties","id":"style-properties","depth":3},{"value":"Methods","id":"methods","depth":2},{"value":"mount(containerId)","id":"mountcontainerid","depth":3},{"value":"unmount()","id":"unmount","depth":3},{"value":"Examples","id":"examples","depth":2},{"value":"Basic receiver display","id":"basic-receiver-display","depth":3},{"value":"Receiver with PayPal branding","id":"receiver-with-paypal-branding","depth":3},{"value":"Always visible receiver (no masking)","id":"always-visible-receiver-no-masking","depth":3},{"value":"Always masked receiver (maximum privacy)","id":"always-masked-receiver-maximum-privacy","depth":3},{"value":"Complete payout flow example","id":"complete-payout-flow-example","depth":3}],"frontmatter":{"seo":{"title":"PayPal receiver component"}},"lastModified":"2026-02-26T12:14:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/guides/checkout/components/web/paypal/payouts/paypal-receiver-component","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}