{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["sub-heading","br","details","required","admonition","tabs","tab"]},"type":"markdown"},"seo":{"title":"Submission component","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":"submission-component","__idx":0},"children":["Submission component"]},{"$$mdtype":"Tag","name":"SubHeading","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Learn how to configure the payout submission component for Web."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"basic-usage","__idx":1},"children":["Basic usage"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"minimal-configuration","__idx":2},"children":["Minimal configuration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The payout submission component renders a \"Withdraw with PayPal\" or \"Withdraw with Venmo\" button that executes the payout. At minimum, you must specify the recipient wallet type."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const submitComponent = pxpCheckoutSdk.create('payout-submission', {\n recipientWallet: \"Paypal\"\n});\nsubmitComponent.mount('payout-submit-container');\n","lang":"typescript"},"children":[]},{"$$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":["recipientWallet"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string (enum)"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The wallet type for the payout. Determines button styling and payout destination.",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},"Possible values:",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PayPal"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Venmo"]}]}]}]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"advanced-configuration","__idx":3},"children":["Advanced configuration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For more control over the button's appearance and behaviour, you can configure custom options:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const submitConfig = {\n recipientWallet: \"Paypal\",\n submitText: \"Confirm withdrawal\",\n class: \"custom-payout-button\",\n \n styles: {\n base: {\n backgroundColor: \"#FFC438\",\n color: \"#09090C\",\n borderRadius: \"8px\",\n padding: \"14px 28px\",\n fontSize: \"16px\",\n fontWeight: \"600\"\n },\n hover: {\n backgroundColor: \"#F7B731\"\n },\n active: {\n opacity: \"0.7\"\n },\n focus: {\n outline: \"2px solid #0070CC\",\n outlineOffset: \"2px\"\n },\n disabled: {\n opacity: \"0.5\",\n cursor: \"not-allowed\"\n },\n loading: {\n opacity: \"0.8\"\n }\n },\n \n brandingImageConfig: {\n width: \"60px\",\n height: \"auto\"\n },\n \n onClick: (event) => {\n console.log(\"Withdraw button clicked\");\n },\n \n onPrePayoutSubmit: async () => {\n const approved = await showConfirmationModal();\n return { isApproved: approved, note: \"Withdrawal request\" };\n },\n \n onPostPayout: (result) => {\n console.log(\"Payout successful:\", result);\n showSuccessMessage(\"Withdrawal completed!\");\n },\n \n onError: (error) => {\n console.error(\"Payout failed:\", error);\n showErrorMessage(\"Withdrawal failed. Please try again.\");\n }\n};\n\nconst submitComponent = pxpCheckoutSdk.create('payout-submission', submitConfig);\nsubmitComponent.mount('payout-submit-container');\n","lang":"typescript"},"children":[]},{"$$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":["recipientWallet"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string (enum)"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Required","attributes":{},"children":[]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The wallet type for the payout.",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},"Possible values:",{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PayPal"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Venmo"]}]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["submitText"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Custom button text. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"Withdraw with {recipientWallet}\""]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["class"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Custom CSS class for the button."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["object"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Button styles for different states."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["brandingImageConfig"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["object"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Configuration for the wallet logo dimensions."]}]}]}]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The payout execution mode (SDK-managed vs merchant-managed) is configured at SDK initialisation via ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["paypalConfig.payoutConfig.proceedPayoutWithSdk"]},", not at component level."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"styling","__idx":4},"children":["Styling"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"default-styling","__idx":5},"children":["Default styling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The submission component renders with PayPal or Venmo branded styling by default."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"PayPal defaults","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"{\n base: { \n borderRadius: '3px',\n backgroundColor: '#FFC438', \n padding: '12px 24px',\n color: '#09090C', \n border: 'none',\n fontFamily: 'Roboto, sans-serif',\n fontSize: '16px', \n lineHeight: '18px', \n fontWeight: '500' \n },\n hover: { backgroundColor: '#F7B731' },\n disabled: { opacity: '0.5', cursor: 'not-allowed' },\n loading: { }\n}\n","lang":"typescript"},"children":[]}]},{"$$mdtype":"Tag","name":"TabItemFragment","attributes":{"label":"Venmo defaults","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"{\n base: { \n borderRadius: '3px',\n backgroundColor: '#008CFF', \n padding: '12px 24px',\n color: '#FFFFFF', \n border: 'none',\n fontFamily: 'Roboto, sans-serif',\n fontSize: '16px', \n lineHeight: '18px', \n fontWeight: '500' \n },\n hover: { backgroundColor: '#0070CC' },\n disabled: { opacity: '0.5', cursor: 'not-allowed' },\n loading: { }\n}\n","lang":"typescript"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The component doesn't apply default ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["active"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["focus"]}," styles. If you need these states styled, provide custom values in the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles"]}," configuration."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"custom-styling","__idx":6},"children":["Custom styling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can override the default appearance by providing custom styles for each button state:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const submitConfig = {\n recipientWallet: \"Paypal\",\n styles: {\n base: {\n backgroundColor: \"#003087\",\n color: \"#ffffff\",\n borderRadius: \"12px\",\n padding: \"16px 32px\",\n fontSize: \"18px\",\n fontWeight: \"bold\",\n border: \"none\",\n cursor: \"pointer\",\n transition: \"all 0.2s ease\"\n },\n hover: {\n backgroundColor: \"#001f5c\",\n transform: \"translateY(-1px)\",\n boxShadow: \"0 4px 12px rgba(0, 48, 135, 0.3)\"\n },\n active: {\n transform: \"translateY(0)\",\n boxShadow: \"0 2px 6px rgba(0, 48, 135, 0.2)\"\n },\n focus: {\n outline: \"3px solid #0070CC\",\n outlineOffset: \"3px\"\n },\n disabled: {\n backgroundColor: \"#cccccc\",\n color: \"#666666\",\n cursor: \"not-allowed\",\n opacity: \"0.7\"\n },\n loading: {\n backgroundColor: \"#001f5c\",\n opacity: \"0.9\"\n }\n }\n};\n","lang":"typescript"},"children":[]},{"$$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":["styles.base"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CSSProperties"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The normal interactive state. Applied when the button is ready to be clicked."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles.hover"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CSSProperties"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The hover state. Applied when the cursor is over the button."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles.active"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CSSProperties"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The active state. Applied when the button is pressed."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles.focus"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CSSProperties"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The focus state. Applied when the button receives keyboard focus."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles.disabled"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CSSProperties"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The disabled state. Applied during initialisation or when payout isn't available."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles.loading"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CSSProperties"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The loading state. Applied during payout processing."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"branding-image-configuration","__idx":7},"children":["Branding image configuration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Customise the wallet logo dimensions:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const submitConfig = {\n recipientWallet: \"Paypal\",\n brandingImageConfig: {\n width: \"80px\",\n height: \"auto\"\n }\n};\n","lang":"typescript"},"children":[]},{"$$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":["brandingImageConfig.width"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The width of the wallet logo."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["brandingImageConfig.height"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The height of the wallet logo."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"event-handling","__idx":8},"children":["Event handling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The submission component provides event handlers to manage the payout flow:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const submitConfig = {\n recipientWallet: \"Paypal\",\n \n onClick: (event) => { },\n onPrePayoutSubmit: async () => { },\n onPostPayout: (result) => { },\n onError: (error) => { }\n};\n","lang":"typescript"},"children":[]},{"$$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":"Callback"},"children":["Callback"]},{"$$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":["onClick"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["(event: Event) => void"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Called when the button is clicked, before validation."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPrePayoutSubmit"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["() => Promise<{ isApproved: boolean; note?: string }>"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Called after validation, before payout execution. Return ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["{ isApproved: false }"]}," to cancel."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPostPayout"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["(result: any) => void"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Called when the payout completes successfully."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onError"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["(error: any) => void"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Called when an error occurs during payout."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"onprepayoutsubmit","__idx":9},"children":["onPrePayoutSubmit"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This callback allows you to show a confirmation dialog and optionally include a note with the payout:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"onPrePayoutSubmit: async () => {\n // Show custom confirmation modal\n const userConfirmed = await showConfirmationModal({\n title: \"Confirm Withdrawal\",\n message: `Withdraw $${amount} to your PayPal account?`,\n confirmText: \"Confirm\",\n cancelText: \"Cancel\"\n });\n \n if (!userConfirmed) {\n return { isApproved: false };\n }\n \n return { \n isApproved: true,\n note: \"Withdrawal initiated by customer\" // Optional note (max 4000 chars)\n };\n}\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["note"]}," field is optional and has a maximum length of 4000 characters. It will be included with the payout transaction for reference."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"methods","__idx":10},"children":["Methods"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"mountcontainerid","__idx":11},"children":["mount(containerId)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Renders the submission button in the specified container:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const submitComponent = pxpCheckoutSdk.create('payout-submission', submitConfig);\nsubmitComponent.mount('payout-submit-container');\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"unmount","__idx":12},"children":["unmount()"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Removes the component from the DOM:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"submitComponent.unmount();\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"examples","__idx":13},"children":["Examples"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"basic-paypal-submission","__idx":14},"children":["Basic PayPal submission"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A simple implementation for PayPal payouts:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const submitComponent = pxpCheckoutSdk.create('payout-submission', {\n recipientWallet: \"Paypal\",\n onPostPayout: (result) => {\n window.location.href = `/success?txn=${result.transactionId}`;\n },\n onError: (error) => {\n alert(\"Withdrawal failed. Please try again.\");\n }\n});\nsubmitComponent.mount('payout-submit-container');\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"venmo-submission-with-custom-styling","__idx":15},"children":["Venmo submission with custom styling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["An implementation styled to match Venmo branding:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const submitConfig = {\n recipientWallet: \"Venmo\",\n submitText: \"Get paid with Venmo\",\n styles: {\n base: {\n backgroundColor: \"#008CFF\",\n color: \"#ffffff\",\n borderRadius: \"24px\",\n padding: \"14px 28px\",\n fontSize: \"16px\",\n fontWeight: \"600\",\n border: \"none\"\n },\n hover: {\n backgroundColor: \"#0070CC\"\n }\n },\n onPostPayout: (result) => {\n showSuccessMessage(\"Venmo payout successful!\");\n }\n};\n\nconst submitComponent = pxpCheckoutSdk.create('payout-submission', submitConfig);\nsubmitComponent.mount('payout-submit-container');\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"submission-with-confirmation-dialog","__idx":16},"children":["Submission with confirmation dialog"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["An implementation with a custom approval flow:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const submitConfig = {\n recipientWallet: \"Paypal\",\n submitText: \"Withdraw Funds\",\n \n onClick: (event) => {\n console.log(\"User clicked withdraw button\");\n trackEvent(\"payout_button_clicked\");\n },\n \n onPrePayoutSubmit: async () => {\n // Perform validation\n const balance = await checkUserBalance();\n if (balance < payoutAmount) {\n showError(\"Insufficient balance\");\n return { isApproved: false };\n }\n \n // Show confirmation dialog\n const confirmed = await showModal({\n title: \"Confirm Withdrawal\",\n body: `\n Amount: $${payoutAmount}\n Destination: ${userPaypalEmail}\n Processing time: 1-2 business days\n `,\n confirmButton: \"Confirm Withdrawal\",\n cancelButton: \"Cancel\"\n });\n \n if (!confirmed) {\n return { isApproved: false };\n }\n \n return { \n isApproved: true,\n note: `Withdrawal request for user ${userId}`\n };\n },\n \n onPostPayout: (result) => {\n // Update UI\n showSuccessMessage(\"Withdrawal successful!\");\n \n // Track analytics\n trackEvent(\"payout_completed\", {\n transactionId: result.transactionId,\n amount: payoutAmount\n });\n \n // Redirect after delay\n setTimeout(() => {\n window.location.href = `/account/transactions`;\n }, 2000);\n },\n \n onError: (error) => {\n console.error(\"Payout error:\", error);\n showErrorMessage(\"Withdrawal failed. Please try again.\");\n trackEvent(\"payout_failed\", { error: error.message });\n }\n};\n\nconst submitComponent = pxpCheckoutSdk.create('payout-submission', submitConfig);\nsubmitComponent.mount('payout-submit-container');\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"complete-payout-page","__idx":17},"children":["Complete payout page"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A full example showing the submission component in context:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"import { PxpCheckout, IntentType, CurrencyType } from \"@pxpio/web-components-sdk\";\n\nasync function initializePayoutPage() {\n const sessionData = await getSessionDataFromBackend();\n const customerWallet = await getStoredCustomerWallet();\n const payoutAmount = 150.00;\n \n const pxpCheckoutSdk = PxpCheckout.initialize({\n environment: \"test\",\n session: sessionData,\n ownerId: \"Unity\",\n ownerType: \"MerchantGroup\",\n transactionData: {\n amount: payoutAmount,\n currency: \"USD\" as CurrencyType,\n entryType: \"Ecom\",\n intent: { paypal: IntentType.Payout },\n merchantTransactionId: crypto.randomUUID(),\n merchantTransactionDate: () => new Date().toISOString()\n },\n paypalConfig: {\n payoutConfig: {\n proceedPayoutWithSdk: true,\n paypalWallet: {\n email: customerWallet.email,\n payerId: customerWallet.payerId\n }\n }\n }\n });\n\n // Create components\n const amountComponent = pxpCheckoutSdk.create('payout-amount', {\n label: \"Withdrawal Amount\"\n });\n\n const receiverComponent = pxpCheckoutSdk.create('paypal-payout-receiver', {\n label: \"PayPal Account\",\n showMaskToggle: true\n });\n\n const submitComponent = pxpCheckoutSdk.create('payout-submission', {\n recipientWallet: \"Paypal\",\n submitText: \"Withdraw to PayPal\",\n \n styles: {\n base: {\n backgroundColor: \"#FFC438\",\n color: \"#09090C\",\n borderRadius: \"8px\",\n padding: \"16px 32px\",\n fontSize: \"18px\",\n fontWeight: \"bold\",\n width: \"100%\"\n }\n },\n \n onPrePayoutSubmit: async () => {\n const confirmed = await showConfirmationDialog(payoutAmount);\n return { isApproved: confirmed };\n },\n \n onPostPayout: (result) => {\n showSuccessAnimation();\n setTimeout(() => {\n window.location.href = `/success?txn=${result.transactionId}`;\n }, 1500);\n },\n \n onError: (error) => {\n showErrorToast(error.message);\n }\n });\n\n // Mount all components\n amountComponent.mount('payout-amount-container');\n receiverComponent.mount('payout-receiver-container');\n submitComponent.mount('payout-submit-container');\n}\n\ninitializePayoutPage();\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"
\n

Withdraw Funds

\n
\n
\n
\n
\n
\n
\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"error-handling","__idx":18},"children":["Error handling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The component handles validation errors and payout failures through the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onError"]}," callback:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"onError: (error) => {\n console.error(\"Payout error:\", error);\n \n // Handle specific error types\n switch (error.ErrorCode) {\n case \"SDK0809\":\n showError(\"PayPal account information is missing.\");\n break;\n case \"SDK0810\":\n case \"SDK0811\":\n case \"SDK0812\":\n showError(\"Invalid payout amount.\");\n break;\n case \"SDK0813\":\n case \"SDK0814\":\n case \"SDK0815\":\n showError(\"Invalid currency.\");\n break;\n case \"SDK1001\":\n showError(\"Recipient wallet is required.\");\n break;\n case \"SDK1003\":\n showError(\"Unsupported wallet type.\");\n break;\n default:\n showError(\"An error occurred. Please try again or contact support.\");\n }\n}\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For a complete list of error codes, see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/paypal/payouts/data-validation"},"children":["Data validation"]},"."]}]},"headings":[{"value":"Submission component","id":"submission-component","depth":1},{"value":"Basic usage","id":"basic-usage","depth":2},{"value":"Minimal configuration","id":"minimal-configuration","depth":3},{"value":"Advanced configuration","id":"advanced-configuration","depth":3},{"value":"Styling","id":"styling","depth":2},{"value":"Default styling","id":"default-styling","depth":3},{"value":"Custom styling","id":"custom-styling","depth":3},{"value":"Branding image configuration","id":"branding-image-configuration","depth":3},{"value":"Event handling","id":"event-handling","depth":2},{"value":"onPrePayoutSubmit","id":"onprepayoutsubmit","depth":3},{"value":"Methods","id":"methods","depth":2},{"value":"mount(containerId)","id":"mountcontainerid","depth":3},{"value":"unmount()","id":"unmount","depth":3},{"value":"Examples","id":"examples","depth":2},{"value":"Basic PayPal submission","id":"basic-paypal-submission","depth":3},{"value":"Venmo submission with custom styling","id":"venmo-submission-with-custom-styling","depth":3},{"value":"Submission with confirmation dialog","id":"submission-with-confirmation-dialog","depth":3},{"value":"Complete payout page","id":"complete-payout-page","depth":3},{"value":"Error handling","id":"error-handling","depth":2}],"frontmatter":{"seo":{"title":"Submission component"}},"lastModified":"2026-02-26T12:14:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/guides/checkout/components/web/paypal/payouts/submission-component","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}