Skip to main content
This page documents @whop/elements@1.0.0-beta.3 and @whop/elements-react@1.0.0-beta.3.
Pre-release, not yet part of a stable release.
Mounts inside Payments. Pass props and callbacks through the create options or React props.
Exclusive. CardElement is an alternative to PaymentElement or CardFields in this Payments handle. Mount one at a time. Destroy it before mounting another.
Mount inside <Payments>, which owns the charge and the confirmation token. <Payments> itself mounts inside <WhopElements>. Reach for it when the form takes a card and nothing else: it registers itself as the collection surface, so createConfirmationToken tokenizes it with nothing else wired.

Example data. Open the Playground.

​
Props

​
"compact" | "stacked"
stacked (default) places the card number above expiration and security code. compact places all three in one row. Defaults to "stacked".

​
Events

Pass callbacks in the create options or React props.

​
onChange

Fires when card fields change. complete becomes true after the buyer fills all three. Use it to enable confirmation. brand is the detected card network. funding is the detected funding type (credit, debit, or prepaid), null until the number identifies one. issuingCountry is the lowercase two-letter code of the country the card was issued in, null until the number identifies one.Signature: ((payload: { complete: boolean; brand: string; funding: string | null; issuingCountry: string | null; }) => 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<CardElementProps>) => 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.
In React, pass appearance to <Payments>. Set it globally with WhopElements({ appearance }).

​
Props

​
'stacked' | 'compact'
stacked puts the number above expiry and security code. compact puts all three in one row. Defaults to stacked.
​
(payload: CardFieldsChangePayload) => void
Fires on every edit with completeness and per-field errors.
​
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.

​
CardFieldsChangePayload

What onChange hands back:
  • complete: boolean: every field is filled and valid
  • errors: Record<string, string>: per-field messages, empty exactly when complete is true

​
States

The three fields render together once the publishable key resolves. onChange reports complete when all three are valid, and the element shows its own per-field errors.

​
Good to know

  • Card numbers never pass through your code. The fields are PCI-isolated native inputs, and the SDK hands Whop a token, so your app stays out of PCI scope.
  • Mounting this makes the provider’s collection surface the card, so createConfirmationToken tokenizes it with no extra wiring. Do not mount it beside a PaymentElement: exactly one collection surface is live at a time.
  • For a form where the three fields sit in your own layout, use CardFields instead.
Wrap your app in <WhopElements getToken={…}> once, then mount <Payments> around the elements. See Getting started and Appearance.