Amount component

Learn how to configure the payout amount component for Web.

Basic usage

Minimal configuration

The payout amount component requires no mandatory configuration to function. It displays the payout amount from the SDK initialisation configuration.

const amountComponent = pxpCheckoutSdk.create('payout-amount');
amountComponent.mount('payout-amount-container');

Advanced configuration

For more control over the display, you can configure custom labels and styling:

const amountConfig = {
  label: "Withdrawal Amount",
  style: {
    color: "#333333",
    backgroundColor: "#f5f5f5",
    borderColor: "#cccccc",
    borderRadius: "4px",
    padding: "12px 16px",
    fontSize: "18px",
    fontWeight: "600"
  },
  labelStyle: {
    color: "#666666",
    fontSize: "14px",
    fontWeight: "500",
    marginBottom: "8px"
  }
};

const amountComponent = pxpCheckoutSdk.create('payout-amount', amountConfig);
amountComponent.mount('payout-amount-container');

Property	Description
`label` string	The custom text for the amount label. Defaults to `"Amount"`.
`style` CSSProperties	CSS styles applied to the amount value element.
`labelStyle` CSSProperties	CSS styles applied to the label element.

The payout amount is read from the transactionData.amount and transactionData.currency values provided during SDK initialisation. This component is display-only and does not accept user input.

Styling

Default styling

The payout amount component renders with minimal default styling, allowing it to adapt to your page's existing styles.

Custom styling

You can customise both the label and the amount value display:

const amountConfig = {
  label: "You will receive",
  style: {
    color: "#2e7d32",
    backgroundColor: "#e8f5e9",
    borderColor: "#a5d6a7",
    borderWidth: "1px",
    borderStyle: "solid",
    borderRadius: "8px",
    padding: "16px 20px",
    fontSize: "24px",
    fontWeight: "bold",
    textAlign: "center"
  },
  labelStyle: {
    color: "#1b5e20",
    fontSize: "12px",
    fontWeight: "600",
    textTransform: "uppercase",
    letterSpacing: "0.5px"
  }
};

Property	Description
`style` CSSProperties	Styling for the amount value container.
`labelStyle` CSSProperties	Styling for the label text above the amount.

Style properties

The style and labelStyle objects accept standard CSS properties:

Property	Description	Example
`color` string	The text colour.	`"#333333"`
`backgroundColor` string	The background colour.	`"#f5f5f5"`
`borderColor` string	The border colour.	`"#cccccc"`
`borderWidth` string	The border width.	`"1px"`
`borderStyle` string	The border style.	`"solid"`
`borderRadius` string	The corner radius.	`"8px"`
`padding` string	The inner padding.	`"16px 20px"`
`fontSize` string	The font size.	`"18px"`
`fontWeight` string \| number	The font weight.	`"bold"` or `600`
`textAlign` string	The text alignment.	`"center"`
`fontFamily` string	The font family.	`"Arial, sans-serif"`

Methods

mount(containerId)

Renders the amount component in the specified container:

const amountComponent = pxpCheckoutSdk.create('payout-amount', amountConfig);
amountComponent.mount('payout-amount-container');

unmount()

Removes the component from the DOM:

amountComponent.unmount();

Examples

Basic amount display

A simple implementation showing the payout amount:

const amountComponent = pxpCheckoutSdk.create('payout-amount', {
  label: "Amount"
});
amountComponent.mount('payout-amount-container');

Styled amount with currency emphasis

An implementation with prominent styling to highlight the payout amount:

const amountConfig = {
  label: "Withdrawal Amount",
  style: {
    color: "#1a1a1a",
    backgroundColor: "#ffffff",
    borderColor: "#e0e0e0",
    borderWidth: "1px",
    borderStyle: "solid",
    borderRadius: "12px",
    padding: "20px 24px",
    fontSize: "32px",
    fontWeight: "700",
    textAlign: "center",
    boxShadow: "0 2px 8px rgba(0, 0, 0, 0.08)"
  },
  labelStyle: {
    color: "#757575",
    fontSize: "14px",
    fontWeight: "500",
    textAlign: "center",
    marginBottom: "12px"
  }
};

const amountComponent = pxpCheckoutSdk.create('payout-amount', amountConfig);
amountComponent.mount('payout-amount-container');

Compact inline amount

A minimal inline display for use in confirmation flows:

const amountConfig = {
  label: "Payout:",
  style: {
    color: "#333333",
    fontSize: "16px",
    fontWeight: "600",
    display: "inline"
  },
  labelStyle: {
    color: "#666666",
    fontSize: "14px",
    fontWeight: "normal",
    display: "inline",
    marginRight: "8px"
  }
};

const amountComponent = pxpCheckoutSdk.create('payout-amount', amountConfig);
amountComponent.mount('payout-amount-container');

Complete payout page example

A full example showing the amount component in context with other payout components:

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

async function initializePayoutPage() {
  const sessionData = await getSessionDataFromBackend();
  
  const pxpCheckoutSdk = PxpCheckout.initialize({
    environment: "test",
    session: sessionData,
    ownerId: "Unity",
    ownerType: "MerchantGroup",
    transactionData: {
      amount: 150.00,
      currency: "USD" as CurrencyType,
      entryType: "Ecom",
      intent: { paypal: IntentType.Payout },
      merchantTransactionId: crypto.randomUUID(),
      merchantTransactionDate: () => new Date().toISOString()
    },
    paypalConfig: {
      payoutConfig: {
        proceedPayoutWithSdk: true,
        paypalWallet: {
          email: "customer@example.com"
        }
      }
    }
  });

  // Create amount component with custom styling
  const amountComponent = pxpCheckoutSdk.create('payout-amount', {
    label: "You're withdrawing",
    style: {
      color: "#2e7d32",
      fontSize: "28px",
      fontWeight: "bold",
      textAlign: "center",
      padding: "16px"
    },
    labelStyle: {
      color: "#666666",
      fontSize: "14px",
      textAlign: "center"
    }
  });

  // Mount the component
  amountComponent.mount('payout-amount-container');

  // Cleanup on page unload
  window.addEventListener('beforeunload', () => {
    amountComponent.unmount();
  });
}

initializePayoutPage();

The corresponding HTML structure:

<div class="payout-page">
  <h1>Withdraw funds</h1>
  <div id="payout-amount-container"></div>
  <div id="payout-receiver-container"></div>
  <div id="payout-submit-container"></div>
</div>