## Usage

```tsx React theme={null} import { WhopElements, Wallet, WithdrawElement } from "@whop/elements-react"; import { loadWhop } from "@whop/elements"; function Example() { return ( console.log("amountChanged", payload)} onCountryChanged={(payload) => console.log("countryChanged", payload)} onSupportedMethodChanged={(payload) => console.log("supportedMethodChanged", payload)} onAddMethodRequested={(payload) => console.log("addMethodRequested", payload)} onMethodVerificationCompleted={(payload) => console.log("methodVerificationCompleted", payload)} onWithdrawalRequested={(payload) => console.log("withdrawalRequested", payload)} /> ); } ``` ```html Vanilla theme={null} ```

## 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 withdrawal 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 withdrawal is being created. Defaults to `false`. A host-side error to show inside the current screen. Defaults to `""`. The most recently created method, selected when it appears in methods. Defaults to `""`. ## Events Pass a callback in the create options (or React prop) to receive these. ### `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)` ### `onMethodVerificationCompleted` The newly added payout method finished its verification step. **Signature:** `((payload: Record) => void)` ### `onWithdrawalRequested` The payer confirmed the final withdrawal details. Create the withdrawal on receipt. **Signature:** `((payload: WithdrawalRequest) => void)` ### `onLoaderStart` Fired the moment the element's own loading skeleton has painted inside its frame — the earliest point a consumer-managed loading state can hand off without ever exposing a blank. Always precedes `onReady`; most consumers only need `onReady`. **Signature:** `(() => void)` ### `onReady` Fired once the element has booted and painted its first complete frame. **Signature:** `(() => void)` ### `onError` Fired when the element fails to load or crashes; the element shows its own error fallback. `message` is human-readable; framework refusals also carry `code` (e.g. `HOST_SOURCE_FAILED`, with `sourceKey` naming the failed hostState key) so hosts can switch on codes, never message text. **Signature:** `((e: { message: string; code?: string | undefined; sourceKey?: string | undefined; }) => void)` ## Methods Call these on the element handle — the return of `create` (vanilla) or the component `ref` (React). ### `mount` Place the element on the page: appends its container to `target` (a CSS selector or an element) and starts loading. Nothing renders until this is called. React consumers never call it — the component mounts itself. **Signature:** `(target: string | HTMLElement) => void` ### `destroy` Remove the element from the page and release its frame and subscriptions. Safe to call more than once. React consumers never call it — unmounting the component does it. **Signature:** `() => void` ### `update` Change this element's consumer props after mount — it re-renders with the merged props. React consumers never call it — updating the JSX props does the same. **Signature:** `(options: Partial) => void` ## Styling This element exposes no targetable class names. Use `appearance` (theme, accent color, variables) to restyle it.