{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["sub-heading","br","details","admonition","yes","no"]},"type":"markdown"},"seo":{"title":"Venmo 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":"venmo-receiver-component","__idx":0},"children":["Venmo receiver component"]},{"$$mdtype":"Tag","name":"SubHeading","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Learn how to configure the Venmo 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 Venmo receiver component displays the recipient's Venmo identifier 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('venmo-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: \"Venmo Account\",\n  showMaskToggle: true,\n  applyEmailMask: true,\n  applyPhoneMask: 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('venmo-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":["\"Receiver\""]},"."]}]},{"$$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"]},". Eye icon is automatically hidden for ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["UserHandle"]}," recipient type."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["applyEmailMask"]},{"$$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"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["recipientType"]}," is ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["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":["applyPhoneMask"]},{"$$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 phone when eye icon is disabled. Only applies when ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["showMaskToggle"]}," is ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["recipientType"]}," is ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Phone"]},". 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 Venmo receiver is read from the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["paypalConfig.payoutConfig.venmoWallet.receiver"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["venmoWallet.recipientType"]}," values provided during SDK initialisation. This component is display-only."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"recipient-types","__idx":4},"children":["Recipient types"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Venmo supports three types of recipient identifiers:"]},{"$$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":"Recipient type"},"children":["Recipient type"]},{"$$mdtype":"Tag","name":"th","attributes":{"align":"left","data-label":"Format"},"children":["Format"]},{"$$mdtype":"Tag","name":"th","attributes":{"align":"left","data-label":"Example"},"children":["Example"]},{"$$mdtype":"Tag","name":"th","attributes":{"align":"left","data-label":"Masking support"},"children":["Masking support"]}]}]},{"$$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":["Email"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Email address"]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["user@example.com"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"Yes","attributes":{},"children":[]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Phone"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Phone number"]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["+1234567890"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"Yes","attributes":{},"children":[]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["UserHandle"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Venmo handle"]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["@username"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"No","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["(always visible)"]}]}]}]}]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"warning"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["recipientType"]}," in the SDK configuration must match the format of the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["receiver"]}," value. For example, if the receiver is an email address, use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["recipientType: \"Email\""]},"."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"masking-behaviour","__idx":5},"children":["Masking behaviour"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The component supports masking for email and phone recipient types. Handles are always displayed in full."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"with-toggle-default","__idx":6},"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 (email/phone only)\n};\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"without-toggle","__idx":7},"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 ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["applyEmailMask"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["applyPhoneMask"]},":"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"// Always masked for email/phone, no toggle\nconst receiverConfig = {\n  showMaskToggle: false,\n  applyEmailMask: true,\n  applyPhoneMask: true\n};\n\n// Always visible, no toggle\nconst receiverConfig = {\n  showMaskToggle: false,\n  applyEmailMask: false,\n  applyPhoneMask: 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":"Recipient type"},"children":["Recipient type"]},{"$$mdtype":"Tag","name":"th","attributes":{"align":"left","data-label":"showMaskToggle: true"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["showMaskToggle: true"]}]},{"$$mdtype":"Tag","name":"th","attributes":{"align":"left","data-label":"showMaskToggle: false"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["showMaskToggle: false"]}]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Email"]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Eye icon visible. Toggle available."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Controlled by ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["applyEmailMask"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Phone"]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Eye icon visible. Toggle available."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Controlled by ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["applyPhoneMask"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["UserHandle"]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["No eye icon. Always visible."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Always visible."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"styling","__idx":8},"children":["Styling"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"default-styling","__idx":9},"children":["Default styling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Venmo 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":10},"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: \"Venmo Account\",\n  showMaskToggle: true,\n  style: {\n    color: \"#008CFF\",\n    backgroundColor: \"#f0f8ff\",\n    borderColor: \"#008CFF\",\n    borderWidth: \"1px\",\n    borderStyle: \"solid\",\n    borderRadius: \"8px\",\n    padding: \"16px 20px\",\n    fontSize: \"16px\",\n    fontWeight: \"500\"\n  },\n  labelStyle: {\n    color: \"#008CFF\",\n    fontSize: \"12px\",\n    fontWeight: \"600\",\n    textTransform: \"uppercase\",\n    letterSpacing: \"0.5px\"\n  }\n};\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"style-properties","__idx":11},"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":12},"children":["Methods"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"mountcontainerid","__idx":13},"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('venmo-payout-receiver', receiverConfig);\nreceiverComponent.mount('payout-receiver-container');\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"unmount","__idx":14},"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":15},"children":["Examples"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"basic-receiver-display","__idx":16},"children":["Basic receiver display"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A simple implementation showing the Venmo receiver with default masking toggle:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const receiverComponent = pxpCheckoutSdk.create('venmo-payout-receiver', {\n  label: \"Venmo Account\"\n});\nreceiverComponent.mount('payout-receiver-container');\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"receiver-with-venmo-branding","__idx":17},"children":["Receiver with Venmo branding"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["An implementation styled to match Venmo's brand colours:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const receiverConfig = {\n  label: \"Venmo Account\",\n  showMaskToggle: true,\n  style: {\n    color: \"#008CFF\",\n    backgroundColor: \"#ffffff\",\n    borderColor: \"#008CFF\",\n    borderWidth: \"2px\",\n    borderStyle: \"solid\",\n    borderRadius: \"4px\",\n    padding: \"14px 16px\",\n    fontSize: \"16px\",\n    fontWeight: \"500\"\n  },\n  labelStyle: {\n    color: \"#008CFF\",\n    fontSize: \"13px\",\n    fontWeight: \"600\"\n  }\n};\n\nconst receiverComponent = pxpCheckoutSdk.create('venmo-payout-receiver', receiverConfig);\nreceiverComponent.mount('payout-receiver-container');\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"userhandle-display-no-masking","__idx":18},"children":["UserHandle display (no masking)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For Venmo handle recipients, masking is automatically disabled:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"// SDK initialisation with handle\nconst pxpCheckoutSdk = PxpCheckout.initialize({\n  // ... other config\n  paypalConfig: {\n    payoutConfig: {\n      proceedPayoutWithSdk: true,\n      venmoWallet: {\n        receiver: \"@john-doe\",\n        recipientType: \"UserHandle\"\n      }\n    }\n  }\n});\n\nconst receiverConfig = {\n  label: \"Venmo Handle\",\n  style: {\n    color: \"#008CFF\",\n    fontSize: \"18px\",\n    fontWeight: \"600\"\n  }\n};\n\nconst receiverComponent = pxpCheckoutSdk.create('venmo-payout-receiver', receiverConfig);\nreceiverComponent.mount('payout-receiver-container');\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"phone-number-with-masking","__idx":19},"children":["Phone number with masking"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For phone number recipients:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"// SDK initialisation with phone\nconst pxpCheckoutSdk = PxpCheckout.initialize({\n  // ... other config\n  paypalConfig: {\n    payoutConfig: {\n      proceedPayoutWithSdk: true,\n      venmoWallet: {\n        receiver: \"+14155551234\",\n        recipientType: \"Phone\"\n      }\n    }\n  }\n});\n\nconst receiverConfig = {\n  label: \"Venmo Phone\",\n  showMaskToggle: true,\n  style: {\n    backgroundColor: \"#f5f5f5\",\n    padding: \"12px 16px\",\n    borderRadius: \"6px\"\n  }\n};\n\nconst receiverComponent = pxpCheckoutSdk.create('venmo-payout-receiver', receiverConfig);\nreceiverComponent.mount('payout-receiver-container');\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"complete-venmo-payout-flow-example","__idx":20},"children":["Complete Venmo payout flow example"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A full example showing the Venmo 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 initializeVenmoPayoutPage() {\n  const sessionData = await getSessionDataFromBackend();\n  const customerWallet = await getStoredVenmoWallet();\n  \n  const pxpCheckoutSdk = PxpCheckout.initialize({\n    environment: \"test\",\n    session: sessionData,\n    ownerId: \"Unity\",\n    ownerType: \"MerchantGroup\",\n    transactionData: {\n      amount: 75.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        venmoWallet: {\n          receiver: customerWallet.receiver,\n          recipientType: customerWallet.recipientType\n        }\n      }\n    }\n  });\n\n  // Create amount component\n  const amountComponent = pxpCheckoutSdk.create('payout-amount', {\n    label: \"Withdrawal Amount\"\n  });\n\n  // Create Venmo receiver component\n  const receiverComponent = pxpCheckoutSdk.create('venmo-payout-receiver', {\n    label: \"Venmo Account\",\n    showMaskToggle: true,\n    style: {\n      backgroundColor: \"#f0f8ff\",\n      borderColor: \"#008CFF\",\n      borderWidth: \"1px\",\n      borderStyle: \"solid\",\n      borderRadius: \"8px\",\n      padding: \"14px 16px\"\n    },\n    labelStyle: {\n      color: \"#008CFF\",\n      fontWeight: \"600\"\n    }\n  });\n\n  // Create submission component\n  const submitComponent = pxpCheckoutSdk.create('payout-submission', {\n    recipientWallet: \"Venmo\"\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\ninitializeVenmoPayoutPage();\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 Venmo</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":"Venmo receiver component","id":"venmo-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":"Recipient types","id":"recipient-types","depth":2},{"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 Venmo branding","id":"receiver-with-venmo-branding","depth":3},{"value":"UserHandle display (no masking)","id":"userhandle-display-no-masking","depth":3},{"value":"Phone number with masking","id":"phone-number-with-masking","depth":3},{"value":"Complete Venmo payout flow example","id":"complete-venmo-payout-flow-example","depth":3}],"frontmatter":{"seo":{"title":"Venmo receiver component"}},"lastModified":"2026-02-26T12:14:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/guides/checkout/components/web/paypal/payouts/venmo-receiver-component","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}