ActionsElement - Whop Docs

This page documents @whop/elements@1.0.0-beta.2 and @whop/elements-react@1.0.0-beta.2.

Pre-release, not yet part of a stable release. Mounts inside Wallet. Pass props and callbacks through the create options or React props.

import { WhopElements, Wallet, ActionsElement } from "@whop/elements-react";
import { loadWhop } from "@whop/elements";

function Example() {
  return (
    <WhopElements elements={loadWhop()}>
      <Wallet /* options */>
        <ActionsElement onDepositRequested={(e) => console.log(e)} onAcceptRequested={(e) => console.log(e)} onSendRequested={(e) => console.log(e)} />
      </Wallet>
    </WhopElements>
  );
}

<script src="https://js.whop.cloud/elements/amber/elements.js" data-whop-elements></script>
<script type="module">
  const wallet = window.WhopElements().wallet.create({ /* options */ });
  wallet.create('actions', {
    onDepositRequested: (e) => console.log(e),
    onAcceptRequested: (e) => console.log(e),
    onSendRequested: (e) => console.log(e)
  }).mount('#wallet-actions');
</script>

Example data. Open the Playground.

Props

boolean

Show the Deposit button. Defaults to true.

boolean

Show the Accept button. Defaults to true.

boolean

Show the Send button. Defaults to true.

boolean

Disable the Deposit button while keeping it visible. Defaults to false.

boolean

Disable the Accept button while keeping it visible. Defaults to false.

boolean

Disable the Send button while keeping it visible. Defaults to false.

Events

Pass callbacks in the create options or React props.

`onDepositRequested`

The Deposit button was pressed and the Wallet controller opened its deposit overlay. Signature: ((payload: Record<string, never>) => void)

`onAcceptRequested`

The Accept button was pressed and the Wallet controller opened the corresponding Whop setup page. Signature: ((payload: Record<string, never>) => void)

`onSendRequested`

The Send button was pressed and the Wallet controller opened its send overlay. Signature: ((payload: Record<string, never>) => 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<ActionsElementProps>) => void

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-Actions`	The row containing the Deposit, Accept, and Send buttons.

const wallet = whop.wallet.create({
  appearance: {
    classes: {
      'whop-Actions': { borderRadius: '8px', fontWeight: '600' }
    }
  }
});

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

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

​Props

​Events

​onDepositRequested

​onAcceptRequested

​onSendRequested

​onLoaderStart

​onReady

​onError

​Methods

​mount

​destroy

​update

​Styling

Props

Events

`onDepositRequested`

`onAcceptRequested`

`onSendRequested`

`onLoaderStart`

`onReady`

`onError`

Methods

`mount`

`destroy`

`update`

Styling