Getting Started - Whop Docs

Overview

The main entry point for Whop embedded components. WhopElements is the root object that manages configuration and creates sessions for different element types. Initialize it once and use it to create sessions for payouts, payments, and other embedded experiences.

Installation

npm install @whop/embedded-components-vanilla-js @whop/embedded-components-react-js

npm install @whop/embedded-components-vanilla-js

Examples

Basic initialization

import WhopElements from "@whop/embeddable-components";

const whopElements = new WhopElements({
  appearance: {
    theme: { appearance: "light" },
  },
  locale: "en",
});

Creating a payouts session

const session = whopElements.createPayoutsSession({
  token: async () => {
    // Fetch token from your backend
    const response = await fetch("/api/payouts-token");
    const data = await response.json();
    return data.token;
  },
  companyId: "your-company-id",
  redirectUrl: "https://yourapp.com/callback",
});

// Create and mount an element
const element = session.createElement("balance-element", {});
element.mount("#balance-container");

Updating options after initialization

// Switch to dark mode
whopElements.updateOptions({
  appearance: {
    theme: { appearance: "dark" },
  },
});

Listening to option changes

whopElements.on("optionsUpdated", (options) => {
  console.log("Options changed:", options);
});

Options

Property	Type	Required	Default	Description
`appearance`	`Appearance` \| undefined	No	-	Customize the appearance of the Whop embedded Elements. Includes theme settings like light/dark mode and accent colors.
`locale`	`"en" \| "es" \| "zh" \| "nl" \| "pt" \| "de" \| "it" \| "fr" \| "ja" \| "pl" \| "tr" \| undefined`	No	”en”	The locale to use for all Elements. Controls the language and formatting of text, dates, and numbers.
`environment`	`WhopElementsEnvironment` \| undefined	No	”production”	The environment to use for API calls. Use ‘“sandbox”’ for testing without affecting production data.

Events

Events emitted by WhopElements. Listen to these events using the on() method.

`optionsUpdated`

Emitted when the WhopElements options are updated via updateOptions(). Callback signature: (options: WhopElementsOptions) => void

Methods

`createPayoutsSession(options)`

Create a new payouts session for managing payout elements. The session handles authentication and provides methods to create payout-related elements like balance displays, withdrawal forms, and more.

Parameter	Type	Description
`options`	`PayoutsSessionOptions`	Configuration options for the payouts session

Returns: PayoutsSession

`createChatSession(options)`

Create a new chat session for managing chat elements.

Parameter	Type	Description
`options`	`ChatSessionOptions`	Configuration options for the chat session

Returns: ChatSession

`createWalletSession(options)`

Create a new wallet session for managing wallet elements. The session handles authentication and provides methods to create wallet-related elements like balance displays, send/receive flows, and conversions.

Parameter	Type	Description
`options`	`WalletSessionOptions`	Configuration options for the wallet session

Returns: WalletSession

`updateOptions(options)`

Update the WhopElements configuration after initialization. Changes will be propagated to all active sessions and elements. Only the provided options will be updated; others remain unchanged.

Parameter	Type	Description
`options`	Partial<`WhopElementsOptions`>	Partial options object with the values to update

​Overview

​Installation

​Examples

​Basic initialization

​Creating a payouts session

​Updating options after initialization

​Listening to option changes

​Options

​Events

​optionsUpdated

​Methods

​createPayoutsSession(options)

​createChatSession(options)

​createWalletSession(options)

​updateOptions(options)

​Related Types