This page documents
@whop/elements@1.9.0 and @whop/elements-react@1.9.0.v1.0.0.
Opens as a modal from Wallet: wallet.createOverlay('activityDetail'). Pass props and callbacks in the create options.
This element is modal-only. Open it with
createOverlay; it has no inline mount.import { WhopElements, Wallet, ActivityDetailElement } from "@whop/elements-react";
import { loadWhop } from "@whop/elements";
function Example() {
return (
<WhopElements elements={loadWhop()}>
<Wallet /* options */>
<ActivityDetailElement onCardSelected={(e) => console.log(e)} onCardholderSelected={(e) => console.log(e)} onCardTransactionIssueRequested={(e) => console.log(e)} />
</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 */ });
wallet.createOverlay('activityDetail', {
onCardSelected: (e) => console.log(e),
onCardholderSelected: (e) => console.log(e),
onCardTransactionIssueRequested: (e) => console.log(e)
}).open();
</script>
Example data. Open the Playground.
Props
LedgerActivity | null
Optional prefetched ledger activity row. When provided, the element renders it without another request. Defaults to
null.Show properties
Show properties
"ledger_activity"
required
string
required
Ledger activity ID.
string
required
The ledger line category this activity was posted under.
Show values
Show values
One of
"platform_balance_transfer_outgoing", "payment_gross", "withdrawal", "topup", "payment_dispute", "payment_revshare", "card_spend_authorization", "airdrop", "onchain_swap_target", "cashback", "account_settlement", "ad_affiliate_payout_received", "ad_budget_release", "ad_campaign_budget", "ad_publisher_payout", "ad_publisher_payout_received", "ad_spend_charge", "affiliate_fee", "airdrop_link_created", "airdrop_link_redeemed", "airdrop_link_returned", "airdrop_reversal", "application_fee", "application_fee_payout", "balance_reservation", "balance_reservation_reversal", "bank_transfer", "billing_percentage_fee", "buyer_fee", "card_interchange", "card_load_deposit", "card_load_transfer", "card_spend_authorization_void", "card_spend_refund", "card_unload_deposit", "card_unload_transfer", "cashback_funding", "company_referral", "connected_account_negative_balance", "cross_border_percentage_fee", "currency_conversion_incoming", "currency_conversion_outgoing", "dispute_alert_fee", "dispute_hold_adjustment", "dispute_representment_fee", "economic_intelligence_percentage_fee", "external_card_load_deposit", "fraud_prevention_fee", "fx_percentage_fee", "high_risk_merchant_fee", "installment_default", "internal_balance_transfer_incoming", "internal_balance_transfer_outgoing", "internal_withdrawal", "internal_withdrawal_complete", "internal_withdrawal_fee", "internal_withdrawal_fee_reversal", "internal_withdrawal_in_transit", "internal_withdrawal_in_transit_reversal", "internal_withdrawal_markup_fee", "internal_withdrawal_markup_fee_payout", "internal_withdrawal_markup_fee_payout_reversal", "internal_withdrawal_markup_fee_reversal", "internal_withdrawal_reversal", "legacy_crypto_payment", "legacy_payment", "legacy_payment_refund", "license_sale", "license_sale_commission", "license_sale_revenue", "marketplace_affiliate_fee", "misc_purchase", "misc_refund", "misc_reversal", "onboarding_reward", "onchain_deposit", "onchain_swap_source", "onchain_wallet_transfer_incoming", "onchain_wallet_transfer_outgoing", "onchain_withdrawal", "orchestration_percentage_fee", "partner_grant_reward", "passthrough_gmv", "payment_dispute_adjustment", "payment_dispute_fee", "payment_dispute_reversal", "payment_gross_reversal", "payment_processing_fixed_fee", "payment_processing_percentage_fee", "payment_referral", "payment_referral_refund", "payment_referral_reversal", "payment_refund", "payment_refund_reversal", "payment_revshare_payout", "payment_revshare_refund", "payment_revshare_reversal", "payout_fee", "platform_affiliate_payment", "platform_affiliate_payment_reversal", "platform_balance_payment", "platform_balance_payment_refund", "platform_balance_transfer_fee", "platform_balance_transfer_incoming", "platform_covered_dispute", "platform_credits_granted", "platform_credits_payment", "platform_credits_payment_refund", "platform_earning", "platform_markup_fee", "platform_markup_fee_payout", "promo_reversal", "referral_bonus", "resolution_center_refund", "revshare_percentage_fee", "sales_tax_fee", "sales_tax_remittance", "sales_tax_remittance_reversal", "software_rental_revshare", "software_rental_transaction", "stripe_domestic_processing_fee", "stripe_international_processing_fee", "swap_fee", "three_ds_fixed_fee", "topup_fee", "topup_reversal", "treasury_payin", "whop_processing_fee", "withdrawal_clawback", "withdrawal_clawback_reversal", "withdrawal_fee", "withdrawal_fee_reversal", "withdrawal_markup_fee", "withdrawal_markup_fee_payout", "withdrawal_markup_fee_payout_reversal", "withdrawal_markup_fee_reversal", "withdrawal_reclassification", "withdrawal_reversal", "withdrawal_topup_adjustment", "psp_payment_receivable", "ad_spend_purchase", "psp_refund_payable", "passthrough_gmv_offset", "aggregated_fee", "sales_tax_collected", "sales_tax_collected_reversal", "sales_tax_remitted", "dispute_hold_blocked", "psp_dispute_payable", "withdrawal_payable", "withdrawal_payable_reversal", "payout_receivable", "clawback_receivable", "clawback_receivable_reversal", "treasury_payin_receivable", "onchain_deposit_offset", "onchain_withdrawal_offset", "trading_account_withdrawal", "trading_account_withdrawal_offset", "trading_account_deposit", "trading_account_deposit_offset", "onchain_swap_offset", "whop_swap_fee_received", "internal_withdrawal_payable", "internal_withdrawal_payable_reversal", "external_card_load_offset", "card_spend_authorization_hold", "card_spend_capture", "card_spend_capture_offset", "card_spend_authorization_void_release", "card_spend_refund_offset", "cashback_expense", "card_interchange_receivable", "balance_reservation_hold", "balance_reservation_release", "bad_debt_offset", "bad_debt_expense", "connected_account_clawback", "payment_referral_payable", "application_fee_payable", "airdrop_expense", "airdrop_expense_reversal", "airdrop_link_funded", "airdrop_link_canceled", "airdrop_link_claimed", "ad_funding_disbursement", "ads_card_spread", "ad_network_cost", "ad_spend_margin", "ad_income_expense", "ad_income_receipt", "ad_network_settlement", "ad_affiliate_payout", "ad_balance_funding_receipt", "fx_gain_loss", "fx_markup", "payment_receivable_settlement", "platform_earning_settlement", "platform_earning_unreconciled_clearing", "payment_receivable_clearing", "payment_receivable_reversal", "payment_unreconciled_clearing", "payment_unreconciled_reversal", "settlement_shortfall_loss", "fx_settlement_gain_loss", "settlement_rounding_variance", "psp_payout_settlement", "psp_payout_deposit", "psp_payout_receivable", "psp_payout_receivable_clearing", "payout_unreconciled_clearing", "psp_currency_conversion_outgoing", "psp_currency_conversion_incoming", "psp_currency_conversion_receivable", "psp_currency_conversion_receivable_clearing", "psp_fx_adjustment", "refund_settlement", "refund_settlement_reversal", "refund_payable_clearing", "refund_payable_reversal", "refund_unreconciled_clearing", "refund_unreconciled_reversal", "psp_account_debit", "payment_refund_fee", "dispute_settlement", "dispute_settlement_reversal", "dispute_payable_clearing", "dispute_payable_reversal", "dispute_unreconciled_clearing", "dispute_unreconciled_reversal", "psp_reserve_hold", "psp_reserve_release", "psp_dispute_fee", "psp_dispute_alert_fee", "psp_refund_fee", "psp_account_updater_fee", "psp_adjusted_processing_fee", "psp_authentication_fee", "psp_commission_fee", "psp_fixed_fee", "psp_gateway_fee", "psp_interchange_fee", "psp_invoice_tax_fee", "psp_markup_fee", "psp_network_token_fee", "psp_optimization_fee", "psp_payment_method_fee", "psp_payout_fee", "psp_processing_fee", "psp_risk_fee", "psp_scheme_fee", "psp_variable_fee", "psp_billing_fee", "psp_tax_service_fee", "psp_connect_fee", "external_account_connection_fee", "psp_external_account_connection_fee", "psp_invoicing_fee", "psp_terminal_fee", "treasury_fee", "psp_treasury_fee", "accelerated_settlement_fee", "psp_accelerated_settlement_fee", "psp_receivable_pooled", "psp_pool_settlement", "psp_pool_clearing", "psp_pool_refund_settlement", "psp_pool_refund_clearing", "psp_correction", "psp_payin_settlement", "psp_payin_clearing", "psp_bank_pull_settlement", "psp_bank_pull_clearing", "psp_pool_dispute_settlement", "psp_payout_consolidation", "psp_withholding_tax", "psp_payout_settlement_reversal", "psp_transfer_settlement", "psp_transfer_settlement_reversal", "psp_collection_settlement", "payout_subsidy", "withdrawal_payable_clearing", "withdrawal_payable_clearing_reversal", "identity_verification_fee", "psp_identity_verification_fee", "tax_filing_fee", "psp_tax_filing_fee", "psp_service_fee", "recipient_wallet_load", "psp_recipient_wallet_load", "dispute_management_fee", "psp_dispute_management_fee", "psp_clawback_settlement", "psp_clawback_settlement_reversal", "clawback_receivable_settlement", "clawback_receivable_settlement_reversal", "clawback_fee", "psp_clawback_fee", "deposit", "wallet_transfer_incoming", "wallet_transfer_outgoing", "swap_source", or "swap_target".string
required
Signed amount in the currency’s smallest precision units.
string | null
required
Dollar value of this movement as a decimal string, signed like
amount. Converted from the posted amount at the rate that was live when the line posted — the same pricing the wallet balance chart and the financial reports use — so a crypto row carries its dollar value too. null for a currency Whop holds no exchange rate for.string
required
When the activity posted to the ledger.
string | null
required
ISO 8601 timestamp when this activity affects available funds: 00:00:00 UTC on the scheduled release date for credits and debits in a pending good-funds release bucket; the posted time for credits and debits to settled available funds, including refunds, disputes and payouts. Null for activity outside these paths, including on-chain rows. The available_after/before filters use its UTC date; default activity excludes some movements, including opt-in reserves.
object | null
required
Resource associated with this ledger activity.
Show shape 1
Show shape 1
Show shape 2
Show shape 2
Show shape 4
Show shape 4
Show shape 5
Show shape 5
"payment_method"
required
string
required
string | null
required
string | null
required
object | null
required
object | null
required
string | null
required
Show shape 6
Show shape 6
Show shape 7
Show shape 7
"card_transaction"
required
string
required
string | null
required
string | null
required
string | null
required
string | null
required
string | null
required
string | null
required
string | null
required
string | null
required
string | null
required
string | null
required
string | null
required
string | null
required
object | null
required
Source of this ledger activity. Platform markup fees use object platform_fee and the ledger activity ID.
Show properties
Show properties
string
required
string
required
string | null
One of
"transfer", "card_spend", "deposit", "swap", "payout", or null.string | null
Money | null
Show properties
Show properties
string
required
Three-letter ISO 4217 currency code, lowercase.
string
required
The amount in major units, as an exact decimal string —
"10.00" is ten dollars. A string so no float rounds it in transit.number
required
How many decimal places the amount CARRIES — the precision the charge itself runs at.
number
required
How many decimal places to SHOW. Usually equal to
decimals, and deliberately not always: COP is charged in centavos but written in whole pesos, so it is 2 and 0. Format the number in your own locale using this.string | null
string | null
string | null
string | null
string | null
boolean | null
string | null
number | null
Money | null
Show properties
Show properties
string
required
Three-letter ISO 4217 currency code, lowercase.
string
required
The amount in major units, as an exact decimal string —
"10.00" is ten dollars. A string so no float rounds it in transit.number
required
How many decimal places the amount CARRIES — the precision the charge itself runs at.
number
required
How many decimal places to SHOW. Usually equal to
decimals, and deliberately not always: COP is charged in centavos but written in whole pesos, so it is 2 and 0. Format the number in your own locale using this.Money | null
Show properties
Show properties
string
required
Three-letter ISO 4217 currency code, lowercase.
string
required
The amount in major units, as an exact decimal string —
"10.00" is ten dollars. A string so no float rounds it in transit.number
required
How many decimal places the amount CARRIES — the precision the charge itself runs at.
number
required
How many decimal places to SHOW. Usually equal to
decimals, and deliberately not always: COP is charged in centavos but written in whole pesos, so it is 2 and 0. Format the number in your own locale using this."exclusive" | "inclusive" | null
UserSummary | null
Show properties
Show properties
string
required
User ID, prefixed
user_.string
required
Public username.
string | null
required
Display name.
string | null
string | null
string | null
string | null
string | null
string | null
string | null
string | null
string | null
string | null
string | null
string | null
unknown
required
object | null
Payment related to this ledger activity. Included when rich resource hydration is enabled and the movement is tied to a payment.
Show properties
Show properties
"payment"
required
string
required
Money | null
required
Show properties
Show properties
string
required
Three-letter ISO 4217 currency code, lowercase.
string
required
The amount in major units, as an exact decimal string —
"10.00" is ten dollars. A string so no float rounds it in transit.number
required
How many decimal places the amount CARRIES — the precision the charge itself runs at.
number
required
How many decimal places to SHOW. Usually equal to
decimals, and deliberately not always: COP is charged in centavos but written in whole pesos, so it is 2 and 0. Format the number in your own locale using this.string | null
required
string | null
required
string | null
required
string | null
required
string
required
string | null
Payment ID for any payment-related activity, including refunds and disputes.
string | null
ID of the customer associated with the payment.
string | null
Display name of the customer associated with the payment.
string | null
Email of the customer associated with the payment. Requires member:email:read.
string | null
ID of the product associated with the payment, when applicable.
string | null
Name of the product associated with the payment, when applicable.
string | null
ID of the variant associated with the payment, when applicable.
string | null
Name of the variant associated with the payment, when applicable.
object
The viewer account that owns this row’s ledger. Present only when the response aggregates owned accounts (include_owned_accounts=true); omitted otherwise.
Show shape 1
Show shape 1
string | null
The ledger account (a ldgr_ identifier) this row belongs to. Present only when the response aggregates owned accounts (include_owned_accounts=true); omitted otherwise. Pair it with
account to scope drawers and dashboard links to the owning business.string | null
Optional ledger activity ID to retrieve when no prefetched activity row is provided. Defaults to
null.string | null
Optional card transaction ID (
citx_) to retrieve and show as a card receipt — what a card table hands back when a row is pressed. Takes precedence over activityId, and is ignored when a prefetched row is passed. Defaults to null.boolean
Show the cardholder row on a card receipt. Company accounts only — a personal wallet has one cardholder, so the row never appears there. Reading the name needs
company:authorized_user:read; without it the row reads Unavailable. Defaults to true.boolean
Show the report-an-issue action for eligible card transactions. The action emits an event for the host. Defaults to
false.Events
Pass callbacks in the create options or React props.onCardSelected
The card row was clicked.
onCardholderSelected
The cardholder row was clicked. Open your own profile surface for that user.
onCardTransactionIssueRequested
Report an issue was clicked. Open the host-owned card dispute flow.
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.
Methods
Call these on the handle returned bycreate, or through a React ref.
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<ActivityDetailElementProps>
required
Styling
This element doesn’t expose class names for styling. Useappearance (theme, accent color, variables) to restyle it.
