EmailElement - Whop Docs

Upcoming — generated from the latest merged element source; documents unreleased development. Use the channel picker at the top of the sidebar for the docs of a published release.

In development — not yet part of a stable release. Belongs to the Payments group. Render <EmailElement /> inside it (React), or call payments.create('email', { … }) on the handle (vanilla) — consumer props and on<Event> callbacks both go in the create options / JSX props.

Preview

A live, interactive demo of this element with sample data:

Usage

import { WhopElements, Payments, EmailElement } from "@whop/elements-react";
import { loadWhop } from "@whop/elements";

function Example() {
  return (
    <WhopElements elements={loadWhop()}>
      <Payments /* options */>
        <EmailElement onChange={(payload) => console.log("change", payload)} />
      </Payments>
    </WhopElements>
  );
}

<script src="https://js.whop.cloud/elements/amber/elements.js" data-whop-elements></script>
<script type="module">
  const payments = window.WhopElements().payments.create({ /* options */ });
  payments.create('email', { onChange: (payload) => console.log("change", payload) }).mount('#payments-email');
</script>

Props

boolean

Render the built-in localized label above the field. Hosts that render their own label pass false — the input keeps a localized aria-label either way. Defaults to true.

string

Seed value applied once at mount. Defaults to "".

string

Placeholder text for the email input. Empty (default) renders you@example.com. Defaults to "".

Events

Pass a callback in the create options (or React prop) to receive these.

`onChange`

The email changed — complete: true means it is a plausible address. Fires with the signed-in email when the buyer signs in. The controller consumes the same event to feed createConfirmationToken. Signature: ((payload: { email: string; complete: boolean; }) => void)

`onLoaderStart`

Fired the moment the element’s own loading skeleton has painted inside its frame — the earliest point a consumer-managed loading state can hand off without ever exposing a blank. Always precedes onReady; most consumers only need onReady. Signature: (() => void)

`onReady`

Fired once the element has booted and painted its first complete frame. Signature: (() => void)

`onError`

Fired when the element fails to load or crashes; the element shows its own error fallback. message is human-readable; framework refusals also carry code (e.g. HOST_SOURCE_FAILED, with sourceKey naming the failed hostState key) so hosts can switch on codes, never message text. Signature: ((e: { message: string; code?: string | undefined; sourceKey?: string | undefined; }) => void)

Methods

Call these on the element handle — the return of create (vanilla) or the component ref (React).

`mount`

Place the element on the page: appends its container to target (a CSS selector or an element) and starts loading. Nothing renders until this is called. React consumers never call it — the component mounts itself. Signature: (target: string | HTMLElement) => void

`destroy`

Remove the element from the page and release its frame and subscriptions. Safe to call more than once. React consumers never call it — unmounting the component does it. Signature: () => void

`update`

Change this element’s consumer props after mount — it re-renders with the merged props. React consumers never call it — updating the JSX props does the same. Signature: (options: Partial<EmailElementProps>) => void

Styling

Each part below is a stable class name — safe to depend on. Restyle a part by mapping its class to a style declaration object under appearance.classes (properties camelCase or kebab-case, values as strings with units — the same shape as React’s style prop). The element renders in its own frame, so page stylesheets can’t reach it: these declarations are sanitized against a safe-property allowlist and injected inside the frame for you.

Class	Targets
`.whop-Email`	The email element root
`.whop-EmailError`	The invalid-email message under the field
`.whop-EmailInput`	The email input
`.whop-EmailInputInvalid`	Added to the input while the value is not a plausible email
`.whop-EmailLabel`	The label above the email field
`.whop-EmailSignedIn`	The signed-in row under the locked field
`.whop-EmailSignIn`	The Welcome back sign-in affordance shown for a recognized email
`.whop-EmailSignInError`	The sign-in failure message under the affordance
`.whop-EmailSignOut`	The control that returns the field to a different email

const payments = whop.payments.create({
  appearance: {
    classes: {
      'whop-Email': { borderRadius: '8px', fontWeight: '600' },
      'whop-EmailError': { borderRadius: '8px', fontWeight: '600' },
      'whop-EmailInput': { borderRadius: '8px', fontWeight: '600' },
      'whop-EmailInputInvalid': { borderRadius: '8px', fontWeight: '600' },
      'whop-EmailLabel': { borderRadius: '8px', fontWeight: '600' },
      'whop-EmailSignedIn': { borderRadius: '8px', fontWeight: '600' },
      'whop-EmailSignIn': { borderRadius: '8px', fontWeight: '600' },
      'whop-EmailSignInError': { borderRadius: '8px', fontWeight: '600' },
      'whop-EmailSignOut': { borderRadius: '8px', fontWeight: '600' }
    }
  }
});

// restyle live at any point — the same shape through update()
payments.update({
  appearance: { classes: { 'whop-Email': { fontWeight: '700' } } }
});

In React, pass the same object as the appearance prop on <Payments>; appearance also applies globally at WhopElements({ appearance }).

​Preview

​Usage

​Props

​Events

​onChange

​onLoaderStart

​onReady

​onError

​Methods

​mount

​destroy

​update

​Styling

Preview

Usage

Props

Events

`onChange`

`onLoaderStart`

`onReady`

`onError`

Methods

`mount`

`destroy`

`update`

Styling