{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["sub-heading","admonition","br","details","required"]},"type":"markdown"},"seo":{"title":"Events","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":"events","__idx":0},"children":["Events"]},{"$$mdtype":"Tag","name":"SubHeading","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Implement callbacks to customise your PayPal and Venmo payout flow for Web."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"overview","__idx":1},"children":["Overview"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Components emit events based on user interaction or validation. You can use these to implement callback functions, which allow you to inject your own business logic and user experience customisations into the payout flow at critical moments. They ensure that while the SDK handles the complex technical aspects of payout processing, you retain full control over the customer experience and can seamlessly integrate payouts into your broader business workflows and systems."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Callbacks enable you to:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Validate business rules before payouts proceed."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Display custom error, failure, or success messages."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Tailor user interfaces to match your brand's look and feel."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Integrate with your own systems for fraud detection or compliance checks."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Control exactly how your customers experience both successful and failed payouts."]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Store customer wallet details for future payouts."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Implement merchant-initiated payout flows with custom approval logic."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"available-callbacks","__idx":2},"children":["Available callbacks"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["These callbacks are available on the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["payout-submission"]}," component, used for returning customers with stored wallet details."]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Only the submission components (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["payout-submission"]},") supports event callbacks. The display components (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["payout-amount"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["paypal-payout-receiver"]},", and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["venmo-payout-receiver"]},") are configuration-only and don't emit events."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"onclick","__idx":3},"children":["onClick"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This callback is triggered when the customer clicks the withdrawal button, before any validation occurs."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can use it to:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Track button click analytics."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Show loading indicators."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Perform pre-validation checks."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"example-implementation","__idx":4},"children":["Example implementation"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const submissionComponent = pxpCheckoutSdk.create(\"payout-submission\", {\n  recipientWallet: \"Paypal\",\n  onClick: (event) => {\n    console.log('Withdrawal button clicked');\n    \n    // Track button click\n    trackEvent('payout-button-clicked', {\n      walletType: 'paypal',\n      timestamp: new Date().toISOString()\n    });\n    \n    // Show loading indicator\n    showLoadingState();\n  }\n});\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"onprepayoutsubmit","__idx":5},"children":["onPrePayoutSubmit"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This callback is triggered after the customer clicks the withdrawal button and validation passes. The merchant should show their own approval modal/UI and return the approval status."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can use it to:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Display a confirmation dialog before proceeding."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Perform final validation before payout execution."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Check compliance requirements."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Verify sufficient balance."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Add a note to the payout."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"return-value","__idx":6},"children":["Return value"]},{"$$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":["isApproved"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["boolean"]}," ",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]}," ",{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Whether to proceed with the payout."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["note"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Optional. A note to include with the payout (max 4000 characters)."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"example-implementation-1","__idx":7},"children":["Example implementation"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const submissionComponent = pxpCheckoutSdk.create(\"payout-submission\", {\n  recipientWallet: \"Paypal\",\n  onPrePayoutSubmit: async () => {\n    console.log('Pre-payout submission triggered');\n    \n    try {\n      // Show confirmation modal\n      const confirmation = await showConfirmationModal({\n        title: 'Confirm Withdrawal',\n        message: `Are you sure you want to withdraw ${amount} ${currency}?`\n      });\n      \n      if (!confirmation.confirmed) {\n        return { isApproved: false };\n      }\n      \n      // Check withdrawal limits\n      const limitsCheck = await checkWithdrawalLimits({\n        customerId: getCurrentCustomerId(),\n        amount: amount,\n        currency: currency\n      });\n      \n      if (!limitsCheck.allowed) {\n        showMessage(`Withdrawal limit exceeded. Maximum: ${limitsCheck.maxAmount} ${currency}`, 'error');\n        return { isApproved: false };\n      }\n      \n      // Verify sufficient balance\n      const balanceCheck = await verifyBalance({ amount, currency });\n      \n      if (!balanceCheck.sufficient) {\n        showMessage('Insufficient funds for this withdrawal.', 'error');\n        return { isApproved: false };\n      }\n      \n      // Approve with optional note\n      return { \n        isApproved: true,\n        note: 'Customer withdrawal request'\n      };\n      \n    } catch (error) {\n      console.error('Pre-payout check failed:', error);\n      showMessage('Unable to process withdrawal. Please try again.', 'error');\n      return { isApproved: false };\n    }\n  }\n});\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"onpostpayout","__idx":8},"children":["onPostPayout"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This callback is triggered when the payout is successfully processed."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can use it to:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Display success confirmation to the customer."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Update your internal records."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Send confirmation notifications."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Redirect to a success page."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"event-data","__idx":9},"children":["Event data"]},{"$$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":{"data-label":"Parameter"},"children":["Parameter"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["result"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["object"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The payout transaction result from PXP."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"example-implementation-2","__idx":10},"children":["Example implementation"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const submissionComponent = pxpCheckoutSdk.create(\"payout-submission\", {\n  recipientWallet: \"Paypal\",\n  onPostPayout: async (result) => {\n    console.log('Payout successful:', result);\n    \n    // Update customer balance in your system\n    await updateCustomerBalance({\n      customerId: getCurrentCustomerId(),\n      amount: -result.amount,\n      currency: result.currency,\n      transactionId: result.transactionId,\n      type: 'withdrawal'\n    });\n    \n    // Store transaction record\n    await storeTransaction({\n      pxpTransactionId: result.transactionId,\n      amount: result.amount,\n      currency: result.currency,\n      status: result.status,\n      customerId: getCurrentCustomerId()\n    });\n    \n    // Send confirmation email\n    await sendPayoutConfirmationEmail({\n      email: getCustomerEmail(),\n      amount: result.amount,\n      currency: result.currency,\n      transactionId: result.transactionId\n    });\n    \n    // Track successful payout\n    trackEvent('payout-completed', {\n      transactionId: result.transactionId,\n      amount: result.amount,\n      currency: result.currency,\n      timestamp: new Date().toISOString()\n    });\n    \n    // Show success message\n    showMessage(`Withdrawal of ${result.amount} ${result.currency} processed successfully!`, 'success');\n    \n    // Redirect to success page\n    setTimeout(() => {\n      window.location.href = `/payout-success?txn=${result.transactionId}`;\n    }, 2000);\n  }\n});\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"onerror","__idx":11},"children":["onError"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This callback is triggered when an error occurs during payout processing."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can use it to:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Display user-friendly error messages."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Log errors for debugging."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Offer retry options."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Show alternative payout methods."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"event-data-1","__idx":12},"children":["Event data"]},{"$$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":{"data-label":"Parameter"},"children":["Parameter"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["error"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["object"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The error object containing details about what went wrong."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"example-implementation-3","__idx":13},"children":["Example implementation"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const submissionComponent = pxpCheckoutSdk.create(\"payout-submission\", {\n  recipientWallet: \"Paypal\",\n  onError: (error) => {\n    console.error('Payout error:', error);\n    \n    // Log error for debugging\n    logError('payout-error', {\n      message: error.message,\n      ErrorCode: error.ErrorCode,\n      timestamp: new Date().toISOString(),\n      userAgent: navigator.userAgent\n    });\n    \n    // Display user-friendly message based on error\n    showMessage('Withdrawal failed. Please try again or contact support.', 'error');\n    \n    // Track error\n    trackEvent('payout-failed', {\n      errorCode: error.ErrorCode,\n      errorMessage: error.message,\n      timestamp: new Date().toISOString()\n    });\n  }\n});\n","lang":"typescript"},"children":[]}]},"headings":[{"value":"Events","id":"events","depth":1},{"value":"Overview","id":"overview","depth":2},{"value":"Available callbacks","id":"available-callbacks","depth":2},{"value":"onClick","id":"onclick","depth":3},{"value":"Example implementation","id":"example-implementation","depth":4},{"value":"onPrePayoutSubmit","id":"onprepayoutsubmit","depth":3},{"value":"Return value","id":"return-value","depth":4},{"value":"Example implementation","id":"example-implementation-1","depth":4},{"value":"onPostPayout","id":"onpostpayout","depth":3},{"value":"Event data","id":"event-data","depth":4},{"value":"Example implementation","id":"example-implementation-2","depth":4},{"value":"onError","id":"onerror","depth":3},{"value":"Event data","id":"event-data-1","depth":4},{"value":"Example implementation","id":"example-implementation-3","depth":4}],"frontmatter":{"seo":{"title":"Events"}},"lastModified":"2026-04-15T15:24:26.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/guides/checkout/components/web/paypal/payouts/events","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}