# 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.


```typescript
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:


```typescript
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:


```typescript
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`:


```typescript
// 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:


```typescript
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:


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

### unmount()

Removes the component from the DOM:


```typescript
receiverComponent.unmount();
```

## Examples

### Basic receiver display

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


```typescript
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:


```typescript
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:


```typescript
// 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:


```typescript
// 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:


```typescript
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:


```html
<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>
```