Venmo receiver component

Learn how to configure the Venmo payout receiver component for Web.

Basic usage

Minimal configuration

The Venmo receiver component displays the recipient's Venmo identifier from the SDK configuration. No additional configuration is required for basic usage.

const receiverComponent = pxpCheckoutSdk.create('venmo-payout-receiver');
receiverComponent.mount('payout-receiver-container');

Advanced configuration

For more control over display and masking behaviour, you can configure custom options:

const receiverConfig = {
  label: "Venmo Account",
  showMaskToggle: true,
  applyEmailMask: true,
  applyPhoneMask: true,
  style: {
    color: "#333333",
    backgroundColor: "#f5f5f5",
    borderColor: "#cccccc",
    borderRadius: "4px",
    padding: "12px 16px",
    fontSize: "16px"
  },
  labelStyle: {
    color: "#666666",
    fontSize: "14px",
    fontWeight: "500",
    marginBottom: "8px"
  }
};

const receiverComponent = pxpCheckoutSdk.create('venmo-payout-receiver', receiverConfig);
receiverComponent.mount('payout-receiver-container');

Property	Description
`label` string	The custom text for the receiver label. Defaults to `"Receiver"`.
`showMaskToggle` boolean	Whether to display the eye icon for show/hide functionality. Defaults to `true`. Eye icon is automatically hidden for `UserHandle` recipient type.
`applyEmailMask` boolean	Whether to mask the email when eye icon is disabled. Only applies when `showMaskToggle` is `false` and `recipientType` is `Email`. Defaults to `true`.
`applyPhoneMask` boolean	Whether to mask the phone when eye icon is disabled. Only applies when `showMaskToggle` is `false` and `recipientType` is `Phone`. Defaults to `true`.
`style` CSSProperties	CSS styles applied to the receiver value element.
`labelStyle` CSSProperties	CSS styles applied to the label element.

The Venmo receiver is read from the paypalConfig.payoutConfig.venmoWallet.receiver and venmoWallet.recipientType values provided during SDK initialisation. This component is display-only.

Recipient types

Venmo supports three types of recipient identifiers:

Recipient type	Format	Example	Masking support
`Email`	Email address	`user@example.com`
`Phone`	Phone number	`+1234567890`
`UserHandle`	Venmo handle	`@username`	(always visible)

The recipientType in the SDK configuration must match the format of the receiver value. For example, if the receiver is an email address, use recipientType: "Email".

Masking behaviour

The component supports masking for email and phone recipient types. Handles are always displayed in full.

With toggle (default)

When showMaskToggle is true (default), an eye icon is displayed allowing users to toggle between masked and unmasked views:

const receiverConfig = {
  showMaskToggle: true  // Shows eye icon, starts masked (email/phone only)
};

Without toggle

When showMaskToggle is false, the masking is controlled by applyEmailMask and applyPhoneMask:

// Always masked for email/phone, no toggle
const receiverConfig = {
  showMaskToggle: false,
  applyEmailMask: true,
  applyPhoneMask: true
};

// Always visible, no toggle
const receiverConfig = {
  showMaskToggle: false,
  applyEmailMask: false,
  applyPhoneMask: false
};

Recipient type	`showMaskToggle: true`	`showMaskToggle: false`
Email	Eye icon visible. Toggle available.	Controlled by `applyEmailMask`.
Phone	Eye icon visible. Toggle available.	Controlled by `applyPhoneMask`.
UserHandle	No eye icon. Always visible.	Always visible.

Styling

Default styling

The Venmo receiver component renders with minimal default styling, allowing it to adapt to your page's existing styles.

Custom styling

You can customise both the label and the receiver display:

const receiverConfig = {
  label: "Venmo Account",
  showMaskToggle: true,
  style: {
    color: "#008CFF",
    backgroundColor: "#f0f8ff",
    borderColor: "#008CFF",
    borderWidth: "1px",
    borderStyle: "solid",
    borderRadius: "8px",
    padding: "16px 20px",
    fontSize: "16px",
    fontWeight: "500"
  },
  labelStyle: {
    color: "#008CFF",
    fontSize: "12px",
    fontWeight: "600",
    textTransform: "uppercase",
    letterSpacing: "0.5px"
  }
};

Style properties

The style and labelStyle objects accept standard CSS properties:

Property	Description	Example
`color` string	The text colour.	`"#333333"`
`backgroundColor` string	The background colour.	`"#f5f5f5"`
`borderColor` string	The border colour.	`"#cccccc"`
`borderWidth` string	The border width.	`"1px"`
`borderStyle` string	The border style.	`"solid"`
`borderRadius` string	The corner radius.	`"8px"`
`padding` string	The inner padding.	`"16px 20px"`
`fontSize` string	The font size.	`"16px"`
`fontWeight` string \| number	The font weight.	`"500"`
`fontFamily` string	The font family.	`"Arial, sans-serif"`

Methods

mount(containerId)

Renders the receiver component in the specified container:

const receiverComponent = pxpCheckoutSdk.create('venmo-payout-receiver', receiverConfig);
receiverComponent.mount('payout-receiver-container');

unmount()

Removes the component from the DOM:

receiverComponent.unmount();

Examples

Basic receiver display

A simple implementation showing the Venmo receiver with default masking toggle:

const receiverComponent = pxpCheckoutSdk.create('venmo-payout-receiver', {
  label: "Venmo Account"
});
receiverComponent.mount('payout-receiver-container');

Receiver with Venmo branding

An implementation styled to match Venmo's brand colours:

const receiverConfig = {
  label: "Venmo Account",
  showMaskToggle: true,
  style: {
    color: "#008CFF",
    backgroundColor: "#ffffff",
    borderColor: "#008CFF",
    borderWidth: "2px",
    borderStyle: "solid",
    borderRadius: "4px",
    padding: "14px 16px",
    fontSize: "16px",
    fontWeight: "500"
  },
  labelStyle: {
    color: "#008CFF",
    fontSize: "13px",
    fontWeight: "600"
  }
};

const receiverComponent = pxpCheckoutSdk.create('venmo-payout-receiver', receiverConfig);
receiverComponent.mount('payout-receiver-container');

UserHandle display (no masking)

For Venmo handle recipients, masking is automatically disabled:

// SDK initialisation with handle
const pxpCheckoutSdk = PxpCheckout.initialize({
  // ... other config
  paypalConfig: {
    payoutConfig: {
      proceedPayoutWithSdk: true,
      venmoWallet: {
        receiver: "@john-doe",
        recipientType: "UserHandle"
      }
    }
  }
});

const receiverConfig = {
  label: "Venmo Handle",
  style: {
    color: "#008CFF",
    fontSize: "18px",
    fontWeight: "600"
  }
};

const receiverComponent = pxpCheckoutSdk.create('venmo-payout-receiver', receiverConfig);
receiverComponent.mount('payout-receiver-container');

Phone number with masking

For phone number recipients:

// SDK initialisation with phone
const pxpCheckoutSdk = PxpCheckout.initialize({
  // ... other config
  paypalConfig: {
    payoutConfig: {
      proceedPayoutWithSdk: true,
      venmoWallet: {
        receiver: "+14155551234",
        recipientType: "Phone"
      }
    }
  }
});

const receiverConfig = {
  label: "Venmo Phone",
  showMaskToggle: true,
  style: {
    backgroundColor: "#f5f5f5",
    padding: "12px 16px",
    borderRadius: "6px"
  }
};

const receiverComponent = pxpCheckoutSdk.create('venmo-payout-receiver', receiverConfig);
receiverComponent.mount('payout-receiver-container');

Complete Venmo payout flow example

A full example showing the Venmo receiver component in context:

import { PxpCheckout, IntentType, CurrencyType } from "@pxpio/web-components-sdk";

async function initializeVenmoPayoutPage() {
  const sessionData = await getSessionDataFromBackend();
  const customerWallet = await getStoredVenmoWallet();
  
  const pxpCheckoutSdk = PxpCheckout.initialize({
    environment: "test",
    session: sessionData,
    ownerId: "Unity",
    ownerType: "MerchantGroup",
    transactionData: {
      amount: 75.00,
      currency: "USD" as CurrencyType,
      entryType: "Ecom",
      intent: { paypal: IntentType.Payout },
      merchantTransactionId: crypto.randomUUID(),
      merchantTransactionDate: () => new Date().toISOString()
    },
    paypalConfig: {
      payoutConfig: {
        proceedPayoutWithSdk: true,
        venmoWallet: {
          receiver: customerWallet.receiver,
          recipientType: customerWallet.recipientType
        }
      }
    }
  });

  // Create amount component
  const amountComponent = pxpCheckoutSdk.create('payout-amount', {
    label: "Withdrawal Amount"
  });

  // Create Venmo receiver component
  const receiverComponent = pxpCheckoutSdk.create('venmo-payout-receiver', {
    label: "Venmo Account",
    showMaskToggle: true,
    style: {
      backgroundColor: "#f0f8ff",
      borderColor: "#008CFF",
      borderWidth: "1px",
      borderStyle: "solid",
      borderRadius: "8px",
      padding: "14px 16px"
    },
    labelStyle: {
      color: "#008CFF",
      fontWeight: "600"
    }
  });

  // Create submission component
  const submitComponent = pxpCheckoutSdk.create('payout-submission', {
    recipientWallet: "Venmo"
  });

  // Mount all components
  amountComponent.mount('payout-amount-container');
  receiverComponent.mount('payout-receiver-container');
  submitComponent.mount('payout-submit-container');

  // Cleanup on page unload
  window.addEventListener('beforeunload', () => {
    amountComponent.unmount();
    receiverComponent.unmount();
    submitComponent.unmount();
  });
}

initializeVenmoPayoutPage();

The corresponding HTML structure:

<div class="payout-page">
  <h1>Withdraw to Venmo</h1>
  <div id="payout-amount-container"></div>
  <div id="payout-receiver-container"></div>
  <div id="payout-submit-container"></div>
</div>