PaymentDetailElement

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

Since v1.0.0. Mounts inside 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().

import { WhopElements, Dashboard, PaymentDetailElement } from "@whop/elements-react";
import { loadWhop } from "@whop/elements";

function Example() {
  return (
    <WhopElements elements={loadWhop()}>
      <Dashboard /* options */>
        <PaymentDetailElement onRefundRequested={(e) => console.log(e)} onRetryRequested={(e) => console.log(e)} onVoidRequested={(e) => console.log(e)} onInvoiceRequested={(e) => console.log(e)} onCustomerSelected={(e) => console.log(e)} onMessageRequested={(e) => console.log(e)} />
      </Dashboard>
    </WhopElements>
  );
}

<script src="https://cdn.whop.com/elements/amber/elements.js" data-whop-elements></script>
<script type="module">
  const dashboard = window.WhopElements().dashboard.create({ /* options */ });
  dashboard.create('paymentDetail', {
    onRefundRequested: (e) => console.log(e),
    onRetryRequested: (e) => console.log(e),
    onVoidRequested: (e) => console.log(e),
    onInvoiceRequested: (e) => console.log(e),
    onCustomerSelected: (e) => console.log(e),
    onMessageRequested: (e) => console.log(e)
  }).mount('#dashboard-paymentDetail');
</script>

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.

object

Hide properties

string

required

`onRetryRequested`

Confirm and authorize another charge attempt in your application.

object

Hide properties

string

required

`onVoidRequested`

Confirm and authorize voiding this payment in your application.

object

Hide properties

string

required

`onInvoiceRequested`

View or download the invoice in your application.

object

Hide properties

string

required

`onCustomerSelected`

Open the customer in your application.

object

Hide properties

string

required

string | null

required

`onMessageRequested`

Open your customer messaging UI.

object

Hide properties

string

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.

`refresh`

Reload the payment and its fees after a host action completes. Returns Promise<void>

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

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-PaymentDetail`	The payment detail page

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

dashboard.update({
  appearance: { classes: { 'whop-PaymentDetail': { fontWeight: '700' } } }
});

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

​Props

​Events

​onRefundRequested

​onRetryRequested

​onVoidRequested

​onInvoiceRequested

​onCustomerSelected

​onMessageRequested

​onLoaderStart

​onReady

​onError

​Methods

​refresh

​mount

​destroy

​update

​Styling

Props

Events

`onRefundRequested`

`onRetryRequested`

`onVoidRequested`

`onInvoiceRequested`

`onCustomerSelected`

`onMessageRequested`

`onLoaderStart`

`onReady`

`onError`

Methods

`refresh`

`mount`

`destroy`

`update`

Styling