{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["sub-heading","br","details","admonition"]},"type":"markdown"},"seo":{"title":"Amount 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":"amount-component","__idx":0},"children":["Amount component"]},{"$$mdtype":"Tag","name":"SubHeading","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Learn how to configure the payout amount 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 amount component requires no mandatory configuration to function. It displays the payout amount from the SDK initialisation configuration."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const amountComponent = pxpCheckoutSdk.create('payout-amount');\namountComponent.mount('payout-amount-container');\n","lang":"typescript"},"children":[]},{"$$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 display, you can configure custom labels and styling:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const amountConfig = {\n  label: \"Withdrawal Amount\",\n  style: {\n    color: \"#333333\",\n    backgroundColor: \"#f5f5f5\",\n    borderColor: \"#cccccc\",\n    borderRadius: \"4px\",\n    padding: \"12px 16px\",\n    fontSize: \"18px\",\n    fontWeight: \"600\"\n  },\n  labelStyle: {\n    color: \"#666666\",\n    fontSize: \"14px\",\n    fontWeight: \"500\",\n    marginBottom: \"8px\"\n  }\n};\n\nconst amountComponent = pxpCheckoutSdk.create('payout-amount', amountConfig);\namountComponent.mount('payout-amount-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":["label"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The custom text for the amount label. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"Amount\""]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["style"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CSSProperties"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["CSS styles applied to the amount value element."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["labelStyle"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CSSProperties"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["CSS styles applied to the label element."]}]}]}]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The payout amount is read from the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["transactionData.amount"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["transactionData.currency"]}," values provided during SDK initialisation. This component is display-only and does not accept user input."]}]},{"$$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 payout amount component renders with minimal default styling, allowing it to adapt to your page's existing styles."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"custom-styling","__idx":6},"children":["Custom styling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can customise both the label and the amount value display:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const amountConfig = {\n  label: \"You will receive\",\n  style: {\n    color: \"#2e7d32\",\n    backgroundColor: \"#e8f5e9\",\n    borderColor: \"#a5d6a7\",\n    borderWidth: \"1px\",\n    borderStyle: \"solid\",\n    borderRadius: \"8px\",\n    padding: \"16px 20px\",\n    fontSize: \"24px\",\n    fontWeight: \"bold\",\n    textAlign: \"center\"\n  },\n  labelStyle: {\n    color: \"#1b5e20\",\n    fontSize: \"12px\",\n    fontWeight: \"600\",\n    textTransform: \"uppercase\",\n    letterSpacing: \"0.5px\"\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":["style"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CSSProperties"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Styling for the amount value container."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["labelStyle"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["CSSProperties"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["Styling for the label text above the amount."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"style-properties","__idx":7},"children":["Style properties"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["style"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["labelStyle"]}," objects accept standard CSS properties:"]},{"$$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":"th","attributes":{"align":"left","data-label":"Example"},"children":["Example"]}]}]},{"$$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":["color"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The text colour."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"#333333\""]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["backgroundColor"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The background colour."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"#f5f5f5\""]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["borderColor"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The border colour."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"#cccccc\""]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["borderWidth"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The border width."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"1px\""]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["borderStyle"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The border style."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"solid\""]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["borderRadius"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The corner radius."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"8px\""]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["padding"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The inner padding."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"16px 20px\""]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fontSize"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The font size."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"18px\""]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fontWeight"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string | number"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The font weight."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"bold\""]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["600"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["textAlign"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The text alignment."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"center\""]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fontFamily"]},{"$$mdtype":"Tag","name":"Break","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Details","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":["The font family."]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"left"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"Arial, sans-serif\""]}]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"methods","__idx":8},"children":["Methods"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"mountcontainerid","__idx":9},"children":["mount(containerId)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Renders the amount component in the specified container:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const amountComponent = pxpCheckoutSdk.create('payout-amount', amountConfig);\namountComponent.mount('payout-amount-container');\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"unmount","__idx":10},"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":"amountComponent.unmount();\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"examples","__idx":11},"children":["Examples"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"basic-amount-display","__idx":12},"children":["Basic amount display"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A simple implementation showing the payout amount:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const amountComponent = pxpCheckoutSdk.create('payout-amount', {\n  label: \"Amount\"\n});\namountComponent.mount('payout-amount-container');\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"styled-amount-with-currency-emphasis","__idx":13},"children":["Styled amount with currency emphasis"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["An implementation with prominent styling to highlight the payout amount:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const amountConfig = {\n  label: \"Withdrawal Amount\",\n  style: {\n    color: \"#1a1a1a\",\n    backgroundColor: \"#ffffff\",\n    borderColor: \"#e0e0e0\",\n    borderWidth: \"1px\",\n    borderStyle: \"solid\",\n    borderRadius: \"12px\",\n    padding: \"20px 24px\",\n    fontSize: \"32px\",\n    fontWeight: \"700\",\n    textAlign: \"center\",\n    boxShadow: \"0 2px 8px rgba(0, 0, 0, 0.08)\"\n  },\n  labelStyle: {\n    color: \"#757575\",\n    fontSize: \"14px\",\n    fontWeight: \"500\",\n    textAlign: \"center\",\n    marginBottom: \"12px\"\n  }\n};\n\nconst amountComponent = pxpCheckoutSdk.create('payout-amount', amountConfig);\namountComponent.mount('payout-amount-container');\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"compact-inline-amount","__idx":14},"children":["Compact inline amount"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A minimal inline display for use in confirmation flows:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"typescript","header":{"controls":{"copy":{}}},"source":"const amountConfig = {\n  label: \"Payout:\",\n  style: {\n    color: \"#333333\",\n    fontSize: \"16px\",\n    fontWeight: \"600\",\n    display: \"inline\"\n  },\n  labelStyle: {\n    color: \"#666666\",\n    fontSize: \"14px\",\n    fontWeight: \"normal\",\n    display: \"inline\",\n    marginRight: \"8px\"\n  }\n};\n\nconst amountComponent = pxpCheckoutSdk.create('payout-amount', amountConfig);\namountComponent.mount('payout-amount-container');\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"complete-payout-page-example","__idx":15},"children":["Complete payout page example"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A full example showing the amount component in context with other payout components:"]},{"$$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  \n  const pxpCheckoutSdk = PxpCheckout.initialize({\n    environment: \"test\",\n    session: sessionData,\n    ownerId: \"Unity\",\n    ownerType: \"MerchantGroup\",\n    transactionData: {\n      amount: 150.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        }\n      }\n    }\n  });\n\n  // Create amount component with custom styling\n  const amountComponent = pxpCheckoutSdk.create('payout-amount', {\n    label: \"You're withdrawing\",\n    style: {\n      color: \"#2e7d32\",\n      fontSize: \"28px\",\n      fontWeight: \"bold\",\n      textAlign: \"center\",\n      padding: \"16px\"\n    },\n    labelStyle: {\n      color: \"#666666\",\n      fontSize: \"14px\",\n      textAlign: \"center\"\n    }\n  });\n\n  // Mount the component\n  amountComponent.mount('payout-amount-container');\n\n  // Cleanup on page unload\n  window.addEventListener('beforeunload', () => {\n    amountComponent.unmount();\n  });\n}\n\ninitializePayoutPage();\n","lang":"typescript"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The corresponding HTML structure:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"<div class=\"payout-page\">\n  <h1>Withdraw funds</h1>\n  <div id=\"payout-amount-container\"></div>\n  <div id=\"payout-receiver-container\"></div>\n  <div id=\"payout-submit-container\"></div>\n</div>\n","lang":"html"},"children":[]}]},"headings":[{"value":"Amount component","id":"amount-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":"Style properties","id":"style-properties","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 amount display","id":"basic-amount-display","depth":3},{"value":"Styled amount with currency emphasis","id":"styled-amount-with-currency-emphasis","depth":3},{"value":"Compact inline amount","id":"compact-inline-amount","depth":3},{"value":"Complete payout page example","id":"complete-payout-page-example","depth":3}],"frontmatter":{"seo":{"title":"Amount component"}},"lastModified":"2026-02-26T12:14:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/guides/checkout/components/web/paypal/payouts/amount-component","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}