Skip to main content
Mounts inside Payments. Pass props and callbacks through the create options or React props.
Mounts inside a WhopPayments scope. The merchant-of-record line every payment surface has to carry, with the Whop wordmark drawn as a path.
Mount inside <Payments>, which owns the charge and the confirmation token. <Payments> itself mounts inside <WhopElements>. Required on every form that collects: createConfirmationToken refuses while none is mounted, and it themes with the rest of your form.

Example data. Open the Playground.

Props

This element takes no consumer props.

Events

Pass callbacks in the create options or React props.

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<BrandingElementProps>) => void

Styling

This element doesn’t expose class names for styling. Use appearance (theme, accent color, variables) to restyle it.

States

Renders immediately. It fetches nothing and has no failure state.

Good to know

  • createConfirmationToken refuses while it is unmounted. Whop is merchant of record on these sales, so the buyer has to be told so on the screen where they pay.
  • The wordmark is a vector path, not an asset, so the framework carries no image bundle.

Install

Mount it inside a WhopPayments(accountID:charge:) scope, which creates the controller and hands it to its content. payments.buyer is the signed-in buyer once an email sign-in has proven one. WhopBrandingElement has to be on screen too, because Whop is merchant of record on these sales and createConfirmationToken refuses without it. Style with .whopElementsAppearance(_:). The module is Elements, not the wallet SDK’s WhopElements. See Getting started and Appearance.

Props

StyleProp<ViewStyle>
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.
ReactNode
Rendered instead of the built-in skeleton while the element loads.
() => void
Fires once the element is interactive. <Payments> groups these, so its own onLoadingChange is usually the one you want.
(error: { message: string; code?: string }) => void
A load or configuration failure for this element. The element renders its own error face either way.

States

Renders immediately. It has no data to load and no states of its own.

Good to know

  • Required. createConfirmationToken refuses with a BrandingRequiredError while no BrandingElement is mounted, exactly as the web elements hold their reveal until branding attaches.
  • Mount it once anywhere inside <Payments>, typically under your submit button.
  • The wordmark follows the resolved theme’s light or dark appearance on its own.
Wrap your app in <WhopElements getToken={…}> once, then mount <Payments> around the elements. See Getting started and Appearance.