## Usage

```tsx React theme={null} import { WhopElements, Wallet, SendElement } from "@whop/elements-react"; import { loadWhop } from "@whop/elements"; function Example() { return ( console.log("stepChanged", payload)} onSendCompleted={(payload) => console.log("sendCompleted", payload)} onLinkCreated={(payload) => console.log("linkCreated", payload)} onDone={(payload) => console.log("done", payload)} /> ); } ``` ```html Vanilla theme={null} ```

## Props A scoped token for the privileged read/write — needs `payout:withdraw_funds` (plus `company:authorized_user:read` and `member:basic:read` for recipient search, `airdrop_link:manage` for claim links). Omitted, the read carries the viewer's own session, which only answers same-origin. Off, only the team/other-business list shows — no search box. For a host that knows the viewer lacks `member:basic:read`. Defaults to `true`. Off, the "Send via link" row is hidden. For a host that knows the viewer lacks `airdrop_link:manage`. Defaults to `true`. Skip the picker and open straight onto this recipient's amount screen — for a "pay this person" action row. No back button is shown in that case, matching there being no picker behind it. Defaults to `null`. Preselect a currency in the amount screen's picker. Falls back to `currency`, then USD. Defaults to `""`. ### Direct mode only *These props exist only on the in-process (direct-mode) component — the hosted embed never carries them, and the element renders without them.* Called when a transfer needs step-up verification — resolve it once the viewer completes that, and the send retries automatically. Direct-mode only; a host that omits it just sees the transfer fail on a step-up challenge. ## Events Pass a callback in the create options (or React prop) to receive these. ### `onStepChanged` The visible screen changed. **Signature:** `((payload: { step: "enter_amount" | "select_recipient" | "create_link" | "link_success" | "success"; }) => void)` ### `onSendCompleted` A transfer succeeded. Refresh anything on your side reading the account's balance or activity. **Signature:** `((payload: { recipient: SendRecipient; amount: number; currency: string; }) => void)` ### `onLinkCreated` A claim link was created. Refresh anything on your side reading the account's balance. **Signature:** `((payload: { claimUrl: string; amount: number; redeemableCount: number; }) => void)` ### `onDone` The viewer clicked "Done" on a success screen — close the surface holding it. **Signature:** `((payload: Record) => 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). ### `refresh` Re-fetch the account's balances and recipient list. Call it after anything on your side changes what it can offer. **Signature:** `() => Promise` ### `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 Each part below is a stable class name — safe to depend on. Restyle a part by mapping its class to a **style declaration object** under `appearance.classes` (properties camelCase or kebab-case, values as strings with units — the same shape as React's `style` prop). The element renders in its own frame, so page stylesheets can't reach it: these declarations are sanitized against a safe-property allowlist and injected inside the frame for you. | Class | Targets | | ------------------- | -------------------------------------------- | | `.whop-SendSurface` | The send element root — one screen at a time | ```ts theme={null} const wallet = whop.wallet.create({ appearance: { classes: { 'whop-SendSurface': { borderRadius: '8px', fontWeight: '600' } } } }); // restyle live at any point — the same shape through update() wallet.update({ appearance: { classes: { 'whop-SendSurface': { fontWeight: '700' } } } }); ``` In React, pass the same object as the `appearance` prop on ``; `appearance` also applies globally at `WhopElements({ appearance })`.