PayPal receiver component

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

Basic usage

Minimal configuration

The PayPal receiver component displays the recipient's PayPal email address from the SDK configuration. No additional configuration is required for basic usage.

const receiverComponent = pxpCheckoutSdk.create('paypal-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: "PayPal Account",
  showMaskToggle: true,
  applyMask: 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('paypal-payout-receiver', receiverConfig);
receiverComponent.mount('payout-receiver-container');

Property	Description
`label` string	The custom text for the receiver label. Defaults to `"PayPal Email"`.
`showMaskToggle` boolean	Whether to display the eye icon for show/hide functionality. Defaults to `true`.
`applyMask` boolean	Whether to mask the email when eye icon is disabled. Only applies when `showMaskToggle` is `false`. Defaults to `true`.
`style` CSSProperties	CSS styles applied to the receiver value element.
`labelStyle` CSSProperties	CSS styles applied to the label element.

The PayPal email is read from the paypalConfig.payoutConfig.paypalWallet.email value provided during SDK initialisation. This component is display-only.

Masking behaviour

The component supports email masking for privacy protection. By default, emails are displayed in a masked format (e.g., c***@example.com).

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
};

Without toggle

When showMaskToggle is false, the masking is controlled by the applyMask property:

// Always masked, no toggle
const receiverConfig = {
  showMaskToggle: false,
  applyMask: true
};

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

Configuration	Behaviour
`showMaskToggle: true`	Eye icon visible. User can toggle masking. Starts masked.
`showMaskToggle: false, applyMask: true`	No eye icon. Email always masked.
`showMaskToggle: false, applyMask: false`	No eye icon. Email always visible.

Styling

Default styling

The PayPal 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: "Receiving Account",
  showMaskToggle: true,
  style: {
    color: "#003087",
    backgroundColor: "#f0f4f8",
    borderColor: "#003087",
    borderWidth: "1px",
    borderStyle: "solid",
    borderRadius: "8px",
    padding: "16px 20px",
    fontSize: "16px",
    fontWeight: "500"
  },
  labelStyle: {
    color: "#003087",
    fontSize: "12px",
    fontWeight: "600",
    textTransform: "uppercase",
    letterSpacing: "0.5px"
  }
};

Property	Description
`style` CSSProperties	Styling for the receiver value container.
`labelStyle` CSSProperties	Styling for the label text above the receiver.

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('paypal-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 PayPal email with default masking toggle:

const receiverComponent = pxpCheckoutSdk.create('paypal-payout-receiver', {
  label: "PayPal Email"
});
receiverComponent.mount('payout-receiver-container');

Receiver with PayPal branding

An implementation styled to match PayPal's brand colours:

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

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

Always visible receiver (no masking)

For use cases where the email should always be visible:

const receiverConfig = {
  label: "Payout Destination",
  showMaskToggle: false,
  applyMask: false,
  style: {
    color: "#333333",
    backgroundColor: "#f9f9f9",
    padding: "12px 16px",
    fontSize: "15px"
  }
};

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

Always masked receiver (maximum privacy)

For sensitive contexts where the email should always be partially hidden:

const receiverConfig = {
  label: "Verified PayPal Account",
  showMaskToggle: false,
  applyMask: true,
  style: {
    color: "#666666",
    backgroundColor: "#f5f5f5",
    padding: "12px 16px",
    fontSize: "15px",
    fontStyle: "italic"
  }
};

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

Complete payout flow example

A full example showing the PayPal receiver component in context:

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

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

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

  // Create PayPal receiver component
  const receiverComponent = pxpCheckoutSdk.create('paypal-payout-receiver', {
    label: "PayPal Account",
    showMaskToggle: true,
    style: {
      backgroundColor: "#f8f9fa",
      borderRadius: "8px",
      padding: "14px 16px"
    }
  });

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

  // 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();
  });
}

initializePayoutPage();

The corresponding HTML structure:

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