Skip to main content

​
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

PropertyTypeRequiredDefaultDescription
appearanceAppearance | undefinedNo-Customize the appearance of the Whop embedded Elements. Includes theme settings like light/dark mode and accent colors.
locale"en" | undefinedNo”en”The locale to use for all Elements. Controls the language and formatting of text, dates, and numbers.
environmentWhopElementsEnvironment | undefinedNo”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.
ParameterTypeDescription
optionsPayoutsSessionOptionsConfiguration options for the payouts session
Returns: PayoutsSession

​
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.
ParameterTypeDescription
optionsPartial<WhopElementsOptions>Partial options object with the values to update