BalanceReportElement

Since v1.0.0. Mounts inside Reports, in Wallet. accountId and accessToken come from Wallet. Pass props and callbacks through the create options or React props. Keep the created handle, or React ref, to call refresh().

import { WhopElements, Wallet, Reports, BalanceReportElement } from "@whop/elements-react";
import { loadWhop } from "@whop/elements";

function Example() {
  return (
    <WhopElements elements={loadWhop()}>
      <Wallet /* options */>
        <Reports>
          <BalanceReportElement onActivityRequested={(e) => console.log(e)} onPaymentsRequested={(e) => console.log(e)} onExportReady={(e) => console.log(e)} />
        </Reports>
      </Wallet>
    </WhopElements>
  );
}

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

Example data. Open the Playground.

Props

This element takes no consumer props.

Events

Pass callbacks in the create options or React props.

`onActivityRequested`

Emitted when activity opens inline, with its exact filters. Your host can also use this callback to navigate to its own activity page.

ReportActivityFilters

Hide properties

string

"money_in" | "money_out"

string[]

Show values

Each item is one of "fees", "platform_balance_transfer_outgoing", "payment_gross", "topup", "topup_fee", "payment_gross_reversal", "topup_reversal", "payment_refund", "payment_refund_reversal", "platform_balance_payment", "platform_balance_payment_refund", "passthrough_gmv", "installment_default", "payment_processing_fixed_fee", "payment_processing_percentage_fee", "billing_percentage_fee", "cross_border_percentage_fee", "fx_percentage_fee", "orchestration_percentage_fee", "revshare_percentage_fee", "stripe_domestic_processing_fee", "stripe_international_processing_fee", "three_ds_fixed_fee", "whop_processing_fee", "economic_intelligence_percentage_fee", "high_risk_merchant_fee", "fraud_prevention_fee", "buyer_fee", "sales_tax_fee", "payout_fee", "affiliate_fee", "marketplace_affiliate_fee", "application_fee", "platform_markup_fee", "platform_markup_fee_payout", "sales_tax_remittance", "sales_tax_remittance_reversal", "payment_dispute", "payment_dispute_adjustment", "payment_dispute_fee", "payment_dispute_reversal", "platform_covered_dispute", "dispute_alert_fee", "dispute_representment_fee", "dispute_hold_adjustment", "withdrawal", "withdrawal_fee", "withdrawal_fee_reversal", "withdrawal_markup_fee", "withdrawal_markup_fee_reversal", "withdrawal_markup_fee_payout", "withdrawal_markup_fee_payout_reversal", "withdrawal_reversal", "withdrawal_clawback", "withdrawal_clawback_reversal", "withdrawal_reclassification", "treasury_payin", "onchain_deposit", "onchain_withdrawal", "onchain_wallet_transfer_outgoing", "onchain_wallet_transfer_incoming", "onchain_platform_transfer_outgoing", "onchain_platform_transfer_incoming", "onchain_internal_transfer_outgoing", "onchain_internal_transfer_incoming", "onchain_swap_source", "onchain_swap_target", "swap_fee", "internal_withdrawal", "internal_withdrawal_reversal", "internal_withdrawal_fee", "internal_withdrawal_fee_reversal", "internal_withdrawal_markup_fee", "internal_withdrawal_markup_fee_reversal", "internal_withdrawal_markup_fee_payout", "internal_withdrawal_markup_fee_payout_reversal", "internal_withdrawal_in_transit", "internal_withdrawal_complete", "internal_withdrawal_in_transit_reversal", "card_load_transfer", "card_load_deposit", "card_unload_transfer", "card_unload_deposit", "external_card_load_deposit", "card_spend_authorization", "card_spend_authorization_void", "card_spend_refund", "cashback", "cashback_funding", "card_interchange", "account_settlement", "currency_conversion_outgoing", "currency_conversion_incoming", "balance_reservation", "balance_reservation_reversal", "platform_credits_payment", "platform_credits_payment_refund", "platform_credits_granted", "platform_balance_transfer_incoming", "internal_balance_transfer_outgoing", "internal_balance_transfer_incoming", "platform_balance_transfer_fee", "connected_account_negative_balance", "ad_publisher_payout", "ad_publisher_payout_received", "company_referral", "platform_affiliate_payment", "platform_affiliate_payment_reversal", "onboarding_reward", "partner_grant_reward", "payment_revshare", "payment_revshare_payout", "payment_revshare_reversal", "payment_revshare_refund", "payment_referral", "payment_referral_reversal", "payment_referral_refund", "application_fee_payout", "platform_earning", "airdrop", "airdrop_reversal", "airdrop_link_returned", "airdrop_link_redeemed", "airdrop_link_created", "resolution_center_refund", "ad_campaign_budget", "ad_spend_charge", "ad_budget_release", "ad_affiliate_payout_received", "misc_reversal", "legacy_crypto_payment", "legacy_payment", "legacy_payment_refund", "license_sale", "license_sale_commission", "license_sale_revenue", "software_rental_revshare", "software_rental_transaction", "misc_purchase", "misc_refund", "referral_bonus", "promo_reversal", "withdrawal_topup_adjustment", or "bank_transfer".

string

`onPaymentsRequested`

Providing this callback enables payment-method links. Open your payments page for the supplied method and time window.

ReportPaymentsRequest

Hide properties

string

required

string

required

string

required

`onExportReady`

A CSV is ready. The element also shows an explicit download link.

ReportExportReady

Hide properties

string

required

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`

Refresh the report data after activity changes. 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<BalanceReportElementProps>

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-Report`	The complete balance report.
`.whop-ReportActivity`	The report activity table and filters.

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

wallet.update({
  appearance: { classes: { 'whop-Report': { fontWeight: '700' } } }
});

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

​Props

​Events

​onActivityRequested

​onPaymentsRequested

​onExportReady

​onLoaderStart

​onReady

​onError

​Methods

​refresh

​mount

​destroy

​update

​Styling

Props

Events

`onActivityRequested`

`onPaymentsRequested`

`onExportReady`

`onLoaderStart`

`onReady`

`onError`

Methods

`refresh`

`mount`

`destroy`

`update`

Styling