This page documents
@whop/elements@1.0.0-beta.5 and @whop/elements-react@1.0.0-beta.5.Dashboard. accountId and accessToken come from there. Pass props and callbacks through the create options or React props. Keep the created handle, or React ref, to call refresh().
Example data. Open the Playground.
Props
boolean
Show the top-right Refund button and action menu. Mutating actions require event handlers. Defaults to
true.string
The payment to display, prefixed pay_. Required to load a payment. Defaults to
"".boolean
Show the payment amount, fees, and net amount. Defaults to
true.boolean
Show the payment activity timeline. Defaults to
true.boolean
Show customer name, username, email, phone, and billing address when permitted. Defaults to
true.boolean
Show product, plan, payment method, and payment identifiers. Defaults to
true.boolean
Show the customer journey. Reads the account-scoped Events API only while visible. Defaults to
true.Events
Pass callbacks in the create options or React props.onRefundRequested
Confirm and authorize a refund in your application. Enabled only when refundable and a handler is provided.
Signature: ((payload: { paymentId: string; }) => void)
onRetryRequested
Confirm and authorize another charge attempt in your application.
Signature: ((payload: { paymentId: string; }) => void)
onVoidRequested
Confirm and authorize voiding this payment in your application.
Signature: ((payload: { paymentId: string; }) => void)
onInvoiceRequested
View or download the invoice in your application.
Signature: ((payload: { paymentId: string; }) => void)
onCustomerSelected
Open the customer in your application.
Signature: ((payload: { userId: string; memberId: string | null; }) => void)
onMessageRequested
Open your customer messaging UI.
Signature: ((payload: { userId: 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 bycreate, or through a React ref.
refresh
Reload the payment and its fees after a host action completes.
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<PaymentDetailElementProps>) => void
Styling
Style these parts throughappearance.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.
appearance to <Dashboard>. Set it globally with WhopElements({ appearance }).