CapabilitiesElement

This page documents @whop/elements@1.9.0 and @whop/elements-react@1.9.0.

Since v1.0.0. Mounts inside Verifications. Pass props and callbacks through the create options or React props.

import { WhopElements, Verifications, CapabilitiesElement } from "@whop/elements-react";
import { loadWhop } from "@whop/elements";

function Example() {
  return (
    <WhopElements elements={loadWhop()}>
      <Verifications /* options */>
        <CapabilitiesElement onVerificationRequested={(e) => console.log(e)} />
      </Verifications>
    </WhopElements>
  );
}

<script src="https://cdn.whop.com/elements/amber/elements.js" data-whop-elements></script>
<script type="module">
  const verifications = window.WhopElements().verifications.create({ /* options */ });
  verifications.create('capabilities', { onVerificationRequested: (e) => console.log(e) }).mount('#verifications-capabilities');
</script>

Example data. Open the Playground.

Props

boolean

Hide the individual and business verification rows, leaving only the capabilities. Defaults to false.

boolean

Hide the capabilities list, leaving only the two verification rows. Defaults to false.

boolean

Hide the Payouts capability row. Defaults to false. Since v1.9.0.

boolean

Hide the Bank deposits capability row. Defaults to false. Since v1.9.0.

boolean

Hide the Whop Card capability row. Defaults to false. Since v1.9.0.

boolean

Hide the Ads capability row. Defaults to false. Since v1.9.0.

Events

Pass callbacks in the create options or React props.

`onVerificationRequested`

The viewer pressed a verify button. The element never navigates — mount your own verification, such as this namespace’s kyc element, in answer to this.

object

Hide properties

string

required

"individual" | "business"

required

`onLoaderStart`

Runs after the loading skeleton first paints and before onReady.

`onReady`

Runs after the element’s first complete paint.

`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.

object

Hide properties

string

required

string

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. Parameters

string | HTMLElement

required

`destroy`

Removes the element and releases its frame and subscriptions. You can call it more than once. React removes the element automatically.

`update`

Merges new props into the mounted element. In React, change the component props instead. Parameters

Partial<CapabilitiesElementProps>

required

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-CapabilityRow`	One capability row: its name, hint and state
`.whop-VerificationStatusRow`	One verification row: its name and its action
`.whop-VerificationStatusSurface`	The verification status surface

const verifications = whop.verifications.create({
  appearance: {
    classes: {
      'whop-CapabilityRow': { borderRadius: '8px', fontWeight: '600' },
      'whop-VerificationStatusRow': { borderRadius: '8px', fontWeight: '600' },
      'whop-VerificationStatusSurface': { borderRadius: '8px', fontWeight: '600' }
    }
  }
});

verifications.update({
  appearance: { classes: { 'whop-CapabilityRow': { fontWeight: '700' } } }
});

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

​Props

​Events

​onVerificationRequested

​onLoaderStart

​onReady

​onError

​Methods

​mount

​destroy

​update

​Styling

Props

Events

`onVerificationRequested`

`onLoaderStart`

`onReady`

`onError`

Methods

`mount`

`destroy`

`update`

Styling