> ## 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.

# SettlementElement

> The account balance details shown by Whop's dashboard: available funds, pending settlement dates, reserve terms, and any negative balance. It opens as a 550px modal and uses the balances handle's account, currency, and credential.

*Since `v1.0.0`.*

Opens as a modal from [`Balances`](https://docs.whop.com/elements/upcoming/wallet/balances), in [`Wallet`](https://docs.whop.com/elements/upcoming/wallet/overview): `wallet.create('balances').createOverlay('settlement')`. Pass props and callbacks in the create options.

> [!NOTE]
>
> This element is **modal-only**. Open it with `createOverlay`; it has no inline mount.

```tsx React theme={null}
import { WhopElements, Wallet, Balances, SettlementElement } from "@whop/elements-react";
import { loadWhop } from "@whop/elements";

function Example() {
  return (
    <WhopElements elements={loadWhop()}>
      <Wallet /* options */>
        <Balances>
          <SettlementElement />
        </Balances>
      </Wallet>
    </WhopElements>
  );
}
```

```html JavaScript theme={null}
<script src="https://cdn.whop.com/elements/amber/elements.js" data-whop-elements></script>
<script type="module">
  const wallet = window.WhopElements().wallet.create({ /* options */ });
  const balances = wallet.create('balances', { /* options */ });
  balances.createOverlay('settlement').open();
</script>
```

Example data. [Open the Playground](https://docs.whop.com/elements/upcoming/wallet/overview#playground).

## Props

**enabled** `boolean`

Off, the Element performs no read and renders an empty details state. Defaults to `true`.

**showSourceCurrency** `boolean`

Show amounts in the selected holding. Turn this off to value the details in USD. Defaults to `true`.

## Events

Pass callbacks in the create options or React props.

### `onLoaderStart`

Runs after the loading skeleton first paints and before `onReady`.

### `onReady`

Runs after the element's first complete paint.

### `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.

**e** `object`

**properties**

**message** `string` *required*

**code** `string`

**sourceKey** `string`

## Methods

Call these on the handle returned by `create`, or through a React `ref`.

### `refresh`

Re-fetch settlement and reserve details.

**Returns** `Promise<void>`

### `mount`

Mounts the element in `target` and starts loading. React components mount themselves.

**Parameters**

**target** `string | HTMLElement` *required*

### `destroy`

Removes the element and releases its frame and subscriptions. You can call it more than once. React removes the element automatically.

### `update`

Merges new props into the mounted element. In React, change the component props instead.

**Parameters**

**options** `Partial\<SettlementElementProps\>` *required*

## Styling

Style these parts through `appearance.classes`. Use camel case or kebab case for property names and include units. Page stylesheets can't reach the element's frame. The framework validates each declaration before injecting it.

| Class | Targets |
| - | - |
| `.whop-BalanceSettlementSurface` | The dashboard-style balance details modal body |

```ts theme={null}
const wallet = whop.wallet.create({
  appearance: {
    classes: {
      'whop-BalanceSettlementSurface': { borderRadius: '8px', fontWeight: '600' }
    }
  }
});

wallet.update({
  appearance: {
    classes: { 'whop-BalanceSettlementSurface': { fontWeight: '700' } }
  }
});
```

In React, pass `appearance` to `<Wallet>`. Set it globally with `WhopElements({ appearance })`.


## Related topics

- [SettlementElement](https://docs.whop.com/elements/beta/wallet/balances-settlement.md)
- [Balances](https://docs.whop.com/elements/beta/wallet/balances.md)
- [Preferred Settlement Currency](https://docs.whop.com/developer/payouts/preferred-settlement-currency.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.