> ## 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.
# Wallet
> Funds a Whop account. Mint it with the account id, mount the deposit element, and the payer gets that account's live funding rails — a crypto deposit address per network and the bank wire fields per settlement currency — resolved with no credentials. Rails you settle yourself (a saved card, a platform balance) are opt-in props whose choices come back as events on the element.
## Playground
Assemble the elements with sample data — drive the controls, add and arrange elements, and watch events fire live:
## Usage
```tsx React theme={null}
import { WhopElements, Wallet } from "@whop/elements-react";
import { loadWhop } from "@whop/elements";
function Example() {
return (
{/* mount elements here */}
);
}
```
```html Vanilla theme={null}
```
## Options
Pass these to `whop.wallet.create({ … })` — or as props on `` in React.
The account funds land in — a company (`biz_…`) or its ledger account id.
ISO currency the amount field displays in. Malformed codes fall back to USD.
Advanced: override the API origin, version segment included (sandbox / staging testing).
Visual customization for this group's elements — overrides the global `WhopElements({ appearance })`; change it live with `update({ appearance })`.
Locale for this group's element UI text — one of the app's built locales, overriding the global config; any other value falls back to the default locale.
## Events
Pass a callback in the create options / React props.
### `onLoadingChange`
Fired when the grouped loading state changes — `true` while any mounted element is still loading.
**Signature:** `((loading: boolean) => void)`
## Methods
Call these on the Wallet handle — the return of `whop.wallet.create({ … })` (vanilla) or `useWallet()` (React).
### `update`
Update the handle live: any of its options (`appearance` and `locale` included), propagated to every mounted element. React consumers never call it — updating the namespace component's props does the same.
**Signature:** `(options: Partial) => void`
## Returned objects
Live objects returned by the methods above — hold the reference and call it on your page; these are capabilities, not serializable data.
## `DepositSavedCard`
A card the consumer already holds for this account — the element renders it as a funding row and hands the choice back through `cardDepositRequested`; it never charges a card itself.
### `id`
Payment-method id echoed back in `cardDepositRequested`.
**Signature:** `string`
### `label`
Row label, e.g. `Visa •••• 4242`.
**Signature:** `string`
### `cardBrand`
Brand key used to pick the row icon — `visa`, `mastercard`, `amex`, `discover`, `jcb`.
**Signature:** `string | null | undefined`
## `DepositCardFee`
The public surface of `DepositCardFee`.
### `percentageFee`
Percentage POINTS, not a fraction: `2.9` means 2.9%.
**Signature:** `number`
### `fixedFee`
Flat fee in major units: `0.3` means \$0.30.
**Signature:** `number`
### `radarFee`
Fraud-screening fee in major units.
**Signature:** `number`
## Elements
The elements this group mounts — each has its own page:
Funds a Whop account. Renders an amount field and the account's live funding rails — crypto (a per-network deposit address with its QR) and bank transfer (the wire fields for each settlement currency) — resolved from the account id with no credentials, so it works on any page. Pass `savedCards`, `allowNewCard`, or `showPlatformBalance` to offer rails you settle yourself: the element collects the amount and the choice, then emits `cardDepositRequested` / `addCardRequested` / `platformBalanceSelected` and waits for you to call `showStep({ step: 'amount' })` when your own screen is done.