@whop/elements 1.0.0-beta.0 → 1.0.0-beta.1
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/ads.d.cts +8 -4
- package/ads.d.ts +8 -4
- package/checkout.d.cts +90 -3
- package/checkout.d.ts +90 -3
- package/index.d.cts +1 -1
- package/index.d.ts +1 -1
- package/package.json +2 -2
- package/payments.d.cts +85 -16
- package/payments.d.ts +85 -16
- package/tracking.d.cts +8 -0
- package/tracking.d.ts +8 -0
- package/wallet.d.cts +32 -11
- package/wallet.d.ts +32 -11
- package/websites.d.cts +8 -0
- package/websites.d.ts +8 -0
package/ads.d.cts
CHANGED
|
@@ -32,6 +32,10 @@ export interface AdsOptions {
|
|
|
32
32
|
* Runs when the grouped loading state changes. The value is `true` while any mounted element is still loading.
|
|
33
33
|
*/
|
|
34
34
|
onLoadingChange?: ((loading: boolean) => void);
|
|
35
|
+
/**
|
|
36
|
+
* Set `false` to turn off Whop's built-in usage analytics for this handle and its elements. The analytics identity is never threaded to its frames. A reserved option, not element data.
|
|
37
|
+
*/
|
|
38
|
+
analytics?: false;
|
|
35
39
|
/**
|
|
36
40
|
* Visual customization for this group's elements. Overrides the global `WhopElements({ appearance })`. Change it live with `update({ appearance })`.
|
|
37
41
|
*/
|
|
@@ -271,10 +275,6 @@ export interface ReportingSubOptions {
|
|
|
271
275
|
* The viewer asked to edit something — a row menu, a draft row, or Edit ad in the details overlay. `campaignId` is always there; `adGroupId` and `adId` narrow it to what they clicked. Only raised when `useCampaignCreator` is off; on, the builder opens over the page instead and this stays quiet.
|
|
272
276
|
*/
|
|
273
277
|
onEditRequested?: ((payload: AdsEditTarget) => void);
|
|
274
|
-
/**
|
|
275
|
-
* Runs when the grouped loading state changes. The value is `true` while any mounted element is still loading.
|
|
276
|
-
*/
|
|
277
|
-
onLoadingChange?: ((loading: boolean) => void);
|
|
278
278
|
}
|
|
279
279
|
|
|
280
280
|
/**
|
|
@@ -541,6 +541,10 @@ export interface AdsHandle {
|
|
|
541
541
|
* Merges new handle options into every mounted element. In React, change the namespace props instead.
|
|
542
542
|
*/
|
|
543
543
|
update(options: Partial<AdsOptions>): void;
|
|
544
|
+
/**
|
|
545
|
+
* Destroys every element and sub-controller this handle created, removes the controller frame, and releases its subscriptions. You can call it more than once, but a destroyed handle refuses any other call — create a new handle to start over. React removes the group automatically when the provider unmounts.
|
|
546
|
+
*/
|
|
547
|
+
destroy(): void;
|
|
544
548
|
}
|
|
545
549
|
|
|
546
550
|
/**
|
package/ads.d.ts
CHANGED
|
@@ -32,6 +32,10 @@ export interface AdsOptions {
|
|
|
32
32
|
* Runs when the grouped loading state changes. The value is `true` while any mounted element is still loading.
|
|
33
33
|
*/
|
|
34
34
|
onLoadingChange?: ((loading: boolean) => void);
|
|
35
|
+
/**
|
|
36
|
+
* Set `false` to turn off Whop's built-in usage analytics for this handle and its elements. The analytics identity is never threaded to its frames. A reserved option, not element data.
|
|
37
|
+
*/
|
|
38
|
+
analytics?: false;
|
|
35
39
|
/**
|
|
36
40
|
* Visual customization for this group's elements. Overrides the global `WhopElements({ appearance })`. Change it live with `update({ appearance })`.
|
|
37
41
|
*/
|
|
@@ -271,10 +275,6 @@ export interface ReportingSubOptions {
|
|
|
271
275
|
* The viewer asked to edit something — a row menu, a draft row, or Edit ad in the details overlay. `campaignId` is always there; `adGroupId` and `adId` narrow it to what they clicked. Only raised when `useCampaignCreator` is off; on, the builder opens over the page instead and this stays quiet.
|
|
272
276
|
*/
|
|
273
277
|
onEditRequested?: ((payload: AdsEditTarget) => void);
|
|
274
|
-
/**
|
|
275
|
-
* Runs when the grouped loading state changes. The value is `true` while any mounted element is still loading.
|
|
276
|
-
*/
|
|
277
|
-
onLoadingChange?: ((loading: boolean) => void);
|
|
278
278
|
}
|
|
279
279
|
|
|
280
280
|
/**
|
|
@@ -541,6 +541,10 @@ export interface AdsHandle {
|
|
|
541
541
|
* Merges new handle options into every mounted element. In React, change the namespace props instead.
|
|
542
542
|
*/
|
|
543
543
|
update(options: Partial<AdsOptions>): void;
|
|
544
|
+
/**
|
|
545
|
+
* Destroys every element and sub-controller this handle created, removes the controller frame, and releases its subscriptions. You can call it more than once, but a destroyed handle refuses any other call — create a new handle to start over. React removes the group automatically when the provider unmounts.
|
|
546
|
+
*/
|
|
547
|
+
destroy(): void;
|
|
544
548
|
}
|
|
545
549
|
|
|
546
550
|
/**
|
package/checkout.d.cts
CHANGED
|
@@ -11,9 +11,13 @@
|
|
|
11
11
|
*/
|
|
12
12
|
export interface CheckoutOptions {
|
|
13
13
|
/**
|
|
14
|
-
* Existing plan ID, prefixed `plan_`. The element creates a checkout session for it, and the plan defines the price; nothing about amounts can be asserted client-side. Every checkout
|
|
14
|
+
* Existing plan ID, prefixed `plan_`. The element creates a checkout session for it, and the plan defines the price; nothing about amounts can be asserted client-side. Every checkout is created from this or a `checkoutConfiguration` — omitting both refuses loudly at mount. Set at create only: the session is minted from it, and changing it later refuses.
|
|
15
15
|
*/
|
|
16
16
|
plan?: string;
|
|
17
|
+
/**
|
|
18
|
+
* Existing checkout configuration ID, prefixed `ch_`. The element creates the checkout session from it: the configuration names the plan being sold and seeds its own affiliate code, metadata, redirect and payment-method presets — an option passed here beside it wins over the configuration’s copy, field by field. Pass `plan` alongside only to set `quantity`; it must be the configuration’s own plan, which can never be swapped out from under its presets. Set at create only.
|
|
19
|
+
*/
|
|
20
|
+
checkoutConfiguration?: string;
|
|
17
21
|
/**
|
|
18
22
|
* How many units to purchase. Plans that disallow multiples refuse values above 1. Set at create only: the session is minted with it, and changing it later refuses. @default 1
|
|
19
23
|
*/
|
|
@@ -42,6 +46,10 @@ export interface CheckoutOptions {
|
|
|
42
46
|
* Runs when the grouped loading state changes. The value is `true` while any mounted element is still loading.
|
|
43
47
|
*/
|
|
44
48
|
onLoadingChange?: ((loading: boolean) => void);
|
|
49
|
+
/**
|
|
50
|
+
* Set `false` to turn off Whop's built-in usage analytics for this handle and its elements. The analytics identity is never threaded to its frames. A reserved option, not element data.
|
|
51
|
+
*/
|
|
52
|
+
analytics?: false;
|
|
45
53
|
/**
|
|
46
54
|
* Visual customization for this group's elements. Overrides the global `WhopElements({ appearance })`. Change it live with `update({ appearance })`.
|
|
47
55
|
*/
|
|
@@ -101,20 +109,99 @@ export interface CheckoutElementCreateOptions {
|
|
|
101
109
|
onError?: ((e: { message: string; code?: string | undefined; sourceKey?: string | undefined; }) => void);
|
|
102
110
|
}
|
|
103
111
|
|
|
112
|
+
/**
|
|
113
|
+
* Consumer props for the "expressCheckout" element. Set at create (or as `<ExpressCheckoutElement />` JSX props), and updatable live via `update()`.
|
|
114
|
+
* @see https://docs.whop.com/elements/latest/checkout/expressCheckout
|
|
115
|
+
*/
|
|
116
|
+
export interface ExpressCheckoutElementProps {
|
|
117
|
+
/**
|
|
118
|
+
* Which wallets may render — a filter over what the buyer’s device actually offers. The element never shows a wallet the device or the served matrix cannot back, and the render order stays best-native-first whatever order this lists. An empty list renders nothing (warned in dev builds).
|
|
119
|
+
* @default ["apple_pay","google_pay"]
|
|
120
|
+
*/
|
|
121
|
+
wallets?: ("apple_pay" | "google_pay")[];
|
|
122
|
+
/**
|
|
123
|
+
* How the buttons stack. `auto` follows the element’s own container — stacked in narrow containers, side by side in wide ones; `horizontal` and `vertical` force one arrangement.
|
|
124
|
+
* @default "auto"
|
|
125
|
+
*/
|
|
126
|
+
layout?: "auto" | "horizontal" | "vertical";
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
/**
|
|
130
|
+
* The live handle for a mounted "expressCheckout" element. Returned by `create("expressCheckout")`; in React, the component's `ref`.
|
|
131
|
+
* @see https://docs.whop.com/elements/latest/checkout/expressCheckout
|
|
132
|
+
*/
|
|
133
|
+
export interface ExpressCheckoutElementHandle {
|
|
134
|
+
/**
|
|
135
|
+
* Mounts the element in `target` and starts loading. React components mount themselves.
|
|
136
|
+
*/
|
|
137
|
+
mount: (target: string | HTMLElement) => void;
|
|
138
|
+
/**
|
|
139
|
+
* Removes the element and releases its frame and subscriptions. You can call it more than once. React removes the element automatically.
|
|
140
|
+
*/
|
|
141
|
+
destroy: () => void;
|
|
142
|
+
/**
|
|
143
|
+
* Merges new props into the mounted element. In React, change the component props instead.
|
|
144
|
+
*/
|
|
145
|
+
update: (options: Partial<ExpressCheckoutElementProps>) => void;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
/**
|
|
149
|
+
* Options for `create("expressCheckout")`: the consumer props plus event callbacks and lifecycle hooks.
|
|
150
|
+
* @example
|
|
151
|
+
* ```ts
|
|
152
|
+
* const expressCheckout = checkout.create("expressCheckout", {}); // this interface: props + on<Event> callbacks
|
|
153
|
+
* expressCheckout.mount("#checkout-expressCheckout");
|
|
154
|
+
* ```
|
|
155
|
+
* @see https://docs.whop.com/elements/latest/checkout/expressCheckout
|
|
156
|
+
*/
|
|
157
|
+
export interface ExpressCheckoutElementCreateOptions {
|
|
158
|
+
/**
|
|
159
|
+
* Which wallets may render — a filter over what the buyer’s device actually offers. The element never shows a wallet the device or the served matrix cannot back, and the render order stays best-native-first whatever order this lists. An empty list renders nothing (warned in dev builds).
|
|
160
|
+
* @default ["apple_pay","google_pay"]
|
|
161
|
+
*/
|
|
162
|
+
wallets?: ("apple_pay" | "google_pay")[];
|
|
163
|
+
/**
|
|
164
|
+
* How the buttons stack. `auto` follows the element’s own container — stacked in narrow containers, side by side in wide ones; `horizontal` and `vertical` force one arrangement.
|
|
165
|
+
* @default "auto"
|
|
166
|
+
*/
|
|
167
|
+
layout?: "auto" | "horizontal" | "vertical";
|
|
168
|
+
/**
|
|
169
|
+
* Runs after the loading skeleton first paints and before `onReady`.
|
|
170
|
+
*/
|
|
171
|
+
onLoaderStart?: (() => void);
|
|
172
|
+
/**
|
|
173
|
+
* Runs after the element's first complete paint.
|
|
174
|
+
*/
|
|
175
|
+
onReady?: (() => void);
|
|
176
|
+
/**
|
|
177
|
+
* 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.
|
|
178
|
+
*/
|
|
179
|
+
onError?: ((e: { message: string; code?: string | undefined; sourceKey?: string | undefined; }) => void);
|
|
180
|
+
}
|
|
181
|
+
|
|
104
182
|
/**
|
|
105
183
|
* The Checkout handle, returned by `whop.checkout.create()` (React: `useCheckout()`). Mounts the elements and carries the controller's actions.
|
|
106
184
|
* @see https://docs.whop.com/elements/latest/checkout/overview
|
|
107
185
|
*/
|
|
108
186
|
export interface CheckoutHandle {
|
|
109
187
|
/**
|
|
110
|
-
* The full checkout surface — order summary with the live quote, promo code entry, the currency the buyer pays in, everything this checkout has to collect from the buyer, the composed payment methods surface, and the pay flow. What it collects is whatever the
|
|
111
|
-
* Exclusive slot `entry`. Mount exactly one of: checkout.
|
|
188
|
+
* The full checkout surface — order summary with the live quote, promo code entry, the currency the buyer pays in, everything this checkout has to collect from the buyer, the composed payment methods surface, and the pay flow. What it collects is whatever the seller set up (email, their own questions, a phone number, a shipping address for physical goods, an explicit agreement to their terms), rendered together on one screen in the order they chose — so a seller who starts asking for something new needs no change here. Renders the whole purchase; the checkout controller owns the session and the credential. After a payment that needs an off-site step, this same surface renders the outcome the server reports when the buyer comes back.
|
|
189
|
+
* Exclusive slot `entry`. Mount exactly one of: checkout | expressCheckout.
|
|
112
190
|
*/
|
|
113
191
|
create(name: "checkout", options?: CheckoutElementCreateOptions): CheckoutElementHandle;
|
|
192
|
+
/**
|
|
193
|
+
* One-press Apple Pay and Google Pay buttons for a checkout — the OS payment sheet collects whatever the session still needs (the buyer's email, a shipping address for physical goods, a promo code where the seller offers entry) and one press finishes the purchase. It shares the checkout's entry slot with the full checkout element, so a handle mounts exactly one of the two: this button alone where the purchase is simple enough for a sheet to finish, or the full checkout surface for everything else. Renders only the wallets the buyer's device can actually pay with, using the served button art, and renders nothing where no wallet is available. A checkout the sheet cannot honestly finish — a waitlist join, a transfer, a form question only a page can ask — refuses loudly instead of rendering a doomed button.
|
|
194
|
+
* Exclusive slot `entry`. Mount exactly one of: checkout | expressCheckout.
|
|
195
|
+
*/
|
|
196
|
+
create(name: "expressCheckout", options?: ExpressCheckoutElementCreateOptions): ExpressCheckoutElementHandle;
|
|
114
197
|
/**
|
|
115
198
|
* Merges new handle options into every mounted element. In React, change the namespace props instead.
|
|
116
199
|
*/
|
|
117
200
|
update(options: Partial<CheckoutOptions>): void;
|
|
201
|
+
/**
|
|
202
|
+
* Destroys every element and sub-controller this handle created, removes the controller frame, and releases its subscriptions. You can call it more than once, but a destroyed handle refuses any other call — create a new handle to start over. React removes the group automatically when the provider unmounts.
|
|
203
|
+
*/
|
|
204
|
+
destroy(): void;
|
|
118
205
|
}
|
|
119
206
|
|
|
120
207
|
/**
|
package/checkout.d.ts
CHANGED
|
@@ -11,9 +11,13 @@
|
|
|
11
11
|
*/
|
|
12
12
|
export interface CheckoutOptions {
|
|
13
13
|
/**
|
|
14
|
-
* Existing plan ID, prefixed `plan_`. The element creates a checkout session for it, and the plan defines the price; nothing about amounts can be asserted client-side. Every checkout
|
|
14
|
+
* Existing plan ID, prefixed `plan_`. The element creates a checkout session for it, and the plan defines the price; nothing about amounts can be asserted client-side. Every checkout is created from this or a `checkoutConfiguration` — omitting both refuses loudly at mount. Set at create only: the session is minted from it, and changing it later refuses.
|
|
15
15
|
*/
|
|
16
16
|
plan?: string;
|
|
17
|
+
/**
|
|
18
|
+
* Existing checkout configuration ID, prefixed `ch_`. The element creates the checkout session from it: the configuration names the plan being sold and seeds its own affiliate code, metadata, redirect and payment-method presets — an option passed here beside it wins over the configuration’s copy, field by field. Pass `plan` alongside only to set `quantity`; it must be the configuration’s own plan, which can never be swapped out from under its presets. Set at create only.
|
|
19
|
+
*/
|
|
20
|
+
checkoutConfiguration?: string;
|
|
17
21
|
/**
|
|
18
22
|
* How many units to purchase. Plans that disallow multiples refuse values above 1. Set at create only: the session is minted with it, and changing it later refuses. @default 1
|
|
19
23
|
*/
|
|
@@ -42,6 +46,10 @@ export interface CheckoutOptions {
|
|
|
42
46
|
* Runs when the grouped loading state changes. The value is `true` while any mounted element is still loading.
|
|
43
47
|
*/
|
|
44
48
|
onLoadingChange?: ((loading: boolean) => void);
|
|
49
|
+
/**
|
|
50
|
+
* Set `false` to turn off Whop's built-in usage analytics for this handle and its elements. The analytics identity is never threaded to its frames. A reserved option, not element data.
|
|
51
|
+
*/
|
|
52
|
+
analytics?: false;
|
|
45
53
|
/**
|
|
46
54
|
* Visual customization for this group's elements. Overrides the global `WhopElements({ appearance })`. Change it live with `update({ appearance })`.
|
|
47
55
|
*/
|
|
@@ -101,20 +109,99 @@ export interface CheckoutElementCreateOptions {
|
|
|
101
109
|
onError?: ((e: { message: string; code?: string | undefined; sourceKey?: string | undefined; }) => void);
|
|
102
110
|
}
|
|
103
111
|
|
|
112
|
+
/**
|
|
113
|
+
* Consumer props for the "expressCheckout" element. Set at create (or as `<ExpressCheckoutElement />` JSX props), and updatable live via `update()`.
|
|
114
|
+
* @see https://docs.whop.com/elements/latest/checkout/expressCheckout
|
|
115
|
+
*/
|
|
116
|
+
export interface ExpressCheckoutElementProps {
|
|
117
|
+
/**
|
|
118
|
+
* Which wallets may render — a filter over what the buyer’s device actually offers. The element never shows a wallet the device or the served matrix cannot back, and the render order stays best-native-first whatever order this lists. An empty list renders nothing (warned in dev builds).
|
|
119
|
+
* @default ["apple_pay","google_pay"]
|
|
120
|
+
*/
|
|
121
|
+
wallets?: ("apple_pay" | "google_pay")[];
|
|
122
|
+
/**
|
|
123
|
+
* How the buttons stack. `auto` follows the element’s own container — stacked in narrow containers, side by side in wide ones; `horizontal` and `vertical` force one arrangement.
|
|
124
|
+
* @default "auto"
|
|
125
|
+
*/
|
|
126
|
+
layout?: "auto" | "horizontal" | "vertical";
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
/**
|
|
130
|
+
* The live handle for a mounted "expressCheckout" element. Returned by `create("expressCheckout")`; in React, the component's `ref`.
|
|
131
|
+
* @see https://docs.whop.com/elements/latest/checkout/expressCheckout
|
|
132
|
+
*/
|
|
133
|
+
export interface ExpressCheckoutElementHandle {
|
|
134
|
+
/**
|
|
135
|
+
* Mounts the element in `target` and starts loading. React components mount themselves.
|
|
136
|
+
*/
|
|
137
|
+
mount: (target: string | HTMLElement) => void;
|
|
138
|
+
/**
|
|
139
|
+
* Removes the element and releases its frame and subscriptions. You can call it more than once. React removes the element automatically.
|
|
140
|
+
*/
|
|
141
|
+
destroy: () => void;
|
|
142
|
+
/**
|
|
143
|
+
* Merges new props into the mounted element. In React, change the component props instead.
|
|
144
|
+
*/
|
|
145
|
+
update: (options: Partial<ExpressCheckoutElementProps>) => void;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
/**
|
|
149
|
+
* Options for `create("expressCheckout")`: the consumer props plus event callbacks and lifecycle hooks.
|
|
150
|
+
* @example
|
|
151
|
+
* ```ts
|
|
152
|
+
* const expressCheckout = checkout.create("expressCheckout", {}); // this interface: props + on<Event> callbacks
|
|
153
|
+
* expressCheckout.mount("#checkout-expressCheckout");
|
|
154
|
+
* ```
|
|
155
|
+
* @see https://docs.whop.com/elements/latest/checkout/expressCheckout
|
|
156
|
+
*/
|
|
157
|
+
export interface ExpressCheckoutElementCreateOptions {
|
|
158
|
+
/**
|
|
159
|
+
* Which wallets may render — a filter over what the buyer’s device actually offers. The element never shows a wallet the device or the served matrix cannot back, and the render order stays best-native-first whatever order this lists. An empty list renders nothing (warned in dev builds).
|
|
160
|
+
* @default ["apple_pay","google_pay"]
|
|
161
|
+
*/
|
|
162
|
+
wallets?: ("apple_pay" | "google_pay")[];
|
|
163
|
+
/**
|
|
164
|
+
* How the buttons stack. `auto` follows the element’s own container — stacked in narrow containers, side by side in wide ones; `horizontal` and `vertical` force one arrangement.
|
|
165
|
+
* @default "auto"
|
|
166
|
+
*/
|
|
167
|
+
layout?: "auto" | "horizontal" | "vertical";
|
|
168
|
+
/**
|
|
169
|
+
* Runs after the loading skeleton first paints and before `onReady`.
|
|
170
|
+
*/
|
|
171
|
+
onLoaderStart?: (() => void);
|
|
172
|
+
/**
|
|
173
|
+
* Runs after the element's first complete paint.
|
|
174
|
+
*/
|
|
175
|
+
onReady?: (() => void);
|
|
176
|
+
/**
|
|
177
|
+
* 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.
|
|
178
|
+
*/
|
|
179
|
+
onError?: ((e: { message: string; code?: string | undefined; sourceKey?: string | undefined; }) => void);
|
|
180
|
+
}
|
|
181
|
+
|
|
104
182
|
/**
|
|
105
183
|
* The Checkout handle, returned by `whop.checkout.create()` (React: `useCheckout()`). Mounts the elements and carries the controller's actions.
|
|
106
184
|
* @see https://docs.whop.com/elements/latest/checkout/overview
|
|
107
185
|
*/
|
|
108
186
|
export interface CheckoutHandle {
|
|
109
187
|
/**
|
|
110
|
-
* The full checkout surface — order summary with the live quote, promo code entry, the currency the buyer pays in, everything this checkout has to collect from the buyer, the composed payment methods surface, and the pay flow. What it collects is whatever the
|
|
111
|
-
* Exclusive slot `entry`. Mount exactly one of: checkout.
|
|
188
|
+
* The full checkout surface — order summary with the live quote, promo code entry, the currency the buyer pays in, everything this checkout has to collect from the buyer, the composed payment methods surface, and the pay flow. What it collects is whatever the seller set up (email, their own questions, a phone number, a shipping address for physical goods, an explicit agreement to their terms), rendered together on one screen in the order they chose — so a seller who starts asking for something new needs no change here. Renders the whole purchase; the checkout controller owns the session and the credential. After a payment that needs an off-site step, this same surface renders the outcome the server reports when the buyer comes back.
|
|
189
|
+
* Exclusive slot `entry`. Mount exactly one of: checkout | expressCheckout.
|
|
112
190
|
*/
|
|
113
191
|
create(name: "checkout", options?: CheckoutElementCreateOptions): CheckoutElementHandle;
|
|
192
|
+
/**
|
|
193
|
+
* One-press Apple Pay and Google Pay buttons for a checkout — the OS payment sheet collects whatever the session still needs (the buyer's email, a shipping address for physical goods, a promo code where the seller offers entry) and one press finishes the purchase. It shares the checkout's entry slot with the full checkout element, so a handle mounts exactly one of the two: this button alone where the purchase is simple enough for a sheet to finish, or the full checkout surface for everything else. Renders only the wallets the buyer's device can actually pay with, using the served button art, and renders nothing where no wallet is available. A checkout the sheet cannot honestly finish — a waitlist join, a transfer, a form question only a page can ask — refuses loudly instead of rendering a doomed button.
|
|
194
|
+
* Exclusive slot `entry`. Mount exactly one of: checkout | expressCheckout.
|
|
195
|
+
*/
|
|
196
|
+
create(name: "expressCheckout", options?: ExpressCheckoutElementCreateOptions): ExpressCheckoutElementHandle;
|
|
114
197
|
/**
|
|
115
198
|
* Merges new handle options into every mounted element. In React, change the namespace props instead.
|
|
116
199
|
*/
|
|
117
200
|
update(options: Partial<CheckoutOptions>): void;
|
|
201
|
+
/**
|
|
202
|
+
* Destroys every element and sub-controller this handle created, removes the controller frame, and releases its subscriptions. You can call it more than once, but a destroyed handle refuses any other call — create a new handle to start over. React removes the group automatically when the provider unmounts.
|
|
203
|
+
*/
|
|
204
|
+
destroy(): void;
|
|
118
205
|
}
|
|
119
206
|
|
|
120
207
|
/**
|
package/index.d.cts
CHANGED
|
@@ -16,7 +16,7 @@ export interface Whop {
|
|
|
16
16
|
*/
|
|
17
17
|
payments: { create(options: PaymentsOptions): PaymentsHandle } & PaymentsStatics;
|
|
18
18
|
/**
|
|
19
|
-
* Drives a full hosted checkout for one plan — price summary, promo codes, the currency the buyer pays in, and the whole payment collection surface (the payments elements, composed inside) — against the Whop checkout sessions API. Mount it with a `plan` and the element opens the checkout session itself; the session credential never leaves the element. The buyer pays inside the element, and a finished checkout redirects the current tab to `returnUrl`, including the page that contains the element. Fulfill from webhooks rather than a browser callback. Without a `returnUrl`, the buyer rests on the element’s own success face. The element automatically drives an off-site payment step, such as 3DS or a bank page. On whop.com, it brings the buyer back into the restored checkout; in an embed, the buyer returns to the same `returnUrl`. A failed payment reopens the same checkout with the reason shown, so the buyer can pay again. Every option is set at creation: the element mints a checkout session from these values when it mounts. Changing one later with `update()` or new React props fails instead of changing the existing order. Mount a new checkout to change the purchase.
|
|
19
|
+
* Drives a full hosted checkout for one plan — price summary, promo codes, the currency the buyer pays in, and the whole payment collection surface (the payments elements, composed inside) — against the Whop checkout sessions API. Mount it with a `plan` (or a `checkoutConfiguration` you authored) and the element opens the checkout session itself; the session credential never leaves the element. The buyer pays inside the element, and a finished checkout redirects the current tab to `returnUrl`, including the page that contains the element. Fulfill from webhooks rather than a browser callback. Without a `returnUrl`, the buyer rests on the element’s own success face. The element automatically drives an off-site payment step, such as 3DS or a bank page. On whop.com, it brings the buyer back into the restored checkout; in an embed, the buyer returns to the same `returnUrl`. A failed payment reopens the same checkout with the reason shown, so the buyer can pay again. Every option is set at creation: the element mints a checkout session from these values when it mounts. Changing one later with `update()` or new React props fails instead of changing the existing order. Mount a new checkout to change the purchase.
|
|
20
20
|
*/
|
|
21
21
|
checkout: { create(options: CheckoutOptions): CheckoutHandle } & CheckoutStatics;
|
|
22
22
|
/**
|
package/index.d.ts
CHANGED
|
@@ -16,7 +16,7 @@ export interface Whop {
|
|
|
16
16
|
*/
|
|
17
17
|
payments: { create(options: PaymentsOptions): PaymentsHandle } & PaymentsStatics;
|
|
18
18
|
/**
|
|
19
|
-
* Drives a full hosted checkout for one plan — price summary, promo codes, the currency the buyer pays in, and the whole payment collection surface (the payments elements, composed inside) — against the Whop checkout sessions API. Mount it with a `plan` and the element opens the checkout session itself; the session credential never leaves the element. The buyer pays inside the element, and a finished checkout redirects the current tab to `returnUrl`, including the page that contains the element. Fulfill from webhooks rather than a browser callback. Without a `returnUrl`, the buyer rests on the element’s own success face. The element automatically drives an off-site payment step, such as 3DS or a bank page. On whop.com, it brings the buyer back into the restored checkout; in an embed, the buyer returns to the same `returnUrl`. A failed payment reopens the same checkout with the reason shown, so the buyer can pay again. Every option is set at creation: the element mints a checkout session from these values when it mounts. Changing one later with `update()` or new React props fails instead of changing the existing order. Mount a new checkout to change the purchase.
|
|
19
|
+
* Drives a full hosted checkout for one plan — price summary, promo codes, the currency the buyer pays in, and the whole payment collection surface (the payments elements, composed inside) — against the Whop checkout sessions API. Mount it with a `plan` (or a `checkoutConfiguration` you authored) and the element opens the checkout session itself; the session credential never leaves the element. The buyer pays inside the element, and a finished checkout redirects the current tab to `returnUrl`, including the page that contains the element. Fulfill from webhooks rather than a browser callback. Without a `returnUrl`, the buyer rests on the element’s own success face. The element automatically drives an off-site payment step, such as 3DS or a bank page. On whop.com, it brings the buyer back into the restored checkout; in an embed, the buyer returns to the same `returnUrl`. A failed payment reopens the same checkout with the reason shown, so the buyer can pay again. Every option is set at creation: the element mints a checkout session from these values when it mounts. Changing one later with `update()` or new React props fails instead of changing the existing order. Mount a new checkout to change the purchase.
|
|
20
20
|
*/
|
|
21
21
|
checkout: { create(options: CheckoutOptions): CheckoutHandle } & CheckoutStatics;
|
|
22
22
|
/**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@whop/elements",
|
|
3
|
-
"version": "1.0.0-beta.
|
|
3
|
+
"version": "1.0.0-beta.1",
|
|
4
4
|
"description": "Whop Elements — vanilla-js loader + types. Loads the hosted SDK and exposes the typed WhopElements factory.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"checkout",
|
|
@@ -81,5 +81,5 @@
|
|
|
81
81
|
}
|
|
82
82
|
}
|
|
83
83
|
},
|
|
84
|
-
"whopElementsApiHash": "
|
|
84
|
+
"whopElementsApiHash": "31ffc5bac2c4d883453f2e655b2c659c727d500b41c4cfae65e66e08988a9424"
|
|
85
85
|
}
|
package/payments.d.cts
CHANGED
|
@@ -43,6 +43,10 @@ export type PaymentsOptions = (
|
|
|
43
43
|
* Runs when the grouped loading state changes. The value is `true` while any mounted element is still loading.
|
|
44
44
|
*/
|
|
45
45
|
onLoadingChange?: ((loading: boolean) => void);
|
|
46
|
+
/**
|
|
47
|
+
* Set `false` to turn off Whop's built-in usage analytics for this handle and its elements. The analytics identity is never threaded to its frames. A reserved option, not element data.
|
|
48
|
+
*/
|
|
49
|
+
analytics?: false;
|
|
46
50
|
}
|
|
47
51
|
| {
|
|
48
52
|
/**
|
|
@@ -85,6 +89,10 @@ export type PaymentsOptions = (
|
|
|
85
89
|
* Runs when the grouped loading state changes. The value is `true` while any mounted element is still loading.
|
|
86
90
|
*/
|
|
87
91
|
onLoadingChange?: ((loading: boolean) => void);
|
|
92
|
+
/**
|
|
93
|
+
* Set `false` to turn off Whop's built-in usage analytics for this handle and its elements. The analytics identity is never threaded to its frames. A reserved option, not element data.
|
|
94
|
+
*/
|
|
95
|
+
analytics?: false;
|
|
88
96
|
}
|
|
89
97
|
| {
|
|
90
98
|
/**
|
|
@@ -131,6 +139,10 @@ export type PaymentsOptions = (
|
|
|
131
139
|
* Runs when the grouped loading state changes. The value is `true` while any mounted element is still loading.
|
|
132
140
|
*/
|
|
133
141
|
onLoadingChange?: ((loading: boolean) => void);
|
|
142
|
+
/**
|
|
143
|
+
* Set `false` to turn off Whop's built-in usage analytics for this handle and its elements. The analytics identity is never threaded to its frames. A reserved option, not element data.
|
|
144
|
+
*/
|
|
145
|
+
analytics?: false;
|
|
134
146
|
}
|
|
135
147
|
) & {
|
|
136
148
|
/**
|
|
@@ -148,6 +160,11 @@ export type PaymentsOptions = (
|
|
|
148
160
|
* @see https://docs.whop.com/elements/latest/payments/payment
|
|
149
161
|
*/
|
|
150
162
|
export interface PaymentElementProps {
|
|
163
|
+
/**
|
|
164
|
+
* Controls display order in either layout. Listed types appear first in order. Unlisted types retain their relative order. Does not affect availability.
|
|
165
|
+
* @default []
|
|
166
|
+
*/
|
|
167
|
+
order?: string[];
|
|
151
168
|
/**
|
|
152
169
|
* Controls billing-details collection. `billingDetails: 'minimal'` (default) follows each method's matrix. Methods collect name and the complete country format by default. An override may collect only the declared minimum or nothing. For cards, the minimum is name on card, country, and postal code. `'full'` requires name and the complete country format for every fresh method. `'never'` hides the block. Pass the address to `createConfirmationToken` instead. The country selector includes only countries supported by the method and payment currency. It locks when only one is available.
|
|
153
170
|
* @default {"billingDetails":"minimal"}
|
|
@@ -163,11 +180,6 @@ export interface PaymentElementProps {
|
|
|
163
180
|
* @default false
|
|
164
181
|
*/
|
|
165
182
|
separated?: boolean;
|
|
166
|
-
/**
|
|
167
|
-
* Controls display order in either layout. Listed types appear first in order. Unlisted types retain their relative order. Does not affect availability.
|
|
168
|
-
* @default []
|
|
169
|
-
*/
|
|
170
|
-
order?: string[];
|
|
171
183
|
/**
|
|
172
184
|
* Whether to select the first offered method after resolution. The default `true` respects `order` and emits `selected` and `change` like a buyer interaction. It runs once before buyer interaction and does nothing when no method is offered. Set `false` to mount unselected. Independently, if an update removes the selected method, selection falls back to the first offered method. An already unselected element stays unselected.
|
|
173
185
|
* @default true
|
|
@@ -208,6 +220,11 @@ export interface PaymentElementHandle {
|
|
|
208
220
|
* @see https://docs.whop.com/elements/latest/payments/payment
|
|
209
221
|
*/
|
|
210
222
|
export interface PaymentElementCreateOptions {
|
|
223
|
+
/**
|
|
224
|
+
* Controls display order in either layout. Listed types appear first in order. Unlisted types retain their relative order. Does not affect availability.
|
|
225
|
+
* @default []
|
|
226
|
+
*/
|
|
227
|
+
order?: string[];
|
|
211
228
|
/**
|
|
212
229
|
* Controls billing-details collection. `billingDetails: 'minimal'` (default) follows each method's matrix. Methods collect name and the complete country format by default. An override may collect only the declared minimum or nothing. For cards, the minimum is name on card, country, and postal code. `'full'` requires name and the complete country format for every fresh method. `'never'` hides the block. Pass the address to `createConfirmationToken` instead. The country selector includes only countries supported by the method and payment currency. It locks when only one is available.
|
|
213
230
|
* @default {"billingDetails":"minimal"}
|
|
@@ -223,11 +240,6 @@ export interface PaymentElementCreateOptions {
|
|
|
223
240
|
* @default false
|
|
224
241
|
*/
|
|
225
242
|
separated?: boolean;
|
|
226
|
-
/**
|
|
227
|
-
* Controls display order in either layout. Listed types appear first in order. Unlisted types retain their relative order. Does not affect availability.
|
|
228
|
-
* @default []
|
|
229
|
-
*/
|
|
230
|
-
order?: string[];
|
|
231
243
|
/**
|
|
232
244
|
* Whether to select the first offered method after resolution. The default `true` respects `order` and emits `selected` and `change` like a buyer interaction. It runs once before buyer interaction and does nothing when no method is offered. Set `false` to mount unselected. Independently, if an update removes the selected method, selection falls back to the first offered method. An already unselected element stays unselected.
|
|
233
245
|
* @default true
|
|
@@ -671,6 +683,55 @@ export interface TaxIdElementCreateOptions {
|
|
|
671
683
|
onError?: ((e: { message: string; code?: string | undefined; sourceKey?: string | undefined; }) => void);
|
|
672
684
|
}
|
|
673
685
|
|
|
686
|
+
/**
|
|
687
|
+
* Consumer props for the "branding" element. Set at create (or as `<BrandingElement />` JSX props), and updatable live via `update()`.
|
|
688
|
+
* @see https://docs.whop.com/elements/latest/payments/branding
|
|
689
|
+
*/
|
|
690
|
+
export interface BrandingElementProps {}
|
|
691
|
+
|
|
692
|
+
/**
|
|
693
|
+
* The live handle for a mounted "branding" element. Returned by `create("branding")`; in React, the component's `ref`.
|
|
694
|
+
* @see https://docs.whop.com/elements/latest/payments/branding
|
|
695
|
+
*/
|
|
696
|
+
export interface BrandingElementHandle {
|
|
697
|
+
/**
|
|
698
|
+
* Mounts the element in `target` and starts loading. React components mount themselves.
|
|
699
|
+
*/
|
|
700
|
+
mount: (target: string | HTMLElement) => void;
|
|
701
|
+
/**
|
|
702
|
+
* Removes the element and releases its frame and subscriptions. You can call it more than once. React removes the element automatically.
|
|
703
|
+
*/
|
|
704
|
+
destroy: () => void;
|
|
705
|
+
/**
|
|
706
|
+
* Merges new props into the mounted element. In React, change the component props instead.
|
|
707
|
+
*/
|
|
708
|
+
update: (options: Partial<BrandingElementProps>) => void;
|
|
709
|
+
}
|
|
710
|
+
|
|
711
|
+
/**
|
|
712
|
+
* Options for `create("branding")`: the consumer props plus event callbacks and lifecycle hooks.
|
|
713
|
+
* @example
|
|
714
|
+
* ```ts
|
|
715
|
+
* const branding = payments.create("branding", {}); // this interface: props + on<Event> callbacks
|
|
716
|
+
* branding.mount("#payments-branding");
|
|
717
|
+
* ```
|
|
718
|
+
* @see https://docs.whop.com/elements/latest/payments/branding
|
|
719
|
+
*/
|
|
720
|
+
export interface BrandingElementCreateOptions {
|
|
721
|
+
/**
|
|
722
|
+
* Runs after the loading skeleton first paints and before `onReady`.
|
|
723
|
+
*/
|
|
724
|
+
onLoaderStart?: (() => void);
|
|
725
|
+
/**
|
|
726
|
+
* Runs after the element's first complete paint.
|
|
727
|
+
*/
|
|
728
|
+
onReady?: (() => void);
|
|
729
|
+
/**
|
|
730
|
+
* 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.
|
|
731
|
+
*/
|
|
732
|
+
onError?: ((e: { message: string; code?: string | undefined; sourceKey?: string | undefined; }) => void);
|
|
733
|
+
}
|
|
734
|
+
|
|
674
735
|
/**
|
|
675
736
|
* Consumer props for the "cardFields" sub-controller: the `create("cardFields")` options and the minted sub handle's `update()` payload (React: `<CardFields>` props). Parent-injected props never appear here.
|
|
676
737
|
* @see https://docs.whop.com/elements/latest/payments/overview
|
|
@@ -693,10 +754,6 @@ export interface CardFieldsSubOptions {
|
|
|
693
754
|
* Fires when completeness changes. `complete` becomes true after the buyer fills all three fields. Use it to enable confirmation. `brand` is the detected card network.
|
|
694
755
|
*/
|
|
695
756
|
onChange?: ((payload: { complete: boolean; brand: string; }) => void);
|
|
696
|
-
/**
|
|
697
|
-
* Runs when the grouped loading state changes. The value is `true` while any mounted element is still loading.
|
|
698
|
-
*/
|
|
699
|
-
onLoadingChange?: ((loading: boolean) => void);
|
|
700
757
|
}
|
|
701
758
|
|
|
702
759
|
/**
|
|
@@ -918,11 +975,11 @@ export interface PaymentRequestResourceOptions {
|
|
|
918
975
|
*/
|
|
919
976
|
export interface PaymentRequestResource {
|
|
920
977
|
/**
|
|
921
|
-
* Returns availability for each wallet when the account offers it
|
|
978
|
+
* Returns availability for each wallet when the account offers it, the device supports it, and this page's origin is approved for the account (first-party whop.com pages are pre-approved; a merchant page needs its domain registered as a payment method domain). Apple Pay on non-WebKit browsers is the desktop iPhone-handoff flow, so mobile devices there report it unavailable — native Apple Pay on iOS browsers is unaffected. `order` ranks the wallets by which sheet is native to the browser — Apple Pay first on Safari, Google Pay first elsewhere — so express buttons can stack best-first. This primes `show()`. Always await it first.
|
|
922
979
|
*/
|
|
923
980
|
canMakePayment: () => Promise<WalletAvailability>;
|
|
924
981
|
/**
|
|
925
|
-
* Open the selected wallet sheet after awaiting `canMakePayment()`. Apple requires session creation within the gesture stack.
|
|
982
|
+
* Open the selected wallet sheet after awaiting `canMakePayment()`. Apple requires session creation within the gesture stack. Pass `email` when your page already collected one — the sheet takes it and never asks for a second. With `requestPayerEmail: false`, passing one is required, and the sheet refuses to open without it because confirmation tokens require an email.
|
|
926
983
|
* Call synchronously during user activation. Await prerequisites first because browsers revoke activation across asynchronous steps.
|
|
927
984
|
*/
|
|
928
985
|
show: (type: "apple_pay" | "google_pay", provided?: { email?: string | undefined; } | undefined) => Promise<PaymentRequestResult>;
|
|
@@ -983,6 +1040,10 @@ export interface PaymentsHandle {
|
|
|
983
1040
|
* Collects a business tax registration accepted by the API. Labels use buyer-facing names. The placeholder matches the selected format. `country` preselects a type. `onChange` emits committed pairs. The host supplies API validation errors.
|
|
984
1041
|
*/
|
|
985
1042
|
create(name: "taxId", options?: TaxIdElementCreateOptions): TaxIdElementHandle;
|
|
1043
|
+
/**
|
|
1044
|
+
* Whop's merchant-of-record notice: the Whop wordmark with links to the buyer terms and privacy policy. Required — the other payments elements stay in their loading state until it is mounted, and payments cannot be confirmed without it.
|
|
1045
|
+
*/
|
|
1046
|
+
create(name: "branding", options?: BrandingElementCreateOptions): BrandingElementHandle;
|
|
986
1047
|
/**
|
|
987
1048
|
* Creates a confirmation token for the selected method from your pay button. Pass the checkout's billing details. They must include `email`. Cards also need `name` and an address containing `line1` and `country`. Wallet selections open their sheet during the pay-button interaction. Confirm the returned `confirmationToken` server-side, then call `WhopElements.payments.handleNextAction(…)`.
|
|
988
1049
|
* Runs on your page (host-side), not in the controller iframe.
|
|
@@ -997,6 +1058,10 @@ export interface PaymentsHandle {
|
|
|
997
1058
|
* Merges new handle options into every mounted element. In React, change the namespace props instead.
|
|
998
1059
|
*/
|
|
999
1060
|
update(options: Partial<PaymentsOptions>): void;
|
|
1061
|
+
/**
|
|
1062
|
+
* Destroys every element and sub-controller this handle created, removes the controller frame, and releases its subscriptions. You can call it more than once, but a destroyed handle refuses any other call — create a new handle to start over. React removes the group automatically when the provider unmounts.
|
|
1063
|
+
*/
|
|
1064
|
+
destroy(): void;
|
|
1000
1065
|
}
|
|
1001
1066
|
|
|
1002
1067
|
/**
|
|
@@ -1022,6 +1087,10 @@ export interface PaymentsStatics {
|
|
|
1022
1087
|
export interface WalletAvailability {
|
|
1023
1088
|
applePay: boolean;
|
|
1024
1089
|
googlePay: boolean;
|
|
1090
|
+
/**
|
|
1091
|
+
* The wallets ranked by which sheet is native to this browser — Apple Pay first on WebKit, Google Pay first everywhere else — so express buttons can stack best-first. Absent on consumer-stated availability (previews) and on wires that predate it. An inline union, not payment-request's WalletSheetType: that module already imports this one.
|
|
1092
|
+
*/
|
|
1093
|
+
order?: ("apple_pay" | "google_pay")[] | undefined;
|
|
1025
1094
|
}
|
|
1026
1095
|
|
|
1027
1096
|
/**
|
package/payments.d.ts
CHANGED
|
@@ -43,6 +43,10 @@ export type PaymentsOptions = (
|
|
|
43
43
|
* Runs when the grouped loading state changes. The value is `true` while any mounted element is still loading.
|
|
44
44
|
*/
|
|
45
45
|
onLoadingChange?: ((loading: boolean) => void);
|
|
46
|
+
/**
|
|
47
|
+
* Set `false` to turn off Whop's built-in usage analytics for this handle and its elements. The analytics identity is never threaded to its frames. A reserved option, not element data.
|
|
48
|
+
*/
|
|
49
|
+
analytics?: false;
|
|
46
50
|
}
|
|
47
51
|
| {
|
|
48
52
|
/**
|
|
@@ -85,6 +89,10 @@ export type PaymentsOptions = (
|
|
|
85
89
|
* Runs when the grouped loading state changes. The value is `true` while any mounted element is still loading.
|
|
86
90
|
*/
|
|
87
91
|
onLoadingChange?: ((loading: boolean) => void);
|
|
92
|
+
/**
|
|
93
|
+
* Set `false` to turn off Whop's built-in usage analytics for this handle and its elements. The analytics identity is never threaded to its frames. A reserved option, not element data.
|
|
94
|
+
*/
|
|
95
|
+
analytics?: false;
|
|
88
96
|
}
|
|
89
97
|
| {
|
|
90
98
|
/**
|
|
@@ -131,6 +139,10 @@ export type PaymentsOptions = (
|
|
|
131
139
|
* Runs when the grouped loading state changes. The value is `true` while any mounted element is still loading.
|
|
132
140
|
*/
|
|
133
141
|
onLoadingChange?: ((loading: boolean) => void);
|
|
142
|
+
/**
|
|
143
|
+
* Set `false` to turn off Whop's built-in usage analytics for this handle and its elements. The analytics identity is never threaded to its frames. A reserved option, not element data.
|
|
144
|
+
*/
|
|
145
|
+
analytics?: false;
|
|
134
146
|
}
|
|
135
147
|
) & {
|
|
136
148
|
/**
|
|
@@ -148,6 +160,11 @@ export type PaymentsOptions = (
|
|
|
148
160
|
* @see https://docs.whop.com/elements/latest/payments/payment
|
|
149
161
|
*/
|
|
150
162
|
export interface PaymentElementProps {
|
|
163
|
+
/**
|
|
164
|
+
* Controls display order in either layout. Listed types appear first in order. Unlisted types retain their relative order. Does not affect availability.
|
|
165
|
+
* @default []
|
|
166
|
+
*/
|
|
167
|
+
order?: string[];
|
|
151
168
|
/**
|
|
152
169
|
* Controls billing-details collection. `billingDetails: 'minimal'` (default) follows each method's matrix. Methods collect name and the complete country format by default. An override may collect only the declared minimum or nothing. For cards, the minimum is name on card, country, and postal code. `'full'` requires name and the complete country format for every fresh method. `'never'` hides the block. Pass the address to `createConfirmationToken` instead. The country selector includes only countries supported by the method and payment currency. It locks when only one is available.
|
|
153
170
|
* @default {"billingDetails":"minimal"}
|
|
@@ -163,11 +180,6 @@ export interface PaymentElementProps {
|
|
|
163
180
|
* @default false
|
|
164
181
|
*/
|
|
165
182
|
separated?: boolean;
|
|
166
|
-
/**
|
|
167
|
-
* Controls display order in either layout. Listed types appear first in order. Unlisted types retain their relative order. Does not affect availability.
|
|
168
|
-
* @default []
|
|
169
|
-
*/
|
|
170
|
-
order?: string[];
|
|
171
183
|
/**
|
|
172
184
|
* Whether to select the first offered method after resolution. The default `true` respects `order` and emits `selected` and `change` like a buyer interaction. It runs once before buyer interaction and does nothing when no method is offered. Set `false` to mount unselected. Independently, if an update removes the selected method, selection falls back to the first offered method. An already unselected element stays unselected.
|
|
173
185
|
* @default true
|
|
@@ -208,6 +220,11 @@ export interface PaymentElementHandle {
|
|
|
208
220
|
* @see https://docs.whop.com/elements/latest/payments/payment
|
|
209
221
|
*/
|
|
210
222
|
export interface PaymentElementCreateOptions {
|
|
223
|
+
/**
|
|
224
|
+
* Controls display order in either layout. Listed types appear first in order. Unlisted types retain their relative order. Does not affect availability.
|
|
225
|
+
* @default []
|
|
226
|
+
*/
|
|
227
|
+
order?: string[];
|
|
211
228
|
/**
|
|
212
229
|
* Controls billing-details collection. `billingDetails: 'minimal'` (default) follows each method's matrix. Methods collect name and the complete country format by default. An override may collect only the declared minimum or nothing. For cards, the minimum is name on card, country, and postal code. `'full'` requires name and the complete country format for every fresh method. `'never'` hides the block. Pass the address to `createConfirmationToken` instead. The country selector includes only countries supported by the method and payment currency. It locks when only one is available.
|
|
213
230
|
* @default {"billingDetails":"minimal"}
|
|
@@ -223,11 +240,6 @@ export interface PaymentElementCreateOptions {
|
|
|
223
240
|
* @default false
|
|
224
241
|
*/
|
|
225
242
|
separated?: boolean;
|
|
226
|
-
/**
|
|
227
|
-
* Controls display order in either layout. Listed types appear first in order. Unlisted types retain their relative order. Does not affect availability.
|
|
228
|
-
* @default []
|
|
229
|
-
*/
|
|
230
|
-
order?: string[];
|
|
231
243
|
/**
|
|
232
244
|
* Whether to select the first offered method after resolution. The default `true` respects `order` and emits `selected` and `change` like a buyer interaction. It runs once before buyer interaction and does nothing when no method is offered. Set `false` to mount unselected. Independently, if an update removes the selected method, selection falls back to the first offered method. An already unselected element stays unselected.
|
|
233
245
|
* @default true
|
|
@@ -671,6 +683,55 @@ export interface TaxIdElementCreateOptions {
|
|
|
671
683
|
onError?: ((e: { message: string; code?: string | undefined; sourceKey?: string | undefined; }) => void);
|
|
672
684
|
}
|
|
673
685
|
|
|
686
|
+
/**
|
|
687
|
+
* Consumer props for the "branding" element. Set at create (or as `<BrandingElement />` JSX props), and updatable live via `update()`.
|
|
688
|
+
* @see https://docs.whop.com/elements/latest/payments/branding
|
|
689
|
+
*/
|
|
690
|
+
export interface BrandingElementProps {}
|
|
691
|
+
|
|
692
|
+
/**
|
|
693
|
+
* The live handle for a mounted "branding" element. Returned by `create("branding")`; in React, the component's `ref`.
|
|
694
|
+
* @see https://docs.whop.com/elements/latest/payments/branding
|
|
695
|
+
*/
|
|
696
|
+
export interface BrandingElementHandle {
|
|
697
|
+
/**
|
|
698
|
+
* Mounts the element in `target` and starts loading. React components mount themselves.
|
|
699
|
+
*/
|
|
700
|
+
mount: (target: string | HTMLElement) => void;
|
|
701
|
+
/**
|
|
702
|
+
* Removes the element and releases its frame and subscriptions. You can call it more than once. React removes the element automatically.
|
|
703
|
+
*/
|
|
704
|
+
destroy: () => void;
|
|
705
|
+
/**
|
|
706
|
+
* Merges new props into the mounted element. In React, change the component props instead.
|
|
707
|
+
*/
|
|
708
|
+
update: (options: Partial<BrandingElementProps>) => void;
|
|
709
|
+
}
|
|
710
|
+
|
|
711
|
+
/**
|
|
712
|
+
* Options for `create("branding")`: the consumer props plus event callbacks and lifecycle hooks.
|
|
713
|
+
* @example
|
|
714
|
+
* ```ts
|
|
715
|
+
* const branding = payments.create("branding", {}); // this interface: props + on<Event> callbacks
|
|
716
|
+
* branding.mount("#payments-branding");
|
|
717
|
+
* ```
|
|
718
|
+
* @see https://docs.whop.com/elements/latest/payments/branding
|
|
719
|
+
*/
|
|
720
|
+
export interface BrandingElementCreateOptions {
|
|
721
|
+
/**
|
|
722
|
+
* Runs after the loading skeleton first paints and before `onReady`.
|
|
723
|
+
*/
|
|
724
|
+
onLoaderStart?: (() => void);
|
|
725
|
+
/**
|
|
726
|
+
* Runs after the element's first complete paint.
|
|
727
|
+
*/
|
|
728
|
+
onReady?: (() => void);
|
|
729
|
+
/**
|
|
730
|
+
* 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.
|
|
731
|
+
*/
|
|
732
|
+
onError?: ((e: { message: string; code?: string | undefined; sourceKey?: string | undefined; }) => void);
|
|
733
|
+
}
|
|
734
|
+
|
|
674
735
|
/**
|
|
675
736
|
* Consumer props for the "cardFields" sub-controller: the `create("cardFields")` options and the minted sub handle's `update()` payload (React: `<CardFields>` props). Parent-injected props never appear here.
|
|
676
737
|
* @see https://docs.whop.com/elements/latest/payments/overview
|
|
@@ -693,10 +754,6 @@ export interface CardFieldsSubOptions {
|
|
|
693
754
|
* Fires when completeness changes. `complete` becomes true after the buyer fills all three fields. Use it to enable confirmation. `brand` is the detected card network.
|
|
694
755
|
*/
|
|
695
756
|
onChange?: ((payload: { complete: boolean; brand: string; }) => void);
|
|
696
|
-
/**
|
|
697
|
-
* Runs when the grouped loading state changes. The value is `true` while any mounted element is still loading.
|
|
698
|
-
*/
|
|
699
|
-
onLoadingChange?: ((loading: boolean) => void);
|
|
700
757
|
}
|
|
701
758
|
|
|
702
759
|
/**
|
|
@@ -918,11 +975,11 @@ export interface PaymentRequestResourceOptions {
|
|
|
918
975
|
*/
|
|
919
976
|
export interface PaymentRequestResource {
|
|
920
977
|
/**
|
|
921
|
-
* Returns availability for each wallet when the account offers it
|
|
978
|
+
* Returns availability for each wallet when the account offers it, the device supports it, and this page's origin is approved for the account (first-party whop.com pages are pre-approved; a merchant page needs its domain registered as a payment method domain). Apple Pay on non-WebKit browsers is the desktop iPhone-handoff flow, so mobile devices there report it unavailable — native Apple Pay on iOS browsers is unaffected. `order` ranks the wallets by which sheet is native to the browser — Apple Pay first on Safari, Google Pay first elsewhere — so express buttons can stack best-first. This primes `show()`. Always await it first.
|
|
922
979
|
*/
|
|
923
980
|
canMakePayment: () => Promise<WalletAvailability>;
|
|
924
981
|
/**
|
|
925
|
-
* Open the selected wallet sheet after awaiting `canMakePayment()`. Apple requires session creation within the gesture stack.
|
|
982
|
+
* Open the selected wallet sheet after awaiting `canMakePayment()`. Apple requires session creation within the gesture stack. Pass `email` when your page already collected one — the sheet takes it and never asks for a second. With `requestPayerEmail: false`, passing one is required, and the sheet refuses to open without it because confirmation tokens require an email.
|
|
926
983
|
* Call synchronously during user activation. Await prerequisites first because browsers revoke activation across asynchronous steps.
|
|
927
984
|
*/
|
|
928
985
|
show: (type: "apple_pay" | "google_pay", provided?: { email?: string | undefined; } | undefined) => Promise<PaymentRequestResult>;
|
|
@@ -983,6 +1040,10 @@ export interface PaymentsHandle {
|
|
|
983
1040
|
* Collects a business tax registration accepted by the API. Labels use buyer-facing names. The placeholder matches the selected format. `country` preselects a type. `onChange` emits committed pairs. The host supplies API validation errors.
|
|
984
1041
|
*/
|
|
985
1042
|
create(name: "taxId", options?: TaxIdElementCreateOptions): TaxIdElementHandle;
|
|
1043
|
+
/**
|
|
1044
|
+
* Whop's merchant-of-record notice: the Whop wordmark with links to the buyer terms and privacy policy. Required — the other payments elements stay in their loading state until it is mounted, and payments cannot be confirmed without it.
|
|
1045
|
+
*/
|
|
1046
|
+
create(name: "branding", options?: BrandingElementCreateOptions): BrandingElementHandle;
|
|
986
1047
|
/**
|
|
987
1048
|
* Creates a confirmation token for the selected method from your pay button. Pass the checkout's billing details. They must include `email`. Cards also need `name` and an address containing `line1` and `country`. Wallet selections open their sheet during the pay-button interaction. Confirm the returned `confirmationToken` server-side, then call `WhopElements.payments.handleNextAction(…)`.
|
|
988
1049
|
* Runs on your page (host-side), not in the controller iframe.
|
|
@@ -997,6 +1058,10 @@ export interface PaymentsHandle {
|
|
|
997
1058
|
* Merges new handle options into every mounted element. In React, change the namespace props instead.
|
|
998
1059
|
*/
|
|
999
1060
|
update(options: Partial<PaymentsOptions>): void;
|
|
1061
|
+
/**
|
|
1062
|
+
* Destroys every element and sub-controller this handle created, removes the controller frame, and releases its subscriptions. You can call it more than once, but a destroyed handle refuses any other call — create a new handle to start over. React removes the group automatically when the provider unmounts.
|
|
1063
|
+
*/
|
|
1064
|
+
destroy(): void;
|
|
1000
1065
|
}
|
|
1001
1066
|
|
|
1002
1067
|
/**
|
|
@@ -1022,6 +1087,10 @@ export interface PaymentsStatics {
|
|
|
1022
1087
|
export interface WalletAvailability {
|
|
1023
1088
|
applePay: boolean;
|
|
1024
1089
|
googlePay: boolean;
|
|
1090
|
+
/**
|
|
1091
|
+
* The wallets ranked by which sheet is native to this browser — Apple Pay first on WebKit, Google Pay first everywhere else — so express buttons can stack best-first. Absent on consumer-stated availability (previews) and on wires that predate it. An inline union, not payment-request's WalletSheetType: that module already imports this one.
|
|
1092
|
+
*/
|
|
1093
|
+
order?: ("apple_pay" | "google_pay")[] | undefined;
|
|
1025
1094
|
}
|
|
1026
1095
|
|
|
1027
1096
|
/**
|
package/tracking.d.cts
CHANGED
|
@@ -48,6 +48,10 @@ export interface TrackingOptions {
|
|
|
48
48
|
* Runs when the grouped loading state changes. The value is `true` while any mounted element is still loading.
|
|
49
49
|
*/
|
|
50
50
|
onLoadingChange?: ((loading: boolean) => void);
|
|
51
|
+
/**
|
|
52
|
+
* Set `false` to turn off Whop's built-in usage analytics for this handle and its elements. The analytics identity is never threaded to its frames. A reserved option, not element data.
|
|
53
|
+
*/
|
|
54
|
+
analytics?: false;
|
|
51
55
|
/**
|
|
52
56
|
* Visual customization for this group's elements. Overrides the global `WhopElements({ appearance })`. Change it live with `update({ appearance })`.
|
|
53
57
|
*/
|
|
@@ -461,6 +465,10 @@ export interface TrackingHandle {
|
|
|
461
465
|
* Merges new handle options into every mounted element. In React, change the namespace props instead.
|
|
462
466
|
*/
|
|
463
467
|
update(options: Partial<TrackingOptions>): void;
|
|
468
|
+
/**
|
|
469
|
+
* Destroys every element and sub-controller this handle created, removes the controller frame, and releases its subscriptions. You can call it more than once, but a destroyed handle refuses any other call — create a new handle to start over. React removes the group automatically when the provider unmounts.
|
|
470
|
+
*/
|
|
471
|
+
destroy(): void;
|
|
464
472
|
}
|
|
465
473
|
|
|
466
474
|
/**
|
package/tracking.d.ts
CHANGED
|
@@ -48,6 +48,10 @@ export interface TrackingOptions {
|
|
|
48
48
|
* Runs when the grouped loading state changes. The value is `true` while any mounted element is still loading.
|
|
49
49
|
*/
|
|
50
50
|
onLoadingChange?: ((loading: boolean) => void);
|
|
51
|
+
/**
|
|
52
|
+
* Set `false` to turn off Whop's built-in usage analytics for this handle and its elements. The analytics identity is never threaded to its frames. A reserved option, not element data.
|
|
53
|
+
*/
|
|
54
|
+
analytics?: false;
|
|
51
55
|
/**
|
|
52
56
|
* Visual customization for this group's elements. Overrides the global `WhopElements({ appearance })`. Change it live with `update({ appearance })`.
|
|
53
57
|
*/
|
|
@@ -461,6 +465,10 @@ export interface TrackingHandle {
|
|
|
461
465
|
* Merges new handle options into every mounted element. In React, change the namespace props instead.
|
|
462
466
|
*/
|
|
463
467
|
update(options: Partial<TrackingOptions>): void;
|
|
468
|
+
/**
|
|
469
|
+
* Destroys every element and sub-controller this handle created, removes the controller frame, and releases its subscriptions. You can call it more than once, but a destroyed handle refuses any other call — create a new handle to start over. React removes the group automatically when the provider unmounts.
|
|
470
|
+
*/
|
|
471
|
+
destroy(): void;
|
|
464
472
|
}
|
|
465
473
|
|
|
466
474
|
/**
|
package/wallet.d.cts
CHANGED
|
@@ -23,6 +23,10 @@ export interface WalletOptions {
|
|
|
23
23
|
* Runs when the grouped loading state changes. The value is `true` while any mounted element is still loading.
|
|
24
24
|
*/
|
|
25
25
|
onLoadingChange?: ((loading: boolean) => void);
|
|
26
|
+
/**
|
|
27
|
+
* Set `false` to turn off Whop's built-in usage analytics for this handle and its elements. The analytics identity is never threaded to its frames. A reserved option, not element data.
|
|
28
|
+
*/
|
|
29
|
+
analytics?: false;
|
|
26
30
|
/**
|
|
27
31
|
* Visual customization for this group's elements. Overrides the global `WhopElements({ appearance })`. Change it live with `update({ appearance })`.
|
|
28
32
|
*/
|
|
@@ -357,6 +361,11 @@ export interface DepositElementOverlayHandle {
|
|
|
357
361
|
* @see https://docs.whop.com/elements/latest/wallet/withdraw
|
|
358
362
|
*/
|
|
359
363
|
export interface WithdrawElementProps {
|
|
364
|
+
/**
|
|
365
|
+
* Whether the confirmed payout was created successfully.
|
|
366
|
+
* @default false
|
|
367
|
+
*/
|
|
368
|
+
succeeded?: boolean;
|
|
360
369
|
/**
|
|
361
370
|
* Saved payout methods with quotes for the current amount.
|
|
362
371
|
* @default []
|
|
@@ -468,6 +477,11 @@ export interface WithdrawElementHandle {
|
|
|
468
477
|
* @see https://docs.whop.com/elements/latest/wallet/withdraw
|
|
469
478
|
*/
|
|
470
479
|
export interface WithdrawElementCreateOptions {
|
|
480
|
+
/**
|
|
481
|
+
* Whether the confirmed payout was created successfully.
|
|
482
|
+
* @default false
|
|
483
|
+
*/
|
|
484
|
+
succeeded?: boolean;
|
|
471
485
|
/**
|
|
472
486
|
* Saved payout methods with quotes for the current amount.
|
|
473
487
|
* @default []
|
|
@@ -584,6 +598,10 @@ export interface WithdrawElementCreateOptions {
|
|
|
584
598
|
* The payer confirmed the final payout details. Create the payout on receipt.
|
|
585
599
|
*/
|
|
586
600
|
onWithdrawalRequested?: ((payload: WithdrawalRequest) => void);
|
|
601
|
+
/**
|
|
602
|
+
* The payer finished reviewing a successful payout.
|
|
603
|
+
*/
|
|
604
|
+
onDone?: ((payload: Record<string, never>) => void);
|
|
587
605
|
/**
|
|
588
606
|
* Runs after the loading skeleton first paints and before `onReady`.
|
|
589
607
|
*/
|
|
@@ -712,7 +730,7 @@ export interface SendElementCreateOptions {
|
|
|
712
730
|
/**
|
|
713
731
|
* The visible screen changed.
|
|
714
732
|
*/
|
|
715
|
-
onStepChanged?: ((payload: { step: "
|
|
733
|
+
onStepChanged?: ((payload: { step: "success" | "enter_amount" | "select_recipient" | "create_link" | "link_success"; }) => void);
|
|
716
734
|
/**
|
|
717
735
|
* A transfer succeeded. Refresh anything on your side reading the account's balance or activity.
|
|
718
736
|
*/
|
|
@@ -768,7 +786,7 @@ export interface SendElementOverlayHandle {
|
|
|
768
786
|
*/
|
|
769
787
|
export interface CardsElementProps {
|
|
770
788
|
/**
|
|
771
|
-
* A scoped token for the privileged read — needs `payout:account:read`. Mint it on your server with `POST /api/v1/access_tokens`. Omitted, the
|
|
789
|
+
* A scoped token for the privileged read and verification start — needs `payout:account:read` and `identity:write`. Mint it on your server with `POST /api/v1/access_tokens`. Omitted, the calls carry the viewer's own session, which only answers same-origin.
|
|
772
790
|
*/
|
|
773
791
|
accessToken?: string;
|
|
774
792
|
/**
|
|
@@ -827,7 +845,7 @@ export interface CardsElementHandle {
|
|
|
827
845
|
*/
|
|
828
846
|
export interface CardsElementCreateOptions {
|
|
829
847
|
/**
|
|
830
|
-
* A scoped token for the privileged read — needs `payout:account:read`. Mint it on your server with `POST /api/v1/access_tokens`. Omitted, the
|
|
848
|
+
* A scoped token for the privileged read and verification start — needs `payout:account:read` and `identity:write`. Mint it on your server with `POST /api/v1/access_tokens`. Omitted, the calls carry the viewer's own session, which only answers same-origin.
|
|
831
849
|
*/
|
|
832
850
|
accessToken?: string;
|
|
833
851
|
/**
|
|
@@ -862,6 +880,10 @@ export interface CardsElementCreateOptions {
|
|
|
862
880
|
* The "+" button was clicked. Only fires when `hideAddButton` is false.
|
|
863
881
|
*/
|
|
864
882
|
onAddCardRequested?: ((payload: Record<string, never>) => void);
|
|
883
|
+
/**
|
|
884
|
+
* The viewer pressed the verify button on an account with no card program. The element starts the hosted session and leaves for it itself — this fires alongside, so a host can record the trip or show its own state.
|
|
885
|
+
*/
|
|
886
|
+
onVerificationRequested?: ((payload: { accountId: string; }) => void);
|
|
865
887
|
/**
|
|
866
888
|
* Runs after the loading skeleton first paints and before `onReady`.
|
|
867
889
|
*/
|
|
@@ -880,12 +902,7 @@ export interface CardsElementCreateOptions {
|
|
|
880
902
|
* Consumer props for the "balances" sub-controller: the `create("balances")` options and the minted sub handle's `update()` payload (React: `<Balances>` props). Parent-injected props never appear here.
|
|
881
903
|
* @see https://docs.whop.com/elements/latest/wallet/overview
|
|
882
904
|
*/
|
|
883
|
-
export interface BalancesSubOptions {
|
|
884
|
-
/**
|
|
885
|
-
* Runs when the grouped loading state changes. The value is `true` while any mounted element is still loading.
|
|
886
|
-
*/
|
|
887
|
-
onLoadingChange?: ((loading: boolean) => void);
|
|
888
|
-
}
|
|
905
|
+
export interface BalancesSubOptions {}
|
|
889
906
|
|
|
890
907
|
/**
|
|
891
908
|
* Consumer props for the "balances" sub-controller's "balance" element.
|
|
@@ -1120,9 +1137,9 @@ export interface ListElementCreateOptions {
|
|
|
1120
1137
|
*/
|
|
1121
1138
|
showPersonalAccount?: boolean;
|
|
1122
1139
|
/**
|
|
1123
|
-
* A holding row was clicked, with `includeOwnedAccounts` off. `
|
|
1140
|
+
* A holding row was clicked, with `includeOwnedAccounts` off. `holding` is `usd` for the combined dollar row, otherwise the holding symbol (`cbBTC`, `EUR`), and `kind` tells you which of the three it is so you can route without classifying symbols yourself. The element never navigates.
|
|
1124
1141
|
*/
|
|
1125
|
-
onBalanceSelected?: ((payload: {
|
|
1142
|
+
onBalanceSelected?: ((payload: { holding: string; kind: "usd" | "cash" | "asset"; }) => void);
|
|
1126
1143
|
/**
|
|
1127
1144
|
* An account row was clicked, with `includeOwnedAccounts` on. `accountId` is the personal `user_…` tag or an owned `biz_…` tag, and `kind` lets you route without inspecting it. The element never navigates.
|
|
1128
1145
|
*/
|
|
@@ -1209,6 +1226,10 @@ export interface WalletHandle {
|
|
|
1209
1226
|
* Merges new handle options into every mounted element. In React, change the namespace props instead.
|
|
1210
1227
|
*/
|
|
1211
1228
|
update(options: Partial<WalletOptions>): void;
|
|
1229
|
+
/**
|
|
1230
|
+
* Destroys every element and sub-controller this handle created, removes the controller frame, and releases its subscriptions. You can call it more than once, but a destroyed handle refuses any other call — create a new handle to start over. React removes the group automatically when the provider unmounts.
|
|
1231
|
+
*/
|
|
1232
|
+
destroy(): void;
|
|
1212
1233
|
}
|
|
1213
1234
|
|
|
1214
1235
|
/**
|
package/wallet.d.ts
CHANGED
|
@@ -23,6 +23,10 @@ export interface WalletOptions {
|
|
|
23
23
|
* Runs when the grouped loading state changes. The value is `true` while any mounted element is still loading.
|
|
24
24
|
*/
|
|
25
25
|
onLoadingChange?: ((loading: boolean) => void);
|
|
26
|
+
/**
|
|
27
|
+
* Set `false` to turn off Whop's built-in usage analytics for this handle and its elements. The analytics identity is never threaded to its frames. A reserved option, not element data.
|
|
28
|
+
*/
|
|
29
|
+
analytics?: false;
|
|
26
30
|
/**
|
|
27
31
|
* Visual customization for this group's elements. Overrides the global `WhopElements({ appearance })`. Change it live with `update({ appearance })`.
|
|
28
32
|
*/
|
|
@@ -357,6 +361,11 @@ export interface DepositElementOverlayHandle {
|
|
|
357
361
|
* @see https://docs.whop.com/elements/latest/wallet/withdraw
|
|
358
362
|
*/
|
|
359
363
|
export interface WithdrawElementProps {
|
|
364
|
+
/**
|
|
365
|
+
* Whether the confirmed payout was created successfully.
|
|
366
|
+
* @default false
|
|
367
|
+
*/
|
|
368
|
+
succeeded?: boolean;
|
|
360
369
|
/**
|
|
361
370
|
* Saved payout methods with quotes for the current amount.
|
|
362
371
|
* @default []
|
|
@@ -468,6 +477,11 @@ export interface WithdrawElementHandle {
|
|
|
468
477
|
* @see https://docs.whop.com/elements/latest/wallet/withdraw
|
|
469
478
|
*/
|
|
470
479
|
export interface WithdrawElementCreateOptions {
|
|
480
|
+
/**
|
|
481
|
+
* Whether the confirmed payout was created successfully.
|
|
482
|
+
* @default false
|
|
483
|
+
*/
|
|
484
|
+
succeeded?: boolean;
|
|
471
485
|
/**
|
|
472
486
|
* Saved payout methods with quotes for the current amount.
|
|
473
487
|
* @default []
|
|
@@ -584,6 +598,10 @@ export interface WithdrawElementCreateOptions {
|
|
|
584
598
|
* The payer confirmed the final payout details. Create the payout on receipt.
|
|
585
599
|
*/
|
|
586
600
|
onWithdrawalRequested?: ((payload: WithdrawalRequest) => void);
|
|
601
|
+
/**
|
|
602
|
+
* The payer finished reviewing a successful payout.
|
|
603
|
+
*/
|
|
604
|
+
onDone?: ((payload: Record<string, never>) => void);
|
|
587
605
|
/**
|
|
588
606
|
* Runs after the loading skeleton first paints and before `onReady`.
|
|
589
607
|
*/
|
|
@@ -712,7 +730,7 @@ export interface SendElementCreateOptions {
|
|
|
712
730
|
/**
|
|
713
731
|
* The visible screen changed.
|
|
714
732
|
*/
|
|
715
|
-
onStepChanged?: ((payload: { step: "
|
|
733
|
+
onStepChanged?: ((payload: { step: "success" | "enter_amount" | "select_recipient" | "create_link" | "link_success"; }) => void);
|
|
716
734
|
/**
|
|
717
735
|
* A transfer succeeded. Refresh anything on your side reading the account's balance or activity.
|
|
718
736
|
*/
|
|
@@ -768,7 +786,7 @@ export interface SendElementOverlayHandle {
|
|
|
768
786
|
*/
|
|
769
787
|
export interface CardsElementProps {
|
|
770
788
|
/**
|
|
771
|
-
* A scoped token for the privileged read — needs `payout:account:read`. Mint it on your server with `POST /api/v1/access_tokens`. Omitted, the
|
|
789
|
+
* A scoped token for the privileged read and verification start — needs `payout:account:read` and `identity:write`. Mint it on your server with `POST /api/v1/access_tokens`. Omitted, the calls carry the viewer's own session, which only answers same-origin.
|
|
772
790
|
*/
|
|
773
791
|
accessToken?: string;
|
|
774
792
|
/**
|
|
@@ -827,7 +845,7 @@ export interface CardsElementHandle {
|
|
|
827
845
|
*/
|
|
828
846
|
export interface CardsElementCreateOptions {
|
|
829
847
|
/**
|
|
830
|
-
* A scoped token for the privileged read — needs `payout:account:read`. Mint it on your server with `POST /api/v1/access_tokens`. Omitted, the
|
|
848
|
+
* A scoped token for the privileged read and verification start — needs `payout:account:read` and `identity:write`. Mint it on your server with `POST /api/v1/access_tokens`. Omitted, the calls carry the viewer's own session, which only answers same-origin.
|
|
831
849
|
*/
|
|
832
850
|
accessToken?: string;
|
|
833
851
|
/**
|
|
@@ -862,6 +880,10 @@ export interface CardsElementCreateOptions {
|
|
|
862
880
|
* The "+" button was clicked. Only fires when `hideAddButton` is false.
|
|
863
881
|
*/
|
|
864
882
|
onAddCardRequested?: ((payload: Record<string, never>) => void);
|
|
883
|
+
/**
|
|
884
|
+
* The viewer pressed the verify button on an account with no card program. The element starts the hosted session and leaves for it itself — this fires alongside, so a host can record the trip or show its own state.
|
|
885
|
+
*/
|
|
886
|
+
onVerificationRequested?: ((payload: { accountId: string; }) => void);
|
|
865
887
|
/**
|
|
866
888
|
* Runs after the loading skeleton first paints and before `onReady`.
|
|
867
889
|
*/
|
|
@@ -880,12 +902,7 @@ export interface CardsElementCreateOptions {
|
|
|
880
902
|
* Consumer props for the "balances" sub-controller: the `create("balances")` options and the minted sub handle's `update()` payload (React: `<Balances>` props). Parent-injected props never appear here.
|
|
881
903
|
* @see https://docs.whop.com/elements/latest/wallet/overview
|
|
882
904
|
*/
|
|
883
|
-
export interface BalancesSubOptions {
|
|
884
|
-
/**
|
|
885
|
-
* Runs when the grouped loading state changes. The value is `true` while any mounted element is still loading.
|
|
886
|
-
*/
|
|
887
|
-
onLoadingChange?: ((loading: boolean) => void);
|
|
888
|
-
}
|
|
905
|
+
export interface BalancesSubOptions {}
|
|
889
906
|
|
|
890
907
|
/**
|
|
891
908
|
* Consumer props for the "balances" sub-controller's "balance" element.
|
|
@@ -1120,9 +1137,9 @@ export interface ListElementCreateOptions {
|
|
|
1120
1137
|
*/
|
|
1121
1138
|
showPersonalAccount?: boolean;
|
|
1122
1139
|
/**
|
|
1123
|
-
* A holding row was clicked, with `includeOwnedAccounts` off. `
|
|
1140
|
+
* A holding row was clicked, with `includeOwnedAccounts` off. `holding` is `usd` for the combined dollar row, otherwise the holding symbol (`cbBTC`, `EUR`), and `kind` tells you which of the three it is so you can route without classifying symbols yourself. The element never navigates.
|
|
1124
1141
|
*/
|
|
1125
|
-
onBalanceSelected?: ((payload: {
|
|
1142
|
+
onBalanceSelected?: ((payload: { holding: string; kind: "usd" | "cash" | "asset"; }) => void);
|
|
1126
1143
|
/**
|
|
1127
1144
|
* An account row was clicked, with `includeOwnedAccounts` on. `accountId` is the personal `user_…` tag or an owned `biz_…` tag, and `kind` lets you route without inspecting it. The element never navigates.
|
|
1128
1145
|
*/
|
|
@@ -1209,6 +1226,10 @@ export interface WalletHandle {
|
|
|
1209
1226
|
* Merges new handle options into every mounted element. In React, change the namespace props instead.
|
|
1210
1227
|
*/
|
|
1211
1228
|
update(options: Partial<WalletOptions>): void;
|
|
1229
|
+
/**
|
|
1230
|
+
* Destroys every element and sub-controller this handle created, removes the controller frame, and releases its subscriptions. You can call it more than once, but a destroyed handle refuses any other call — create a new handle to start over. React removes the group automatically when the provider unmounts.
|
|
1231
|
+
*/
|
|
1232
|
+
destroy(): void;
|
|
1212
1233
|
}
|
|
1213
1234
|
|
|
1214
1235
|
/**
|
package/websites.d.cts
CHANGED
|
@@ -62,6 +62,10 @@ export interface WebsitesOptions {
|
|
|
62
62
|
* Runs when the grouped loading state changes. The value is `true` while any mounted element is still loading.
|
|
63
63
|
*/
|
|
64
64
|
onLoadingChange?: ((loading: boolean) => void);
|
|
65
|
+
/**
|
|
66
|
+
* Set `false` to turn off Whop's built-in usage analytics for this handle and its elements. The analytics identity is never threaded to its frames. A reserved option, not element data.
|
|
67
|
+
*/
|
|
68
|
+
analytics?: false;
|
|
65
69
|
/**
|
|
66
70
|
* Visual customization for this group's elements. Overrides the global `WhopElements({ appearance })`. Change it live with `update({ appearance })`.
|
|
67
71
|
*/
|
|
@@ -339,6 +343,10 @@ export interface WebsitesHandle {
|
|
|
339
343
|
* Merges new handle options into every mounted element. In React, change the namespace props instead.
|
|
340
344
|
*/
|
|
341
345
|
update(options: Partial<WebsitesOptions>): void;
|
|
346
|
+
/**
|
|
347
|
+
* Destroys every element and sub-controller this handle created, removes the controller frame, and releases its subscriptions. You can call it more than once, but a destroyed handle refuses any other call — create a new handle to start over. React removes the group automatically when the provider unmounts.
|
|
348
|
+
*/
|
|
349
|
+
destroy(): void;
|
|
342
350
|
}
|
|
343
351
|
|
|
344
352
|
/**
|
package/websites.d.ts
CHANGED
|
@@ -62,6 +62,10 @@ export interface WebsitesOptions {
|
|
|
62
62
|
* Runs when the grouped loading state changes. The value is `true` while any mounted element is still loading.
|
|
63
63
|
*/
|
|
64
64
|
onLoadingChange?: ((loading: boolean) => void);
|
|
65
|
+
/**
|
|
66
|
+
* Set `false` to turn off Whop's built-in usage analytics for this handle and its elements. The analytics identity is never threaded to its frames. A reserved option, not element data.
|
|
67
|
+
*/
|
|
68
|
+
analytics?: false;
|
|
65
69
|
/**
|
|
66
70
|
* Visual customization for this group's elements. Overrides the global `WhopElements({ appearance })`. Change it live with `update({ appearance })`.
|
|
67
71
|
*/
|
|
@@ -339,6 +343,10 @@ export interface WebsitesHandle {
|
|
|
339
343
|
* Merges new handle options into every mounted element. In React, change the namespace props instead.
|
|
340
344
|
*/
|
|
341
345
|
update(options: Partial<WebsitesOptions>): void;
|
|
346
|
+
/**
|
|
347
|
+
* Destroys every element and sub-controller this handle created, removes the controller frame, and releases its subscriptions. You can call it more than once, but a destroyed handle refuses any other call — create a new handle to start over. React removes the group automatically when the provider unmounts.
|
|
348
|
+
*/
|
|
349
|
+
destroy(): void;
|
|
342
350
|
}
|
|
343
351
|
|
|
344
352
|
/**
|