VerificationElement

Mounts inside Wallet. accountId comes from there. Pass props and callbacks through the create options or React props. Keep the created handle, or React ref, to call refresh().

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

function Example() {
  return (
    <WhopElements elements={loadWhop()}>
      <Wallet /* options */>
        <VerificationElement onVerificationRequested={(e) => console.log(e)} />
      </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('verification', { onVerificationRequested: (e) => console.log(e) }).mount('#wallet-verification');
</script>

Example data. Open the Playground.

Props

string

A scoped token for the read and for starting verification — needs payout:account:read and identity:write. Mint it on your server with POST /api/v1/access_tokens. Omitted, the calls carry the viewer’s own session, which only answers same-origin.

"business" | "individual"

Which verification the button starts. individual (KYC) is what unlocks payouts and a Whop card. business (KYB) covers that and additionally unlocks financing and business cards — use it for a company that will need those. Defaults to "individual".

Events

Pass callbacks in the create options or React props.

`onVerificationRequested`

The viewer pressed the button. The element starts the hosted session and leaves for it itself — this fires alongside, so a host can record the trip or show its own state. Signature: ((payload: { accountId: string; }) => 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.

`refresh`

Re-read the account. Call it when the viewer returns from verifying so the banner reflects the new state without waiting for the cache to expire. Signature: () => Promise<void>

`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<VerificationElementProps>) => 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-VerificationBanner`	The verification nudge banner

const wallet = whop.wallet.create({
  appearance: {
    classes: {
      'whop-VerificationBanner': { borderRadius: '8px', fontWeight: '600' }
    }
  }
});

wallet.update({
  appearance: {
    classes: { 'whop-VerificationBanner': { fontWeight: '700' } }
  }
});

In React, pass appearance to <Wallet>. Set it globally with WhopElements({ appearance }).

​Props

​Events

​onVerificationRequested

​onLoaderStart

​onReady

​onError

​Methods

​refresh

​mount

​destroy

​update

​Styling