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.
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
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" | 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 |
PayoutsSession
createChatSession(options)
Create a new chat session for managing chat elements.
| Parameter | Type | Description |
|---|
options | ChatSessionOptions | Configuration options for the chat session |
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 |
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 |
