Getting started - Whop Docs

Whop Elements are hosted, themeable UI components you embed in your own site. Each element renders in an isolated frame served from Whop’s CDN — you install a thin, fully typed package and the element code stays up to date on its own.

Install

npm install @whop/elements-react @whop/elements

npm install @whop/elements

Mount your first element

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

function Example() {
  return (
    <WhopElements elements={loadWhop()}>
      <Wallet /* options */>
        <DepositElement />
      </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('deposit').mount('#wallet-deposit');
</script>

Prefer npm over the script tag? loadWhop() injects the same hosted script and resolves the global constructor:

import { loadWhop } from "@whop/elements";

const whop = (await loadWhop())({ locale: "en" });
const wallet = whop.wallet.create({ /* options */ });

Global configuration

Everything you pass at construction applies to every element group created from that instance (a handle’s own options can override per group):

Appearance

Visual customization for every element — theme (light/dark + palettes), variables (CSS custom properties), and classes (per-part style declarations). The color scheme is applied before an element’s first paint, so dark pages never flash light. See Appearance.

"en" | "es" | "zh" | "nl" | "pt" | "de" | "it" | "fr" | "ja" | "pl" | "tr"

Locale for element UI text — one of the app’s built locales; any other value falls back to the default locale. Defaults to "en".

"production" | "sandbox"

Which Whop API environment the elements talk to — "sandbox" targets the sandbox API (test data; no real money moves). The sandbox environment is not yet generally available. Defaults to "production".

const whop = WhopElements({
  locale: 'es',
  appearance: { theme: { appearance: 'dark', accentColor: 'blue' } }
});

In React, the same object rides <WhopElements appearance={…} locale={…}>.

Appearance — theming, CSS variables, and per-part restyling
Wallet — Funds a Whop account. Mint it with the account id, mount the deposit element, and the payer gets that account’s live funding rails — a crypto deposit address per network and the bank wire fields per settlement currency — resolved with no credentials. Rails you settle yourself (a saved card, a platform balance) are opt-in props whose choices come back as events on the element.

​Install

​Mount your first element

​Global configuration

​Next

Install

Mount your first element

Global configuration

Next