{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["sub-heading","admonition"]},"type":"markdown"},"seo":{"title":"About configuration","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":"about-configuration","__idx":0},"children":["About configuration"]},{"$$mdtype":"Tag","name":"SubHeading","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Learn about how to configure PayPal payout components for Web."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"overview","__idx":1},"children":["Overview"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The PayPal Web SDK provides configurable components for integrating PayPal and Venmo payouts into your web application. Each component offers comprehensive configuration options for styling, behaviour, and event handling."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"configuration-structure","__idx":2},"children":["Configuration structure"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["All payout components follow a consistent configuration pattern:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"// Create component with configuration\nconst submissionComponent = pxpCheckoutSdk.create(\"payout-submission\", {\n  // Required properties\n  recipientWallet: \"Paypal\",\n  \n  // Styling\n  styles: {\n    base: {\n      backgroundColor: '#FFC438',\n      color: '#09090C',\n      borderRadius: '3px'\n    },\n    hover: {\n      backgroundColor: '#F7B731'\n    }\n  },\n  \n  // Event handlers\n  onPostPayout: (result) => {\n    // Handle successful payout\n  }\n});\n\n// Mount to DOM\nsubmissionComponent.mount('submission-container');\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Authentication and environment are configured at SDK initialisation via ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PxpCheckout.initialize()"]},", not at component level."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"basic-configuration","__idx":3},"children":["Basic configuration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["At minimum, each component requires a few essential properties:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"// Payout amount component (no required config)\nconst amountComponent = pxpCheckoutSdk.create(\"payout-amount\");\n\n// PayPal receiver component (no required config)\nconst paypalReceiverComponent = pxpCheckoutSdk.create(\"paypal-payout-receiver\");\n\n// Venmo receiver component (no required config)\nconst venmoReceiverComponent = pxpCheckoutSdk.create(\"venmo-payout-receiver\");\n\n// Payout submission component\nconst submissionComponent = pxpCheckoutSdk.create(\"payout-submission\", {\n  recipientWallet: \"Paypal\"  // Required: \"Paypal\" or \"Venmo\"\n});\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"advanced-configuration","__idx":4},"children":["Advanced configuration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For more complex implementations, you can configure styling, callbacks, and additional features:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const submissionComponent = pxpCheckoutSdk.create(\"payout-submission\", {\n  // Required\n  recipientWallet: \"Paypal\",\n  \n  // Custom button text\n  submitText: \"Withdraw Funds\",\n  \n  // Custom CSS class\n  class: \"custom-payout-button\",\n  \n  // Styling for different states\n  styles: {\n    base: {\n      backgroundColor: '#FFC438',\n      color: '#09090C',\n      borderRadius: '3px',\n      padding: '12px 24px',\n      fontSize: '16px',\n      fontWeight: '500'\n    },\n    hover: {\n      backgroundColor: '#F7B731'\n    },\n    active: {\n      opacity: '0.6'\n    },\n    focus: {\n      outline: '2px solid #0070CC',\n      outlineOffset: '2px'\n    },\n    disabled: {\n      opacity: '0.5',\n      cursor: 'not-allowed'\n    }\n  },\n  \n  // Branding image configuration\n  brandingImageConfig: {\n    width: \"60px\",\n    height: \"auto\"\n  },\n  \n  // Event handlers\n  onClick: (event) => {\n    console.log(\"Button clicked\");\n  },\n  \n  onPrePayoutSubmit: async () => {\n    const confirmed = await showConfirmationModal();\n    return { isApproved: confirmed, note: \"Customer withdrawal\" };\n  },\n  \n  onPostPayout: (result) => {\n    handlePayoutSuccess(result);\n  },\n  \n  onError: (error) => {\n    handlePayoutError(error);\n  }\n});\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"styling-components","__idx":5},"children":["Styling components"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"default-styling","__idx":6},"children":["Default styling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["All components come with PayPal-branded default styling:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Submission button (PayPal):"]}," Gold button (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["#FFC438"]},") with dark text, 3px border radius."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Submission button (Venmo):"]}," Blue button (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["#008CFF"]},") with white text."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Amount input:"]}," Standard input field with customisable label."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Receiver display:"]}," Read-only field with optional masking and toggle."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"custom-styling","__idx":7},"children":["Custom styling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Each component offers comprehensive styling options using CSS properties:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"// Amount component styling\nconst amountComponent = pxpCheckoutSdk.create(\"payout-amount\", {\n  label: \"Withdrawal Amount\",\n  style: {\n    color: \"#333333\",\n    borderColor: \"#cccccc\",\n    backgroundColor: \"#EFEDEE\"\n  },\n  labelStyle: {\n    color: \"#001BB7\",\n    fontWeight: \"600\"\n  }\n});\n\n// Receiver component styling\nconst receiverComponent = pxpCheckoutSdk.create(\"paypal-payout-receiver\", {\n  label: \"PayPal Email\",\n  showMaskToggle: true,\n  style: {\n    color: \"#333333\",\n    borderColor: \"#cccccc\",\n    backgroundColor: \"#f5f5f5\"\n  },\n  labelStyle: {\n    color: \"#001BB7\"\n  }\n});\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"button-state-styling","__idx":8},"children":["Button state styling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Submission buttons support styling for multiple states:"]},{"$$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":"State"},"children":["State"]},{"$$mdtype":"Tag","name":"th","attributes":{"align":"left","data-label":"Description"},"children":["Description"]},{"$$mdtype":"Tag","name":"th","attributes":{"align":"left","data-label":"Default (PayPal)"},"children":["Default (PayPal)"]}]}]},{"$$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":["base"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Default button appearance."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Gold background, dark text."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["hover"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Mouse hover state."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Darker gold (#F7B731)."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["active"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Button pressed."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["60% opacity."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["focus"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Keyboard focus."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Blue outline (2px)."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["disabled"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Button disabled."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["50% opacity, not-allowed cursor."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["loading"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["During payout processing."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["(Custom per implementation)."]}]}]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const submissionComponent = pxpCheckoutSdk.create(\"payout-submission\", {\n  recipientWallet: \"Paypal\",\n  styles: {\n    base: {\n      backgroundColor: '#FFC438',\n      color: '#09090C',\n      borderRadius: '8px',\n      padding: '16px 32px',\n      fontSize: '18px',\n      fontWeight: '600',\n      border: 'none',\n      cursor: 'pointer'\n    },\n    hover: {\n      backgroundColor: '#E6B032',\n      transform: 'translateY(-1px)'\n    },\n    active: {\n      opacity: '0.7',\n      transform: 'translateY(0)'\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    },\n    loading: {\n      opacity: '0.8',\n      cursor: 'wait'\n    }\n  }\n});\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"event-handling","__idx":9},"children":["Event handling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["All components provide event handlers for user interactions and lifecycle events. For a full list of supported callbacks and their payloads, see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/paypal/payouts/events"},"children":["Events"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"common-event-patterns","__idx":10},"children":["Common event patterns"]},{"$$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":"Pattern"},"children":["Pattern"]},{"$$mdtype":"Tag","name":"th","attributes":{"align":"left","data-label":"Description"},"children":["Description"]},{"$$mdtype":"Tag","name":"th","attributes":{"align":"left","data-label":"Example callbacks"},"children":["Example callbacks"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Click handlers"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Called when user clicks."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onClick"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Pre-action handlers"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Called before processing, can approve/reject."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPrePayoutSubmit"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Success handlers"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Called when operations complete."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onPostPayout"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onAccountVerified"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Error handlers"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Called when errors occur."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onError"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Cancel handlers"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Called when user cancels."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onCancel"]}]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"submission-component-events","__idx":11},"children":["Submission component events"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const submissionComponent = pxpCheckoutSdk.create(\"payout-submission\", {\n  recipientWallet: \"Paypal\",\n  \n  // Click handling (before validation)\n  onClick: (event) => {\n    console.log(\"Withdrawal button clicked\");\n    showLoadingState();\n  },\n  \n  // Pre-payout approval (can approve/reject)\n  onPrePayoutSubmit: async () => {\n    const confirmed = await showConfirmationDialog();\n    return { \n      isApproved: confirmed,\n      note: \"Customer withdrawal request\"\n    };\n  },\n  \n  // Success handling\n  onPostPayout: (result) => {\n    console.log(\"Payout successful:\", result.transactionId);\n    navigateToSuccessPage(result.transactionId);\n  },\n  \n  // Error handling\n  onError: (error) => {\n    console.error(\"Payout failed:\", error.ErrorCode, error.message);\n    showErrorMessage(error.message);\n  }\n});\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"component-mounting","__idx":12},"children":["Component mounting"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Unlike native SDKs, web components must be mounted to DOM elements:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"// Create component\nconst amountComponent = pxpCheckoutSdk.create(\"payout-amount\", {\n  label: \"Amount\"\n});\n\n// Mount to DOM element (CSS selector)\namountComponent.mount(\"amount-container\");\n\n// Later: unmount when done\namountComponent.unmount();\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"html-structure","__idx":13},"children":["HTML structure"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"<div class=\"payout-form\">\n  <div id=\"amount-container\"></div>\n  <div id=\"receiver-container\"></div>\n  <div id=\"submit-container\"></div>\n</div>\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"react-integration","__idx":14},"children":["React integration"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"import { useEffect, useRef } from 'react';\n\nfunction PayoutForm({ pxpCheckout }) {\n  const componentRef = useRef(null);\n  \n  useEffect(() => {\n    if (pxpCheckout) {\n      componentRef.current = pxpCheckout.create(\"payout-amount\");\n      componentRef.current.mount(\"amount-container\");\n    }\n    \n    return () => {\n      componentRef.current?.unmount();\n    };\n  }, [pxpCheckout]);\n  \n  return <div id=\"amount-container\" />;\n}\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"best-practices","__idx":15},"children":["Best practices"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"configure-for-your-brand","__idx":16},"children":["Configure for your brand"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Customise the styling to match your application's design:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"// Define brand colours\nconst brandColors = {\n  primary: '#0066CC',\n  surface: '#F8F9FA',\n  onSurface: '#212529',\n  accent: '#FFC438'\n};\n\n// Apply to components\nconst submissionComponent = pxpCheckoutSdk.create(\"payout-submission\", {\n  recipientWallet: \"Paypal\",\n  styles: {\n    base: {\n      backgroundColor: brandColors.accent,\n      color: brandColors.onSurface,\n      fontFamily: 'Inter, sans-serif'\n    }\n  }\n});\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"handle-all-events","__idx":17},"children":["Handle all events"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Implement comprehensive event handling:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const submissionComponent = pxpCheckoutSdk.create(\"payout-submission\", {\n  recipientWallet: \"Paypal\",\n  onClick: (event) => handleClick(event),\n  onPrePayoutSubmit: () => handlePreSubmit(),\n  onPostPayout: (result) => handleSuccess(result),\n  onError: (error) => handleError(error)\n});\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For more information about events, see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/paypal/payouts/events"},"children":["Events"]},"."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"clean-up-components","__idx":18},"children":["Clean up components"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Always unmount components when they're no longer needed:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"// Store component references\nconst components = [];\n\n// Create and track components\nconst amount = pxpCheckoutSdk.create(\"payout-amount\");\namount.mount(\"amount-container\");\ncomponents.push(amount);\n\n// Clean up on page leave\nwindow.addEventListener('beforeunload', () => {\n  components.forEach(component => component.unmount());\n});\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"test-different-configurations","__idx":19},"children":["Test different configurations"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Test your components in various scenarios:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Different browsers (Chrome, Firefox, Safari, Edge)."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Mobile and desktop viewports."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Various payout amounts."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Error conditions."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Network failures."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"complete-configuration-example","__idx":20},"children":["Complete configuration example"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Here's a comprehensive example showing all configuration options:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"import { PxpCheckout, IntentType, CurrencyType } from \"@pxpio/web-components-sdk\";\n\n// Get session from your backend\nconst sessionData = await fetchSessionFromBackend();\n\n// Initialise SDK\nconst pxpCheckoutSdk = PxpCheckout.initialize({\n  environment: \"test\",\n  session: sessionData,\n  ownerId: \"Unity\",\n  ownerType: \"MerchantGroup\",\n  transactionData: {\n    amount: 100.00,\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: \"customer@example.com\",\n        payerId: \"PAYER123456\"\n      }\n    }\n  }\n});\n\n// Create amount component with full configuration\nconst amountComponent = pxpCheckoutSdk.create(\"payout-amount\", {\n  label: \"Withdrawal Amount\",\n  style: {\n    color: \"#333333\",\n    borderColor: \"#0070CC\",\n    backgroundColor: \"#FFFFFF\",\n    borderRadius: \"4px\",\n    padding: \"12px\"\n  },\n  labelStyle: {\n    color: \"#001BB7\",\n    fontSize: \"14px\",\n    fontWeight: \"600\"\n  }\n});\n\n// Create receiver component with full configuration\nconst receiverComponent = pxpCheckoutSdk.create(\"paypal-payout-receiver\", {\n  label: \"PayPal Email\",\n  showMaskToggle: true,\n  applyMask: true,\n  style: {\n    color: \"#333333\",\n    borderColor: \"#CCCCCC\",\n    backgroundColor: \"#F5F5F5\",\n    borderRadius: \"4px\",\n    padding: \"12px\"\n  },\n  labelStyle: {\n    color: \"#001BB7\",\n    fontSize: \"14px\",\n    fontWeight: \"600\"\n  }\n});\n\n// Create submission component with full configuration\nconst submissionComponent = pxpCheckoutSdk.create(\"payout-submission\", {\n  // Required\n  recipientWallet: \"Paypal\",\n  \n  // Button text\n  submitText: \"Withdraw to PayPal\",\n  \n  // Custom class\n  class: \"payout-submit-button\",\n  \n  // Branding\n  brandingImageConfig: {\n    width: \"60px\",\n    height: \"auto\"\n  },\n  \n  // Full styling\n  styles: {\n    base: {\n      backgroundColor: '#FFC438',\n      color: '#09090C',\n      borderRadius: '4px',\n      padding: '14px 28px',\n      fontSize: '16px',\n      lineHeight: '18px',\n      fontWeight: '600',\n      border: 'none',\n      cursor: 'pointer',\n      width: '100%'\n    },\n    hover: {\n      backgroundColor: '#F7B731'\n    },\n    active: {\n      opacity: '0.6'\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  // Event handlers\n  onClick: (event) => {\n    console.log(\"Button clicked\");\n    trackEvent(\"payout_button_clicked\");\n  },\n  \n  onPrePayoutSubmit: async () => {\n    console.log(\"Pre-payout check\");\n    \n    // Show confirmation modal\n    const confirmed = await showConfirmationModal({\n      title: \"Confirm Withdrawal\",\n      message: \"Are you sure you want to withdraw $100.00 to your PayPal account?\"\n    });\n    \n    if (!confirmed) {\n      return { isApproved: false };\n    }\n    \n    // Perform validation\n    const validation = await validateWithdrawal();\n    if (!validation.valid) {\n      showErrorMessage(validation.message);\n      return { isApproved: false };\n    }\n    \n    return { \n      isApproved: true,\n      note: \"Customer withdrawal request\"\n    };\n  },\n  \n  onPostPayout: (result) => {\n    console.log(\"Payout successful:\", result);\n    \n    // Update UI\n    showSuccessMessage(`$100.00 has been sent to your PayPal account!`);\n    \n    // Track success\n    trackEvent(\"payout_completed\", {\n      transactionId: result.transactionId,\n      amount: 100.00\n    });\n    \n    // Redirect\n    setTimeout(() => {\n      window.location.href = `/payout-success?txn=${result.transactionId}`;\n    }, 2000);\n  },\n  \n  onError: (error) => {\n    console.error(\"Payout error:\", error);\n    \n    // Log error\n    logError(\"payout_error\", {\n      code: error.ErrorCode,\n      message: error.message\n    });\n    \n    // Show error message\n    showErrorMessage(\"Withdrawal failed. Please try again.\");\n  }\n});\n\n// Mount components\namountComponent.mount(\"amount-container\");\nreceiverComponent.mount(\"receiver-container\");\nsubmissionComponent.mount(\"submit-container\");\n\n// Clean up function\nfunction cleanup() {\n  amountComponent.unmount();\n  receiverComponent.unmount();\n  submissionComponent.unmount();\n}\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"next-steps","__idx":21},"children":["Next steps"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Now that you understand component configuration fundamentals, dive into the detailed documentation for each component:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/paypal/payouts/amount-component"},"children":["Amount component"]},":"]}," Configure the payout amount input."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/paypal/payouts/paypal-receiver-component"},"children":["PayPal receiver component"]},":"]}," Display and configure PayPal receiver."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/paypal/payouts/venmo-receiver-component"},"children":["Venmo receiver component"]},":"]}," Display and configure Venmo receiver."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/checkout/components/web/paypal/payouts/submission-component"},"children":["Submission component"]},":"]}," Configure the withdrawal button for returning customers."]}]}]},"headings":[{"value":"About configuration","id":"about-configuration","depth":1},{"value":"Overview","id":"overview","depth":2},{"value":"Configuration structure","id":"configuration-structure","depth":2},{"value":"Basic configuration","id":"basic-configuration","depth":3},{"value":"Advanced configuration","id":"advanced-configuration","depth":3},{"value":"Styling components","id":"styling-components","depth":2},{"value":"Default styling","id":"default-styling","depth":3},{"value":"Custom styling","id":"custom-styling","depth":3},{"value":"Button state styling","id":"button-state-styling","depth":3},{"value":"Event handling","id":"event-handling","depth":2},{"value":"Common event patterns","id":"common-event-patterns","depth":3},{"value":"Submission component events","id":"submission-component-events","depth":3},{"value":"Component mounting","id":"component-mounting","depth":2},{"value":"HTML structure","id":"html-structure","depth":3},{"value":"React integration","id":"react-integration","depth":3},{"value":"Best practices","id":"best-practices","depth":2},{"value":"Configure for your brand","id":"configure-for-your-brand","depth":3},{"value":"Handle all events","id":"handle-all-events","depth":3},{"value":"Clean up components","id":"clean-up-components","depth":3},{"value":"Test different configurations","id":"test-different-configurations","depth":3},{"value":"Complete configuration example","id":"complete-configuration-example","depth":2},{"value":"Next steps","id":"next-steps","depth":2}],"frontmatter":{"seo":{"title":"About configuration"}},"lastModified":"2026-02-26T12:14:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/guides/checkout/components/web/paypal/payouts/about-configuration","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}