> ## Documentation Index > Fetch the complete documentation index at: https://docs.whop.com/llms.txt > Use this file to discover all available pages before exploring further. # WithdrawElement > Collects a payout amount and saved payout method, groups standard and instant delivery choices with live fees and arrival estimates, collects a new payout method when needed, and presents a confirmation screen before emitting the final payout request. This page documents `@whop/elements@1.0.0-beta.0` and `@whop/elements-react@1.0.0-beta.0`. *Pre-release, not yet part of a stable release.* Mounts inside [`Wallet`](/elements/beta/wallet/overview). Pass props and callbacks through the create options or React props. You can mount this element **inline** (`create`) or open it as a **modal** overlay (`createOverlay`).
```tsx React theme={null} import { WhopElements, Wallet, WithdrawElement } from "@whop/elements-react"; import { loadWhop } from "@whop/elements"; function Example() { return ( console.log(e)} onCountryChanged={(e) => console.log(e)} onSupportedMethodChanged={(e) => console.log(e)} onAddMethodRequested={(e) => console.log(e)} onPlaidLinkRequested={(e) => console.log(e)} onMethodVerificationCompleted={(e) => console.log(e)} onRenameMethodRequested={(e) => console.log(e)} onRemoveMethodRequested={(e) => console.log(e)} onWithdrawalRequested={(e) => console.log(e)} /> ); } ``` ```html Vanilla theme={null} ```

Example data. [Open the Playground](/elements/beta/wallet/overview#playground).

## Props Saved payout methods with quotes for the current amount. Defaults to `[]`. Settled balance available to standard payout methods. Defaults to `0`. Pending balance that may be available to instant payout methods. Defaults to `0`. The payout account's ISO 3166-1 alpha-2 country. Defaults to `"US"`. Payout methods available to add in the selected country, including required fields. Defaults to `[]`. Whether supported payout methods are loading for the selected country. Defaults to `false`. Live standard and instant payout limits. Defaults to `{"standard":{"maxAmount":0},"instant":{"maxAmount":0}}`. Whether payout methods and limits are loading. Defaults to `false`. Whether the current amount is being repriced. Defaults to `false`. Whether a new payout method is being saved. Defaults to `false`. Whether the confirmed payout is being created. Defaults to `false`. A host-side error to show inside the current screen. Defaults to `""`. True when the last payout was refused because the bank could not confirm the account holder name. Shows a fix-or-confirm choice; confirming re-emits withdrawalRequested with acknowledgeBankWarning set. Set this back to false when handling each withdrawalRequested — the choice appears on the change to true, so a flag left true hides every later refusal. Defaults to `false`. The most recently created method, selected when it appears in methods. Defaults to `""`. Set when the payer backed out of Plaid Link or it failed to open. Unlocks manual entry on a rail that otherwise requires linking. Defaults to `false`. Whether a bank link is in progress — the Plaid session is open, or the linked method is being saved. Defaults to `false`. ## Events Pass callbacks in the create options or React props. ### `onAmountChanged` The amount changed and should be repriced. **Signature:** `((payload: { amount: number; }) => void)` ### `onCountryChanged` The add-method country changed and supported methods should be refreshed. **Signature:** `((payload: { country: string; }) => void)` ### `onSupportedMethodChanged` A supported payout method was selected and its exact required fields should be loaded. **Signature:** `((payload: { country: string; supportedPayoutMethodId: string; destinationCurrency: string; }) => void)` ### `onAddMethodRequested` The payer submitted the dynamic add-payout-method form. **Signature:** `((payload: WithdrawalCreateMethodInput) => void)` ### `onPlaidLinkRequested` The payer chose to link their bank through Plaid instead of typing details. Open Plaid Link on receipt. **Signature:** `((payload: { country: string; supportedPayoutMethodId: string; destinationCurrency: string; }) => void)` ### `onMethodVerificationCompleted` The newly added payout method finished its verification step. **Signature:** `((payload: Record) => void)` ### `onRenameMethodRequested` The payer requested to rename a saved payout method. **Signature:** `((payload: { methodId: string; }) => void)` ### `onRemoveMethodRequested` The payer requested to remove a saved payout method. **Signature:** `((payload: { methodId: string; }) => void)` ### `onWithdrawalRequested` The payer confirmed the final payout details. Create the payout on receipt. **Signature:** `((payload: WithdrawalRequest) => void)` ### `onLoaderStart` Runs after the loading skeleton first paints and before `onReady`. **Signature:** `(() => void)` ### `onReady` Runs after the element's first complete paint. **Signature:** `(() => void)` ### `onError` Runs when the element fails to load or crashes. The fallback remains visible. Use `code` for programmatic handling. `sourceKey` identifies a failed host-state source. **Signature:** `((e: { message: string; code?: string | undefined; sourceKey?: string | undefined; }) => void)` ## Methods Call these on the handle returned by `create`, or through a React `ref`. ### `mount` Mounts the element in `target` and starts loading. React components mount themselves. **Signature:** `(target: string | HTMLElement) => void` ### `destroy` Removes the element and releases its frame and subscriptions. You can call it more than once. React removes the element automatically. **Signature:** `() => void` ### `update` Merges new props into the mounted element. In React, change the component props instead. **Signature:** `(options: Partial) => void` ## Styling This element doesn't expose class names for styling. Use `appearance` (theme, accent color, variables) to restyle it.