Skip to content

Testing

Test your payout integration end-to-end before going live.

Before you start

  • Review How it works so you understand flows and payout modes.

Step 1: Configure sandbox environment

Use the test environment and sandbox credentials for both SDK and backend.

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

const pxpCheckoutSdk = PxpCheckout.initialize({
  environment: "test",  // Use test environment
  session: sessionData,
  ownerId: "Unity",
  ownerType: "MerchantGroup",
  transactionData: {
    amount: 100,
    currency: "USD" as CurrencyType,
    entryType: "Ecom",
    intent: {
      paypal: IntentType.Payout
    },
    merchantTransactionId: crypto.randomUUID(),
    merchantTransactionDate: () => new Date().toISOString()
  },
  paypalConfig: {
    payoutConfig: {
      proceedPayoutWithSdk: true
      // Add paypalWallet / venmoWallet for withdrawal flow tests
    }
  }
});
const config = {
  paypal: {
    clientId: process.env.PAYPAL_SANDBOX_CLIENT_ID,
    secret: process.env.PAYPAL_SANDBOX_SECRET,
    apiBaseUrl: 'https://api-m.sandbox.paypal.com'
  },
  unity: {
    apiBaseUrl: 'https://api-services-test.pxp.io',
    clientId: process.env.UNITY_TEST_CLIENT_ID,
    tokenId: process.env.UNITY_TEST_TOKEN_ID,
    tokenValue: process.env.UNITY_TEST_TOKEN_VALUE
  }
};

Step 2: Test core happy paths

Focus first on the main customer journeys.

Withdrawal flow (returning customers – PayPal)

  • Initialise the SDK with a stored PayPal wallet (paypalWallet.email and optional payerId).
  • Render payout-amount, paypal-payout-receiver, and payout-submission.
  • Verify:
    • Amount and receiver are correctly displayed (including masking behaviour).
    • Clicking Withdraw with PayPal triggers onPrePayoutSubmit.
    • Successful approval results in onPostPayout being called and the sandbox recipient balance increasing.

Withdrawal flow (returning customers – Venmo)

  • Initialise the SDK with a Venmo wallet (venmoWallet.receiver and recipientType).
  • Render venmo-payout-receiver and payout-submission with recipientWallet: "Venmo".
  • Verify the Venmo receiver displays correctly and a payout in USD completes successfully.

SDK-initiated vs merchant-initiated

  • With proceedPayoutWithSdk: true, confirm the SDK executes the payout after onPrePayoutSubmit approves and calls onPostPayout with a transaction ID.
  • With proceedPayoutWithSdk: false, confirm:
    • SDK validates inputs and calls onPrePayoutSubmit.
    • Your backend receives the necessary data and successfully calls the payout API.

Minimal test checklist

Use this as a lightweight “must-have” list before going live:

AreaScenarioWhat to verify
Withdrawal flow (PayPal)Returning customer payoutStored PayPal wallet is shown (including masking), onPrePayoutSubmit and onPostPayout fire, and sandbox balance increases.
Withdrawal flow (Venmo)Returning customer Venmo payout (USD)Venmo receiver displays correctly, payout in USD succeeds, and Venmo-specific validation works.
Validation & errorsInvalid amount / email / Venmo phoneonError receives the right ErrorCode, and the UI shows clear, user-friendly messages.
IntegrationSDK- vs merchant-initiated payoutsproceedPayoutWithSdk modes behave as expected, and backend payout execution works when SDK is not executing the payout.

Step 3: Test validation and error handling

Use targeted negative tests rather than exhaustively covering every error code.

  • Amounts
    • Negative or zero amount → expect amount validation error (see Data validation).
  • PayPal receiver
    • Invalid email format or missing payer ID → expect PayPal receiver errors.
  • Venmo
    • Non-USD currency with Venmo wallet → expect Venmo currency error.
    • Invalid phone format when recipientType: "Phone" → expect phone validation error.
  • Configuration
    • Missing recipientWallet or wallet details → expect payout configuration errors.

In each case, verify that:

  • onError is called with the appropriate ErrorCode and message.
  • Your UI maps technical errors to clear, user-friendly messages.

Step 4: Test UI and events

Verify that core components render and behave as expected:

  • payout-amount: correct amount, currency, and custom label/styling.
  • paypal-payout-receiver / venmo-payout-receiver: masking toggle, labels, and styles.
  • payout-submission:
    • Button states (default, hover, disabled, loading).
    • Event callbacks: onClick, onPrePayoutSubmit, onPostPayout, onError.

For detailed callback payloads, see Events.

Step 5: Moving to production

Once your sandbox tests pass:

  1. Switch environments

    const pxpCheckoutSdk = PxpCheckout.initialize({
      environment: "production",
      // ... rest of config
    });
  2. Update backend credentials to use live PayPal and Unity endpoints and secrets.

  3. Run a small live test (for example, a $1 payout to your own PayPal account) and confirm funds, reporting, and reconciliation.

  4. Enable monitoring (error tracking, alerts on payout failures, webhook monitoring) and roll out gradually if needed.

If you hit issues during testing, see Troubleshooting and Data validation for common problems and error codes.