> ## 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.
# EmailElement
> Collects the buyer's email and passes it to `payments.createConfirmationToken()` while mounted. Explicit `billingDetails.email` wins. A matching Whop account shows optional sign-in with code verification. Successful sign-in unlocks saved payment methods in the payment element. Buyers can continue as guests.
Mounts inside [`Payments`](/elements/upcoming/payments/overview). Pass props and callbacks through the create options or React props.
Mount inside `
`, which owns the charge and the confirmation token. `` itself mounts inside ``. It collects the buyer's email and publishes it to the provider, so `createConfirmationToken` sends it without being passed anything.
```tsx React theme={null}
import { WhopElements, Payments, EmailElement } from "@whop/elements-react";
import { loadWhop } from "@whop/elements";
function Example() {
return (
console.log(e)} />
);
}
```
```tsx React Native theme={null}
import { EmailElement, Payments } from '@whop/elements-react-native';
export function ContactStep() {
return (
console.log(email, complete)} />
);
}
```
```html JavaScript theme={null}
```
Example data. [Open the Playground](/elements/upcoming/payments/overview#playground).
## Props
Shows the localized label. Set `false` when supplying your own. The input retains a localized `aria-label`. Defaults to `true`.
Seed value applied once at mount. Defaults to `""`.
Placeholder text for the email input. Empty (default) renders `you@example.com`. Defaults to `""`.
## Events
Pass callbacks in the create options or React props.
### `onChange`
Fires when the email changes. `complete` is true when plausible. Sign-in fires it with the signed-in email, which also feeds `createConfirmationToken()`.
**Signature:** `((payload: { email: string; complete: boolean; }) => void)`
### `onLoaderStart`
Runs after the loading skeleton first paints and before `onReady`.
**Signature:** `(() => void)`
### `onReady`
Runs after the element's first complete paint.
**Signature:** `(() => void)`
### `onError`
Runs when the element fails to load or crashes. The fallback remains visible. Use `code` for programmatic handling. `sourceKey` identifies a failed host-state source.
**Signature:** `((e: { message: string; code?: string | undefined; sourceKey?: string | undefined; }) => void)`
## Methods
Call these on the handle returned by `create`, or through a React `ref`.
### `mount`
Mounts the element in `target` and starts loading. React components mount themselves.
**Signature:** `(target: string | HTMLElement) => void`
### `destroy`
Removes the element and releases its frame and subscriptions. You can call it more than once. React removes the element automatically.
**Signature:** `() => void`
### `update`
Merges new props into the mounted element. In React, change the component props instead.
**Signature:** `(options: Partial
) => void`
## Styling
Style these parts through `appearance.classes`. Use camel case or kebab case for property names and include units. Page stylesheets can't reach the element's frame. The framework validates each declaration before injecting it.
| Class | Targets |
| ------------------------- | ------------------------------------- |
| `.whop-Email` | Email element root |
| `.whop-EmailError` | Invalid email message |
| `.whop-EmailInput` | The email input |
| `.whop-EmailInputInvalid` | Email input with an implausible value |
| `.whop-EmailLabel` | Email field label |
| `.whop-EmailSignedIn` | Signed-in buyer row |
| `.whop-EmailSignIn` | Welcome back sign-in control |
| `.whop-EmailSignInError` | Sign-in error message |
| `.whop-EmailSignOut` | Choose a different email control |
```ts theme={null}
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' }
}
}
});
// 9 classes use this shape
payments.update({
appearance: { classes: { 'whop-Email': { fontWeight: '700' } } }
});
```
In React, pass `appearance` to ``. Set it globally with `WhopElements({ appearance })`.
## Props
Seed value applied once at mount.
Shows the localized label. Defaults to `true`.
Empty renders `you@example.com`.
Fires on every edit.
Applied to the element's outer `View`. For theming, prefer `appearance.parts` on the provider, which covers every element on this surface. Note the React Native part names are their own set today, not the web's `whop-*` class names, so a web appearance object does not port across unchanged.
Rendered instead of the built-in skeleton while the element loads.
Fires once the element is interactive. `` groups these, so its own `onLoadingChange` is usually the one you want.
A load or configuration failure for this element. The element renders its own error face either way.
## `EmailChangePayload`
What `onChange` hands back:
* `email: string`: the current value
* `complete: boolean`: the address parses
## States
Renders immediately. `onChange` reports `complete` once the address parses, and the element shows its own validation message on blur.
## Good to know
* The published email is what the confirmation token carries as `billing_details.email`. Passing `billingDetails.email` to `createConfirmationToken` overrides it.
* Set `label={false}` when your form supplies its own label. The input keeps its accessibility label either way.
Wrap your app in `` once, then mount `` around the elements. See [Getting started](/elements/upcoming/getting-started) and [Appearance](/elements/upcoming/appearance).