@whop/elements 1.0.0-beta.5 → 1.0.0-beta.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dashboard.d.cts +164 -2
- package/dashboard.d.ts +164 -2
- package/index.cjs +90 -37
- package/index.d.cts +7 -4
- package/index.d.ts +7 -4
- package/index.js +90 -37
- package/package.json +2 -2
- package/wallet.d.cts +8 -186
- package/wallet.d.ts +8 -186
package/dashboard.d.cts
CHANGED
|
@@ -11,11 +11,11 @@
|
|
|
11
11
|
*/
|
|
12
12
|
export interface DashboardOptions {
|
|
13
13
|
/**
|
|
14
|
-
* A scoped token every surface under this handle reads with. Mint one token for the whole handle on your server with `POST /api/v1/access_tokens`, and set a fresh one with `update({ accessToken })` before it expires. Reading payments needs `payment:basic:read`; buyer emails additionally need `member:email:read`, the customer journey `member:basic:read`, the tracking column `shipment:basic:read`, and the product and plan names on a payment `access_pass:basic:read` and `plan:basic:read`. Omitted, the reads carry the viewer's own session, which only answers same-origin.
|
|
14
|
+
* A scoped token every surface under this handle reads with. Mint one token for the whole handle on your server with `POST /api/v1/access_tokens`, and set a fresh one with `update({ accessToken })` before it expires. Reading payments needs `payment:basic:read`; buyer emails additionally need `member:email:read`, the customer journey `member:basic:read`, the tracking column `shipment:basic:read`, and the product and plan names on a payment `access_pass:basic:read` and `plan:basic:read`. The banners need `payout:account:read`, and starting verification from the action bar `identity:write`. Omitted, the reads carry the viewer's own session, which only answers same-origin.
|
|
15
15
|
*/
|
|
16
16
|
accessToken?: string;
|
|
17
17
|
/**
|
|
18
|
-
* Account ID
|
|
18
|
+
* Account or user ID whose records these surfaces read. Account IDs are prefixed `biz_`; user IDs are prefixed `user_`, can read only the viewer's own outstanding actions, and have no payments.
|
|
19
19
|
*/
|
|
20
20
|
accountId: string;
|
|
21
21
|
/**
|
|
@@ -36,6 +36,160 @@ export interface DashboardOptions {
|
|
|
36
36
|
locale?: import("./_framework.js").WhopElementsLocale;
|
|
37
37
|
}
|
|
38
38
|
|
|
39
|
+
/**
|
|
40
|
+
* Consumer props for the "required-actions" element. Set at create (or as `<RequiredActionsElement />` JSX props), and updatable live via `update()`.
|
|
41
|
+
* @see https://docs.whop.com/elements/latest/dashboard/required-actions
|
|
42
|
+
*/
|
|
43
|
+
export interface RequiredActionsElementProps {
|
|
44
|
+
/**
|
|
45
|
+
* Which verification the Verify button starts. `individual` (KYC) is what unlocks payouts and a Whop card. `business` (KYB) covers that and additionally unlocks financing and business cards — use it for a company that will need those.
|
|
46
|
+
* @default "individual"
|
|
47
|
+
*/
|
|
48
|
+
kind?: "individual" | "business";
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
/**
|
|
52
|
+
* The live handle for a mounted "required-actions" element. Returned by `create("required-actions")`; in React, the component's `ref`.
|
|
53
|
+
* @see https://docs.whop.com/elements/latest/dashboard/required-actions
|
|
54
|
+
*/
|
|
55
|
+
export interface RequiredActionsElementHandle {
|
|
56
|
+
/**
|
|
57
|
+
* Re-read the account. Call it when the viewer returns from verifying or depositing so the banners reflect the new state without waiting for the cache to expire.
|
|
58
|
+
*/
|
|
59
|
+
refresh: () => Promise<void>;
|
|
60
|
+
/**
|
|
61
|
+
* Mounts the element in `target` and starts loading. React components mount themselves.
|
|
62
|
+
*/
|
|
63
|
+
mount: (target: string | HTMLElement) => void;
|
|
64
|
+
/**
|
|
65
|
+
* Removes the element and releases its frame and subscriptions. You can call it more than once. React removes the element automatically.
|
|
66
|
+
*/
|
|
67
|
+
destroy: () => void;
|
|
68
|
+
/**
|
|
69
|
+
* Merges new props into the mounted element. In React, change the component props instead.
|
|
70
|
+
*/
|
|
71
|
+
update: (options: Partial<RequiredActionsElementProps>) => void;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
/**
|
|
75
|
+
* Options for `create("required-actions")`: the consumer props plus event callbacks and lifecycle hooks.
|
|
76
|
+
* @example
|
|
77
|
+
* ```ts
|
|
78
|
+
* const required_actions = dashboard.create("required-actions", {}); // this interface: props + on<Event> callbacks
|
|
79
|
+
* required_actions.mount("#dashboard-required-actions");
|
|
80
|
+
* ```
|
|
81
|
+
* @see https://docs.whop.com/elements/latest/dashboard/required-actions
|
|
82
|
+
*/
|
|
83
|
+
export interface RequiredActionsElementCreateOptions {
|
|
84
|
+
/**
|
|
85
|
+
* Which verification the Verify button starts. `individual` (KYC) is what unlocks payouts and a Whop card. `business` (KYB) covers that and additionally unlocks financing and business cards — use it for a company that will need those.
|
|
86
|
+
* @default "individual"
|
|
87
|
+
*/
|
|
88
|
+
kind?: "individual" | "business";
|
|
89
|
+
/**
|
|
90
|
+
* The viewer pressed a banner button. Fires for every action, including ones the element also handles itself.
|
|
91
|
+
*/
|
|
92
|
+
onActionRequested?: ((payload: { action: "deposit_funds" | "review_held_payments" | "accept_airwallex_terms" | "submit_information_request" | "update_automatic_withdrawal_method" | "reauthorize_payout_methods" | "update_payout_profile" | "card_usage_review" | "verify_identity" | "verify_airwallex_account" | "sign_formation_documents" | "connect_fulfillment_tracker" | "setup_apple_pay_domains" | "configure_tax_remitter" | "add_vat_registration" | "enable_two_factor_authentication"; accountId: string; }) => void);
|
|
93
|
+
/**
|
|
94
|
+
* The viewer pressed Verify on a `verify_identity` action the element can start. The element opens identity verification itself — this fires alongside, so a host can record the trip.
|
|
95
|
+
*/
|
|
96
|
+
onIdentityVerificationRequested?: ((payload: { accountId: string; }) => void);
|
|
97
|
+
/**
|
|
98
|
+
* The viewer pressed Add money. The element never opens a deposit flow itself — mount your own, such as the `wallet` controller’s `deposit` element, in answer to this.
|
|
99
|
+
*/
|
|
100
|
+
onDepositRequested?: ((payload: Record<string, never>) => void);
|
|
101
|
+
/**
|
|
102
|
+
* Runs after the loading skeleton first paints and before `onReady`.
|
|
103
|
+
*/
|
|
104
|
+
onLoaderStart?: (() => void);
|
|
105
|
+
/**
|
|
106
|
+
* Runs after the element's first complete paint.
|
|
107
|
+
*/
|
|
108
|
+
onReady?: (() => void);
|
|
109
|
+
/**
|
|
110
|
+
* 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.
|
|
111
|
+
*/
|
|
112
|
+
onError?: ((e: { message: string; code?: string | undefined; sourceKey?: string | undefined; }) => void);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
/**
|
|
116
|
+
* Consumer props for the "verification" element. Set at create (or as `<VerificationElement />` JSX props), and updatable live via `update()`.
|
|
117
|
+
* @see https://docs.whop.com/elements/latest/dashboard/verification
|
|
118
|
+
*/
|
|
119
|
+
export interface VerificationElementProps {
|
|
120
|
+
/**
|
|
121
|
+
* Which verification the button starts. `individual` (KYC) is what unlocks payouts and a Whop card. `business` (KYB) covers that and additionally unlocks financing and business cards — use it for a company that will need those.
|
|
122
|
+
* @default "individual"
|
|
123
|
+
*/
|
|
124
|
+
kind?: "individual" | "business";
|
|
125
|
+
/**
|
|
126
|
+
* Show a compact inline prompt without the supporting description.
|
|
127
|
+
* @default false
|
|
128
|
+
*/
|
|
129
|
+
compact?: boolean;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
/**
|
|
133
|
+
* The live handle for a mounted "verification" element. Returned by `create("verification")`; in React, the component's `ref`.
|
|
134
|
+
* @see https://docs.whop.com/elements/latest/dashboard/verification
|
|
135
|
+
*/
|
|
136
|
+
export interface VerificationElementHandle {
|
|
137
|
+
/**
|
|
138
|
+
* Re-read the account. Call it when the viewer returns from verifying so the banner reflects the new state without waiting for the cache to expire.
|
|
139
|
+
*/
|
|
140
|
+
refresh: () => Promise<void>;
|
|
141
|
+
/**
|
|
142
|
+
* Mounts the element in `target` and starts loading. React components mount themselves.
|
|
143
|
+
*/
|
|
144
|
+
mount: (target: string | HTMLElement) => void;
|
|
145
|
+
/**
|
|
146
|
+
* Removes the element and releases its frame and subscriptions. You can call it more than once. React removes the element automatically.
|
|
147
|
+
*/
|
|
148
|
+
destroy: () => void;
|
|
149
|
+
/**
|
|
150
|
+
* Merges new props into the mounted element. In React, change the component props instead.
|
|
151
|
+
*/
|
|
152
|
+
update: (options: Partial<VerificationElementProps>) => void;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
/**
|
|
156
|
+
* Options for `create("verification")`: the consumer props plus event callbacks and lifecycle hooks.
|
|
157
|
+
* @example
|
|
158
|
+
* ```ts
|
|
159
|
+
* const verification = dashboard.create("verification", {}); // this interface: props + on<Event> callbacks
|
|
160
|
+
* verification.mount("#dashboard-verification");
|
|
161
|
+
* ```
|
|
162
|
+
* @see https://docs.whop.com/elements/latest/dashboard/verification
|
|
163
|
+
*/
|
|
164
|
+
export interface VerificationElementCreateOptions {
|
|
165
|
+
/**
|
|
166
|
+
* Which verification the button starts. `individual` (KYC) is what unlocks payouts and a Whop card. `business` (KYB) covers that and additionally unlocks financing and business cards — use it for a company that will need those.
|
|
167
|
+
* @default "individual"
|
|
168
|
+
*/
|
|
169
|
+
kind?: "individual" | "business";
|
|
170
|
+
/**
|
|
171
|
+
* Show a compact inline prompt without the supporting description.
|
|
172
|
+
* @default false
|
|
173
|
+
*/
|
|
174
|
+
compact?: boolean;
|
|
175
|
+
/**
|
|
176
|
+
* The viewer pressed the verify button. The element never navigates — mount your own verification, such as the `verifications` controller, in answer to this.
|
|
177
|
+
*/
|
|
178
|
+
onVerificationRequested?: ((payload: { accountId: string; }) => void);
|
|
179
|
+
/**
|
|
180
|
+
* Runs after the loading skeleton first paints and before `onReady`.
|
|
181
|
+
*/
|
|
182
|
+
onLoaderStart?: (() => void);
|
|
183
|
+
/**
|
|
184
|
+
* Runs after the element's first complete paint.
|
|
185
|
+
*/
|
|
186
|
+
onReady?: (() => void);
|
|
187
|
+
/**
|
|
188
|
+
* 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.
|
|
189
|
+
*/
|
|
190
|
+
onError?: ((e: { message: string; code?: string | undefined; sourceKey?: string | undefined; }) => void);
|
|
191
|
+
}
|
|
192
|
+
|
|
39
193
|
/**
|
|
40
194
|
* Consumer props for the "paymentsTable" element. Set at create (or as `<PaymentsTableElement />` JSX props), and updatable live via `update()`.
|
|
41
195
|
* @see https://docs.whop.com/elements/latest/dashboard/paymentsTable
|
|
@@ -303,6 +457,14 @@ export interface PaymentDetailElementCreateOptions {
|
|
|
303
457
|
* @see https://docs.whop.com/elements/latest/dashboard/overview
|
|
304
458
|
*/
|
|
305
459
|
export interface DashboardHandle {
|
|
460
|
+
/**
|
|
461
|
+
* The outstanding-action banners from Whop's balance dashboard — identity verification, deposits, tax, and the rest — in the same order the API returns them. An account with nothing outstanding renders nothing at all, so the element can sit permanently in a layout. Copy comes from the API. Pressing Verify starts a hosted identity session and leaves for it; Add money reports `depositRequested` and stays put, so the host mounts its own deposit flow — the `wallet` controller's `deposit` element, say; every other button follows the action's own link. Reads with the Dashboard handle's `accessToken`, which needs `payout:account:read`, plus `identity:write` to start verification. A failed read renders nothing rather than an error — a banner should never become the loudest thing on someone else's page.
|
|
462
|
+
*/
|
|
463
|
+
create(name: "required-actions", options?: RequiredActionsElementCreateOptions): RequiredActionsElementHandle;
|
|
464
|
+
/**
|
|
465
|
+
* A banner asking the account holder to verify their identity, shown only while verification is outstanding — an account that has already verified renders nothing at all, so the element can sit permanently in a layout. The headline and status messages come from the API, with a shorter description when inviting the account holder to start verification, so they track the account's actual state: an unstarted account is invited to unlock cards and payouts, one under review reads as pending, and a failed or flagged one says so. Pressing the button reports `verificationRequested` and stays put, so the host mounts its own verification — the `verifications` controller's `kyc` element, say. Reads with the Dashboard handle's `accessToken`, which needs `payout:account:read`. A failed read renders nothing rather than an error — a nudge should never become the loudest thing on the page.
|
|
466
|
+
*/
|
|
467
|
+
create(name: "verification", options?: VerificationElementCreateOptions): VerificationElementHandle;
|
|
306
468
|
/**
|
|
307
469
|
* The dashboard payments table with status cards, search, filters, sorting, row selection, CSV export, column settings, and pagination. Reads all payment pages to compute complete counts and filter locally; intended for accounts with modest payment histories. Customer details and refunds are handed to your application through events.
|
|
308
470
|
*/
|
package/dashboard.d.ts
CHANGED
|
@@ -11,11 +11,11 @@
|
|
|
11
11
|
*/
|
|
12
12
|
export interface DashboardOptions {
|
|
13
13
|
/**
|
|
14
|
-
* A scoped token every surface under this handle reads with. Mint one token for the whole handle on your server with `POST /api/v1/access_tokens`, and set a fresh one with `update({ accessToken })` before it expires. Reading payments needs `payment:basic:read`; buyer emails additionally need `member:email:read`, the customer journey `member:basic:read`, the tracking column `shipment:basic:read`, and the product and plan names on a payment `access_pass:basic:read` and `plan:basic:read`. Omitted, the reads carry the viewer's own session, which only answers same-origin.
|
|
14
|
+
* A scoped token every surface under this handle reads with. Mint one token for the whole handle on your server with `POST /api/v1/access_tokens`, and set a fresh one with `update({ accessToken })` before it expires. Reading payments needs `payment:basic:read`; buyer emails additionally need `member:email:read`, the customer journey `member:basic:read`, the tracking column `shipment:basic:read`, and the product and plan names on a payment `access_pass:basic:read` and `plan:basic:read`. The banners need `payout:account:read`, and starting verification from the action bar `identity:write`. Omitted, the reads carry the viewer's own session, which only answers same-origin.
|
|
15
15
|
*/
|
|
16
16
|
accessToken?: string;
|
|
17
17
|
/**
|
|
18
|
-
* Account ID
|
|
18
|
+
* Account or user ID whose records these surfaces read. Account IDs are prefixed `biz_`; user IDs are prefixed `user_`, can read only the viewer's own outstanding actions, and have no payments.
|
|
19
19
|
*/
|
|
20
20
|
accountId: string;
|
|
21
21
|
/**
|
|
@@ -36,6 +36,160 @@ export interface DashboardOptions {
|
|
|
36
36
|
locale?: import("./_framework.js").WhopElementsLocale;
|
|
37
37
|
}
|
|
38
38
|
|
|
39
|
+
/**
|
|
40
|
+
* Consumer props for the "required-actions" element. Set at create (or as `<RequiredActionsElement />` JSX props), and updatable live via `update()`.
|
|
41
|
+
* @see https://docs.whop.com/elements/latest/dashboard/required-actions
|
|
42
|
+
*/
|
|
43
|
+
export interface RequiredActionsElementProps {
|
|
44
|
+
/**
|
|
45
|
+
* Which verification the Verify button starts. `individual` (KYC) is what unlocks payouts and a Whop card. `business` (KYB) covers that and additionally unlocks financing and business cards — use it for a company that will need those.
|
|
46
|
+
* @default "individual"
|
|
47
|
+
*/
|
|
48
|
+
kind?: "individual" | "business";
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
/**
|
|
52
|
+
* The live handle for a mounted "required-actions" element. Returned by `create("required-actions")`; in React, the component's `ref`.
|
|
53
|
+
* @see https://docs.whop.com/elements/latest/dashboard/required-actions
|
|
54
|
+
*/
|
|
55
|
+
export interface RequiredActionsElementHandle {
|
|
56
|
+
/**
|
|
57
|
+
* Re-read the account. Call it when the viewer returns from verifying or depositing so the banners reflect the new state without waiting for the cache to expire.
|
|
58
|
+
*/
|
|
59
|
+
refresh: () => Promise<void>;
|
|
60
|
+
/**
|
|
61
|
+
* Mounts the element in `target` and starts loading. React components mount themselves.
|
|
62
|
+
*/
|
|
63
|
+
mount: (target: string | HTMLElement) => void;
|
|
64
|
+
/**
|
|
65
|
+
* Removes the element and releases its frame and subscriptions. You can call it more than once. React removes the element automatically.
|
|
66
|
+
*/
|
|
67
|
+
destroy: () => void;
|
|
68
|
+
/**
|
|
69
|
+
* Merges new props into the mounted element. In React, change the component props instead.
|
|
70
|
+
*/
|
|
71
|
+
update: (options: Partial<RequiredActionsElementProps>) => void;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
/**
|
|
75
|
+
* Options for `create("required-actions")`: the consumer props plus event callbacks and lifecycle hooks.
|
|
76
|
+
* @example
|
|
77
|
+
* ```ts
|
|
78
|
+
* const required_actions = dashboard.create("required-actions", {}); // this interface: props + on<Event> callbacks
|
|
79
|
+
* required_actions.mount("#dashboard-required-actions");
|
|
80
|
+
* ```
|
|
81
|
+
* @see https://docs.whop.com/elements/latest/dashboard/required-actions
|
|
82
|
+
*/
|
|
83
|
+
export interface RequiredActionsElementCreateOptions {
|
|
84
|
+
/**
|
|
85
|
+
* Which verification the Verify button starts. `individual` (KYC) is what unlocks payouts and a Whop card. `business` (KYB) covers that and additionally unlocks financing and business cards — use it for a company that will need those.
|
|
86
|
+
* @default "individual"
|
|
87
|
+
*/
|
|
88
|
+
kind?: "individual" | "business";
|
|
89
|
+
/**
|
|
90
|
+
* The viewer pressed a banner button. Fires for every action, including ones the element also handles itself.
|
|
91
|
+
*/
|
|
92
|
+
onActionRequested?: ((payload: { action: "deposit_funds" | "review_held_payments" | "accept_airwallex_terms" | "submit_information_request" | "update_automatic_withdrawal_method" | "reauthorize_payout_methods" | "update_payout_profile" | "card_usage_review" | "verify_identity" | "verify_airwallex_account" | "sign_formation_documents" | "connect_fulfillment_tracker" | "setup_apple_pay_domains" | "configure_tax_remitter" | "add_vat_registration" | "enable_two_factor_authentication"; accountId: string; }) => void);
|
|
93
|
+
/**
|
|
94
|
+
* The viewer pressed Verify on a `verify_identity` action the element can start. The element opens identity verification itself — this fires alongside, so a host can record the trip.
|
|
95
|
+
*/
|
|
96
|
+
onIdentityVerificationRequested?: ((payload: { accountId: string; }) => void);
|
|
97
|
+
/**
|
|
98
|
+
* The viewer pressed Add money. The element never opens a deposit flow itself — mount your own, such as the `wallet` controller’s `deposit` element, in answer to this.
|
|
99
|
+
*/
|
|
100
|
+
onDepositRequested?: ((payload: Record<string, never>) => void);
|
|
101
|
+
/**
|
|
102
|
+
* Runs after the loading skeleton first paints and before `onReady`.
|
|
103
|
+
*/
|
|
104
|
+
onLoaderStart?: (() => void);
|
|
105
|
+
/**
|
|
106
|
+
* Runs after the element's first complete paint.
|
|
107
|
+
*/
|
|
108
|
+
onReady?: (() => void);
|
|
109
|
+
/**
|
|
110
|
+
* 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.
|
|
111
|
+
*/
|
|
112
|
+
onError?: ((e: { message: string; code?: string | undefined; sourceKey?: string | undefined; }) => void);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
/**
|
|
116
|
+
* Consumer props for the "verification" element. Set at create (or as `<VerificationElement />` JSX props), and updatable live via `update()`.
|
|
117
|
+
* @see https://docs.whop.com/elements/latest/dashboard/verification
|
|
118
|
+
*/
|
|
119
|
+
export interface VerificationElementProps {
|
|
120
|
+
/**
|
|
121
|
+
* Which verification the button starts. `individual` (KYC) is what unlocks payouts and a Whop card. `business` (KYB) covers that and additionally unlocks financing and business cards — use it for a company that will need those.
|
|
122
|
+
* @default "individual"
|
|
123
|
+
*/
|
|
124
|
+
kind?: "individual" | "business";
|
|
125
|
+
/**
|
|
126
|
+
* Show a compact inline prompt without the supporting description.
|
|
127
|
+
* @default false
|
|
128
|
+
*/
|
|
129
|
+
compact?: boolean;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
/**
|
|
133
|
+
* The live handle for a mounted "verification" element. Returned by `create("verification")`; in React, the component's `ref`.
|
|
134
|
+
* @see https://docs.whop.com/elements/latest/dashboard/verification
|
|
135
|
+
*/
|
|
136
|
+
export interface VerificationElementHandle {
|
|
137
|
+
/**
|
|
138
|
+
* Re-read the account. Call it when the viewer returns from verifying so the banner reflects the new state without waiting for the cache to expire.
|
|
139
|
+
*/
|
|
140
|
+
refresh: () => Promise<void>;
|
|
141
|
+
/**
|
|
142
|
+
* Mounts the element in `target` and starts loading. React components mount themselves.
|
|
143
|
+
*/
|
|
144
|
+
mount: (target: string | HTMLElement) => void;
|
|
145
|
+
/**
|
|
146
|
+
* Removes the element and releases its frame and subscriptions. You can call it more than once. React removes the element automatically.
|
|
147
|
+
*/
|
|
148
|
+
destroy: () => void;
|
|
149
|
+
/**
|
|
150
|
+
* Merges new props into the mounted element. In React, change the component props instead.
|
|
151
|
+
*/
|
|
152
|
+
update: (options: Partial<VerificationElementProps>) => void;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
/**
|
|
156
|
+
* Options for `create("verification")`: the consumer props plus event callbacks and lifecycle hooks.
|
|
157
|
+
* @example
|
|
158
|
+
* ```ts
|
|
159
|
+
* const verification = dashboard.create("verification", {}); // this interface: props + on<Event> callbacks
|
|
160
|
+
* verification.mount("#dashboard-verification");
|
|
161
|
+
* ```
|
|
162
|
+
* @see https://docs.whop.com/elements/latest/dashboard/verification
|
|
163
|
+
*/
|
|
164
|
+
export interface VerificationElementCreateOptions {
|
|
165
|
+
/**
|
|
166
|
+
* Which verification the button starts. `individual` (KYC) is what unlocks payouts and a Whop card. `business` (KYB) covers that and additionally unlocks financing and business cards — use it for a company that will need those.
|
|
167
|
+
* @default "individual"
|
|
168
|
+
*/
|
|
169
|
+
kind?: "individual" | "business";
|
|
170
|
+
/**
|
|
171
|
+
* Show a compact inline prompt without the supporting description.
|
|
172
|
+
* @default false
|
|
173
|
+
*/
|
|
174
|
+
compact?: boolean;
|
|
175
|
+
/**
|
|
176
|
+
* The viewer pressed the verify button. The element never navigates — mount your own verification, such as the `verifications` controller, in answer to this.
|
|
177
|
+
*/
|
|
178
|
+
onVerificationRequested?: ((payload: { accountId: string; }) => void);
|
|
179
|
+
/**
|
|
180
|
+
* Runs after the loading skeleton first paints and before `onReady`.
|
|
181
|
+
*/
|
|
182
|
+
onLoaderStart?: (() => void);
|
|
183
|
+
/**
|
|
184
|
+
* Runs after the element's first complete paint.
|
|
185
|
+
*/
|
|
186
|
+
onReady?: (() => void);
|
|
187
|
+
/**
|
|
188
|
+
* 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.
|
|
189
|
+
*/
|
|
190
|
+
onError?: ((e: { message: string; code?: string | undefined; sourceKey?: string | undefined; }) => void);
|
|
191
|
+
}
|
|
192
|
+
|
|
39
193
|
/**
|
|
40
194
|
* Consumer props for the "paymentsTable" element. Set at create (or as `<PaymentsTableElement />` JSX props), and updatable live via `update()`.
|
|
41
195
|
* @see https://docs.whop.com/elements/latest/dashboard/paymentsTable
|
|
@@ -303,6 +457,14 @@ export interface PaymentDetailElementCreateOptions {
|
|
|
303
457
|
* @see https://docs.whop.com/elements/latest/dashboard/overview
|
|
304
458
|
*/
|
|
305
459
|
export interface DashboardHandle {
|
|
460
|
+
/**
|
|
461
|
+
* The outstanding-action banners from Whop's balance dashboard — identity verification, deposits, tax, and the rest — in the same order the API returns them. An account with nothing outstanding renders nothing at all, so the element can sit permanently in a layout. Copy comes from the API. Pressing Verify starts a hosted identity session and leaves for it; Add money reports `depositRequested` and stays put, so the host mounts its own deposit flow — the `wallet` controller's `deposit` element, say; every other button follows the action's own link. Reads with the Dashboard handle's `accessToken`, which needs `payout:account:read`, plus `identity:write` to start verification. A failed read renders nothing rather than an error — a banner should never become the loudest thing on someone else's page.
|
|
462
|
+
*/
|
|
463
|
+
create(name: "required-actions", options?: RequiredActionsElementCreateOptions): RequiredActionsElementHandle;
|
|
464
|
+
/**
|
|
465
|
+
* A banner asking the account holder to verify their identity, shown only while verification is outstanding — an account that has already verified renders nothing at all, so the element can sit permanently in a layout. The headline and status messages come from the API, with a shorter description when inviting the account holder to start verification, so they track the account's actual state: an unstarted account is invited to unlock cards and payouts, one under review reads as pending, and a failed or flagged one says so. Pressing the button reports `verificationRequested` and stays put, so the host mounts its own verification — the `verifications` controller's `kyc` element, say. Reads with the Dashboard handle's `accessToken`, which needs `payout:account:read`. A failed read renders nothing rather than an error — a nudge should never become the loudest thing on the page.
|
|
466
|
+
*/
|
|
467
|
+
create(name: "verification", options?: VerificationElementCreateOptions): VerificationElementHandle;
|
|
306
468
|
/**
|
|
307
469
|
* The dashboard payments table with status cards, search, filters, sorting, row selection, CSV export, column settings, and pagination. Reads all payment pages to compute complete counts and filter locally; intended for accounts with modest payment histories. Customer details and refunds are handed to your application through events.
|
|
308
470
|
*/
|
package/index.cjs
CHANGED
|
@@ -31,50 +31,103 @@ module.exports = __toCommonJS(npm_loader_exports);
|
|
|
31
31
|
var define_WHOP_ELEMENTS_LOCALES_default = ["en", "es", "zh", "nl", "pt", "de", "hu", "it", "fr", "ja", "pl", "tr"];
|
|
32
32
|
|
|
33
33
|
// ../../packages/elements-codegen/src/cli/build/npm-loader.ts
|
|
34
|
-
var ORIGIN = "https://
|
|
35
|
-
var SDK_URL = "https://
|
|
34
|
+
var ORIGIN = "https://cdn.whop.com";
|
|
35
|
+
var SDK_URL = "https://cdn.whop.com/elements/amber/elements.js";
|
|
36
36
|
var WHOP_ELEMENTS_LOCALES = define_WHOP_ELEMENTS_LOCALES_default;
|
|
37
|
+
var TAG = "script[data-whop-elements]";
|
|
38
|
+
var resolved = null;
|
|
39
|
+
function withRetry(promise) {
|
|
40
|
+
return Object.assign(promise, { retry: retryWhop });
|
|
41
|
+
}
|
|
37
42
|
function loadWhop() {
|
|
38
|
-
if (typeof window === "undefined") return Promise.reject(new Error("WhopElements requires a browser environment"));
|
|
43
|
+
if (typeof window === "undefined") return withRetry(Promise.reject(new Error("WhopElements requires a browser environment")));
|
|
39
44
|
const w = window;
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
45
|
+
const existing = document.querySelector(TAG);
|
|
46
|
+
if (existing?.__whopReady) return cached(existing);
|
|
47
|
+
if (w.WhopElements) return resolved ??= withRetry(Promise.resolve(w.WhopElements));
|
|
48
|
+
return watch(w, existing ?? inject(), !existing);
|
|
49
|
+
}
|
|
50
|
+
function cached(script) {
|
|
51
|
+
const ready = script.__whopReady;
|
|
52
|
+
if (typeof ready.retry !== "function") {
|
|
53
|
+
let settled = false;
|
|
54
|
+
ready.then(
|
|
55
|
+
() => {
|
|
56
|
+
settled = true;
|
|
57
|
+
},
|
|
58
|
+
() => {
|
|
59
|
+
settled = true;
|
|
60
|
+
script.__whopFailed = true;
|
|
61
|
+
}
|
|
62
|
+
);
|
|
63
|
+
Object.assign(ready, {
|
|
64
|
+
retry: () => settled ? retryWhop() : withRetry(ready.then((value) => value, () => retryWhop()))
|
|
65
|
+
});
|
|
66
|
+
}
|
|
67
|
+
return ready;
|
|
68
|
+
}
|
|
69
|
+
function retryWhop() {
|
|
70
|
+
if (typeof window === "undefined") return loadWhop();
|
|
71
|
+
const dead = document.querySelector(TAG);
|
|
72
|
+
if (!dead?.__whopFailed) return loadWhop();
|
|
73
|
+
return watch(window, inject(dead), true);
|
|
74
|
+
}
|
|
75
|
+
function inject(replacing) {
|
|
76
|
+
const s = document.createElement("script");
|
|
77
|
+
s.src = replacing?.src || SDK_URL;
|
|
78
|
+
s.async = true;
|
|
79
|
+
s.setAttribute("data-whop-elements", "");
|
|
80
|
+
if (replacing) {
|
|
81
|
+
if (replacing.nonce) s.nonce = replacing.nonce;
|
|
82
|
+
if (replacing.crossOrigin) s.crossOrigin = replacing.crossOrigin;
|
|
83
|
+
if (replacing.integrity) s.integrity = replacing.integrity;
|
|
84
|
+
if (replacing.referrerPolicy) s.referrerPolicy = replacing.referrerPolicy;
|
|
85
|
+
replacing.replaceWith(s);
|
|
86
|
+
} else {
|
|
48
87
|
document.head.appendChild(s);
|
|
49
88
|
}
|
|
50
|
-
|
|
89
|
+
return s;
|
|
90
|
+
}
|
|
91
|
+
function measured(src) {
|
|
92
|
+
const entry = performance.getEntriesByName(src).pop();
|
|
93
|
+
if (!entry) return "";
|
|
94
|
+
const after = `after ${Math.round(entry.duration)}ms`;
|
|
95
|
+
return entry.responseStatus ? ` (HTTP ${entry.responseStatus} ${after})` : ` (${after}, no status visible)`;
|
|
96
|
+
}
|
|
97
|
+
function watch(w, script, created) {
|
|
51
98
|
if (!script.__whopReady) {
|
|
52
|
-
script.__whopReady =
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
fn(v);
|
|
60
|
-
}
|
|
61
|
-
script.addEventListener("load", () => {
|
|
62
|
-
if (w.WhopElements) settle(resolve, w.WhopElements);
|
|
63
|
-
else settle(reject, new Error("WhopElements loaded but did not initialize"));
|
|
64
|
-
});
|
|
65
|
-
script.addEventListener("error", () => settle(reject, new Error("Failed to load " + SDK_URL)));
|
|
66
|
-
if (!created) {
|
|
67
|
-
let waited = 0;
|
|
68
|
-
timer = setInterval(() => {
|
|
69
|
-
if (w.WhopElements) {
|
|
70
|
-
settle(resolve, w.WhopElements);
|
|
71
|
-
return;
|
|
99
|
+
script.__whopReady = withRetry(
|
|
100
|
+
new Promise((resolve, reject) => {
|
|
101
|
+
let timer = null;
|
|
102
|
+
function settle(fn, v) {
|
|
103
|
+
if (timer !== null) {
|
|
104
|
+
clearInterval(timer);
|
|
105
|
+
timer = null;
|
|
72
106
|
}
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
107
|
+
fn(v);
|
|
108
|
+
}
|
|
109
|
+
function fail(message) {
|
|
110
|
+
script.__whopFailed = true;
|
|
111
|
+
settle(reject, new Error(message));
|
|
112
|
+
}
|
|
113
|
+
script.addEventListener("load", () => {
|
|
114
|
+
if (w.WhopElements) settle(resolve, w.WhopElements);
|
|
115
|
+
else fail("WhopElements loaded but did not initialize");
|
|
116
|
+
});
|
|
117
|
+
script.addEventListener("error", () => fail("Failed to load " + script.src + measured(script.src)));
|
|
118
|
+
if (!created) {
|
|
119
|
+
let waited = 0;
|
|
120
|
+
timer = setInterval(() => {
|
|
121
|
+
if (w.WhopElements) {
|
|
122
|
+
settle(resolve, w.WhopElements);
|
|
123
|
+
return;
|
|
124
|
+
}
|
|
125
|
+
waited += 200;
|
|
126
|
+
if (waited >= 1e4) fail("existing data-whop-elements script did not initialize within 10s \u2014 if its network load already failed before loadWhop() ran (check the console/CSP), no load/error event will ever fire on it");
|
|
127
|
+
}, 200);
|
|
128
|
+
}
|
|
129
|
+
})
|
|
130
|
+
);
|
|
78
131
|
}
|
|
79
132
|
return script.__whopReady;
|
|
80
133
|
}
|
package/index.d.cts
CHANGED
|
@@ -34,7 +34,7 @@ export interface Whop {
|
|
|
34
34
|
*/
|
|
35
35
|
tracking: { create(options: TrackingOptions): TrackingHandle } & TrackingStatics;
|
|
36
36
|
/**
|
|
37
|
-
* Drives an account's money surfaces. `
|
|
37
|
+
* Drives an account's money surfaces. `actions` renders the Deposit, Accept, Send, and Convert controls: Deposit, Send, and Convert open their Wallet overlays, while Accept opens Whop's checkout-link creator for a business account or company creation for a personal account. `deposit` returns live funding rails; `convert` swaps USD with Gold or Bitcoin and exposes FX currencies when the host enables `fxEnabled`; `send` moves money to a recipient or creates a public claim link; `withdraw` lists payout methods and creates the payout when the host does not already drive that API; `balances` holds two faces — the holdings list, and the balance block drawing value over a window; `cards` is the compact issued-card list; `cardsTable` renders the full sortable card roster; `cardsChart` plots card spend; `whopCard` renders one revealable card; `activity` lists ledger movements; `activityDetail` renders a prefetched movement, or retrieves one by activity ID or card transaction ID, in a standalone drawer. The outstanding-action bar and the identity nudge live on the `dashboard` controller. Every data-backed surface can use the viewer's session when no token is provided.
|
|
38
38
|
*/
|
|
39
39
|
wallet: { create(options: WalletOptions): WalletHandle } & WalletStatics;
|
|
40
40
|
/**
|
|
@@ -42,7 +42,7 @@ export interface Whop {
|
|
|
42
42
|
*/
|
|
43
43
|
websites: { create(options: WebsitesOptions): WebsitesHandle } & WebsitesStatics;
|
|
44
44
|
/**
|
|
45
|
-
* An account's own
|
|
45
|
+
* An account's own dashboard surfaces, embedded on your site. Scope it to an account with `accountId`, then mount `paymentsTable` for the account's payments, `paymentDetail` for one payment, `required-actions` for the outstanding-action banners Whop's own dashboard shows above the balance — identity verification, deposits, tax, and the rest — and `verification` for the identity-only nudge. Every surface reads with the same credential, so two side by side always show the same account. The banners render nothing once the account has nothing outstanding, so they can sit permanently in a layout, and they report the presses they cannot answer themselves — Add money and Verify — so the host mounts its own deposit or verification flow, such as the `wallet` controller's `deposit` element or the `verifications` controller's `kyc` element.
|
|
46
46
|
*/
|
|
47
47
|
dashboard: { create(options: DashboardOptions): DashboardHandle } & DashboardStatics;
|
|
48
48
|
}
|
|
@@ -55,8 +55,11 @@ export interface WhopConstructor {
|
|
|
55
55
|
/** The hosted SDK bundle `loadWhop()` loads. The URL carries the release train, so it follows this package's major. */
|
|
56
56
|
export declare const SDK_URL: string;
|
|
57
57
|
|
|
58
|
-
/**
|
|
59
|
-
export
|
|
58
|
+
/** The promise `loadWhop()` returns: the load itself, plus `retry()`, which starts a fresh load after a failure. While a load is in flight or has succeeded, `retry()` is that same load. */
|
|
59
|
+
export type WhopLoad = Promise<WhopConstructor> & { retry(): WhopLoad };
|
|
60
|
+
|
|
61
|
+
/** Load the hosted SDK: injects the `<script data-whop-elements>` tag once and resolves the global constructor. Safe to call any number of times: one script, one shared promise. A failed load is held, so every later call returns the same rejected promise and nothing retries on its own; call `retry()` on it to load again. */
|
|
62
|
+
export declare function loadWhop(): WhopLoad;
|
|
60
63
|
|
|
61
64
|
/** Resource hints (preconnect/preload) for the hosted SDK. Render them into `<head>` to start the fetch before `loadWhop()` runs. */
|
|
62
65
|
export declare function preloadHints(): { rel: string; href: string; as?: string }[];
|
package/index.d.ts
CHANGED
|
@@ -34,7 +34,7 @@ export interface Whop {
|
|
|
34
34
|
*/
|
|
35
35
|
tracking: { create(options: TrackingOptions): TrackingHandle } & TrackingStatics;
|
|
36
36
|
/**
|
|
37
|
-
* Drives an account's money surfaces. `
|
|
37
|
+
* Drives an account's money surfaces. `actions` renders the Deposit, Accept, Send, and Convert controls: Deposit, Send, and Convert open their Wallet overlays, while Accept opens Whop's checkout-link creator for a business account or company creation for a personal account. `deposit` returns live funding rails; `convert` swaps USD with Gold or Bitcoin and exposes FX currencies when the host enables `fxEnabled`; `send` moves money to a recipient or creates a public claim link; `withdraw` lists payout methods and creates the payout when the host does not already drive that API; `balances` holds two faces — the holdings list, and the balance block drawing value over a window; `cards` is the compact issued-card list; `cardsTable` renders the full sortable card roster; `cardsChart` plots card spend; `whopCard` renders one revealable card; `activity` lists ledger movements; `activityDetail` renders a prefetched movement, or retrieves one by activity ID or card transaction ID, in a standalone drawer. The outstanding-action bar and the identity nudge live on the `dashboard` controller. Every data-backed surface can use the viewer's session when no token is provided.
|
|
38
38
|
*/
|
|
39
39
|
wallet: { create(options: WalletOptions): WalletHandle } & WalletStatics;
|
|
40
40
|
/**
|
|
@@ -42,7 +42,7 @@ export interface Whop {
|
|
|
42
42
|
*/
|
|
43
43
|
websites: { create(options: WebsitesOptions): WebsitesHandle } & WebsitesStatics;
|
|
44
44
|
/**
|
|
45
|
-
* An account's own
|
|
45
|
+
* An account's own dashboard surfaces, embedded on your site. Scope it to an account with `accountId`, then mount `paymentsTable` for the account's payments, `paymentDetail` for one payment, `required-actions` for the outstanding-action banners Whop's own dashboard shows above the balance — identity verification, deposits, tax, and the rest — and `verification` for the identity-only nudge. Every surface reads with the same credential, so two side by side always show the same account. The banners render nothing once the account has nothing outstanding, so they can sit permanently in a layout, and they report the presses they cannot answer themselves — Add money and Verify — so the host mounts its own deposit or verification flow, such as the `wallet` controller's `deposit` element or the `verifications` controller's `kyc` element.
|
|
46
46
|
*/
|
|
47
47
|
dashboard: { create(options: DashboardOptions): DashboardHandle } & DashboardStatics;
|
|
48
48
|
}
|
|
@@ -55,8 +55,11 @@ export interface WhopConstructor {
|
|
|
55
55
|
/** The hosted SDK bundle `loadWhop()` loads. The URL carries the release train, so it follows this package's major. */
|
|
56
56
|
export declare const SDK_URL: string;
|
|
57
57
|
|
|
58
|
-
/**
|
|
59
|
-
export
|
|
58
|
+
/** The promise `loadWhop()` returns: the load itself, plus `retry()`, which starts a fresh load after a failure. While a load is in flight or has succeeded, `retry()` is that same load. */
|
|
59
|
+
export type WhopLoad = Promise<WhopConstructor> & { retry(): WhopLoad };
|
|
60
|
+
|
|
61
|
+
/** Load the hosted SDK: injects the `<script data-whop-elements>` tag once and resolves the global constructor. Safe to call any number of times: one script, one shared promise. A failed load is held, so every later call returns the same rejected promise and nothing retries on its own; call `retry()` on it to load again. */
|
|
62
|
+
export declare function loadWhop(): WhopLoad;
|
|
60
63
|
|
|
61
64
|
/** Resource hints (preconnect/preload) for the hosted SDK. Render them into `<head>` to start the fetch before `loadWhop()` runs. */
|
|
62
65
|
export declare function preloadHints(): { rel: string; href: string; as?: string }[];
|