@whop/elements 1.6.0 → 1.8.0
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/checkout.d.cts +10 -6
- package/checkout.d.ts +10 -6
- package/package.json +2 -2
- package/payments.d.cts +40 -22
- package/payments.d.ts +40 -22
package/checkout.d.cts
CHANGED
|
@@ -152,10 +152,12 @@ export interface CheckoutElementCreateOptions {
|
|
|
152
152
|
*/
|
|
153
153
|
export interface ExpressCheckoutElementProps {
|
|
154
154
|
/**
|
|
155
|
-
* Which wallets may render
|
|
156
|
-
*
|
|
155
|
+
* Which wallets may render. Set `applePay`, `googlePay`, or `payPal` to `'never'` to leave that button out; each key defaults to `'auto'`, a filter over what the buyer’s device and the seller actually offer. The element never shows a wallet the device, the served matrix, or the checkout’s payment method configuration cannot back, and the render order stays best-native-first, with PayPal last. A list of wallet types (`['apple_pay', 'google_pay']`) is still accepted as an allowlist but is deprecated and will be removed in the next major version; an empty list renders nothing (warned in dev builds). Every wallet needs the page’s domain verified as a [payment method domain](/api-reference/beta/payment-method-domains/payment-method-domain) — first-party whop.com pages are pre-approved; on any other site, register and verify the domain or the buttons stay hidden. Offering Google Pay on your own site is subject to the [Google Pay API Terms of Service](https://payments.developers.google.com/terms/sellertos).
|
|
156
|
+
*
|
|
157
|
+
* `wallets` as an array is deprecated and will be removed in the next major version. Pass `{ applePay, googlePay, payPal }` with `"auto"` or `"never"` instead.
|
|
158
|
+
* @default {}
|
|
157
159
|
*/
|
|
158
|
-
wallets?: ("apple_pay" | "google_pay" | "paypal_express")[];
|
|
160
|
+
wallets?: { applePay?: "auto" | "never" | undefined; googlePay?: "auto" | "never" | undefined; payPal?: "auto" | "never" | undefined; } | ("apple_pay" | "google_pay" | "paypal_express")[];
|
|
159
161
|
/**
|
|
160
162
|
* 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.
|
|
161
163
|
* @default "auto"
|
|
@@ -193,10 +195,12 @@ export interface ExpressCheckoutElementHandle {
|
|
|
193
195
|
*/
|
|
194
196
|
export interface ExpressCheckoutElementCreateOptions {
|
|
195
197
|
/**
|
|
196
|
-
* Which wallets may render
|
|
197
|
-
*
|
|
198
|
+
* Which wallets may render. Set `applePay`, `googlePay`, or `payPal` to `'never'` to leave that button out; each key defaults to `'auto'`, a filter over what the buyer’s device and the seller actually offer. The element never shows a wallet the device, the served matrix, or the checkout’s payment method configuration cannot back, and the render order stays best-native-first, with PayPal last. A list of wallet types (`['apple_pay', 'google_pay']`) is still accepted as an allowlist but is deprecated and will be removed in the next major version; an empty list renders nothing (warned in dev builds). Every wallet needs the page’s domain verified as a [payment method domain](/api-reference/beta/payment-method-domains/payment-method-domain) — first-party whop.com pages are pre-approved; on any other site, register and verify the domain or the buttons stay hidden. Offering Google Pay on your own site is subject to the [Google Pay API Terms of Service](https://payments.developers.google.com/terms/sellertos).
|
|
199
|
+
*
|
|
200
|
+
* `wallets` as an array is deprecated and will be removed in the next major version. Pass `{ applePay, googlePay, payPal }` with `"auto"` or `"never"` instead.
|
|
201
|
+
* @default {}
|
|
198
202
|
*/
|
|
199
|
-
wallets?: ("apple_pay" | "google_pay" | "paypal_express")[];
|
|
203
|
+
wallets?: { applePay?: "auto" | "never" | undefined; googlePay?: "auto" | "never" | undefined; payPal?: "auto" | "never" | undefined; } | ("apple_pay" | "google_pay" | "paypal_express")[];
|
|
200
204
|
/**
|
|
201
205
|
* 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.
|
|
202
206
|
* @default "auto"
|
package/checkout.d.ts
CHANGED
|
@@ -152,10 +152,12 @@ export interface CheckoutElementCreateOptions {
|
|
|
152
152
|
*/
|
|
153
153
|
export interface ExpressCheckoutElementProps {
|
|
154
154
|
/**
|
|
155
|
-
* Which wallets may render
|
|
156
|
-
*
|
|
155
|
+
* Which wallets may render. Set `applePay`, `googlePay`, or `payPal` to `'never'` to leave that button out; each key defaults to `'auto'`, a filter over what the buyer’s device and the seller actually offer. The element never shows a wallet the device, the served matrix, or the checkout’s payment method configuration cannot back, and the render order stays best-native-first, with PayPal last. A list of wallet types (`['apple_pay', 'google_pay']`) is still accepted as an allowlist but is deprecated and will be removed in the next major version; an empty list renders nothing (warned in dev builds). Every wallet needs the page’s domain verified as a [payment method domain](/api-reference/beta/payment-method-domains/payment-method-domain) — first-party whop.com pages are pre-approved; on any other site, register and verify the domain or the buttons stay hidden. Offering Google Pay on your own site is subject to the [Google Pay API Terms of Service](https://payments.developers.google.com/terms/sellertos).
|
|
156
|
+
*
|
|
157
|
+
* `wallets` as an array is deprecated and will be removed in the next major version. Pass `{ applePay, googlePay, payPal }` with `"auto"` or `"never"` instead.
|
|
158
|
+
* @default {}
|
|
157
159
|
*/
|
|
158
|
-
wallets?: ("apple_pay" | "google_pay" | "paypal_express")[];
|
|
160
|
+
wallets?: { applePay?: "auto" | "never" | undefined; googlePay?: "auto" | "never" | undefined; payPal?: "auto" | "never" | undefined; } | ("apple_pay" | "google_pay" | "paypal_express")[];
|
|
159
161
|
/**
|
|
160
162
|
* 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.
|
|
161
163
|
* @default "auto"
|
|
@@ -193,10 +195,12 @@ export interface ExpressCheckoutElementHandle {
|
|
|
193
195
|
*/
|
|
194
196
|
export interface ExpressCheckoutElementCreateOptions {
|
|
195
197
|
/**
|
|
196
|
-
* Which wallets may render
|
|
197
|
-
*
|
|
198
|
+
* Which wallets may render. Set `applePay`, `googlePay`, or `payPal` to `'never'` to leave that button out; each key defaults to `'auto'`, a filter over what the buyer’s device and the seller actually offer. The element never shows a wallet the device, the served matrix, or the checkout’s payment method configuration cannot back, and the render order stays best-native-first, with PayPal last. A list of wallet types (`['apple_pay', 'google_pay']`) is still accepted as an allowlist but is deprecated and will be removed in the next major version; an empty list renders nothing (warned in dev builds). Every wallet needs the page’s domain verified as a [payment method domain](/api-reference/beta/payment-method-domains/payment-method-domain) — first-party whop.com pages are pre-approved; on any other site, register and verify the domain or the buttons stay hidden. Offering Google Pay on your own site is subject to the [Google Pay API Terms of Service](https://payments.developers.google.com/terms/sellertos).
|
|
199
|
+
*
|
|
200
|
+
* `wallets` as an array is deprecated and will be removed in the next major version. Pass `{ applePay, googlePay, payPal }` with `"auto"` or `"never"` instead.
|
|
201
|
+
* @default {}
|
|
198
202
|
*/
|
|
199
|
-
wallets?: ("apple_pay" | "google_pay" | "paypal_express")[];
|
|
203
|
+
wallets?: { applePay?: "auto" | "never" | undefined; googlePay?: "auto" | "never" | undefined; payPal?: "auto" | "never" | undefined; } | ("apple_pay" | "google_pay" | "paypal_express")[];
|
|
200
204
|
/**
|
|
201
205
|
* 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.
|
|
202
206
|
* @default "auto"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@whop/elements",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.8.0",
|
|
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",
|
|
@@ -97,5 +97,5 @@
|
|
|
97
97
|
}
|
|
98
98
|
}
|
|
99
99
|
},
|
|
100
|
-
"whopElementsApiHash": "
|
|
100
|
+
"whopElementsApiHash": "48049f21f5565b8cedeaa5c1cd09feb3a52012767b9b7dfbf0a5378257fe7f67"
|
|
101
101
|
}
|
package/payments.d.cts
CHANGED
|
@@ -215,6 +215,11 @@ export interface PaymentElementProps {
|
|
|
215
215
|
* @default []
|
|
216
216
|
*/
|
|
217
217
|
order?: string[];
|
|
218
|
+
/**
|
|
219
|
+
* Controls which wallets the element offers. Each key defaults to `'auto'`, which offers the wallet wherever the account, the buyer's device, and the charge support it. `'never'` removes that wallet from the method list. Use it when your page draws its own Apple Pay, Google Pay, or PayPal buttons with `paymentRequest`, so buyers see each wallet once. `payPal: 'never'` removes the PayPal method. Saved payment methods are unaffected.
|
|
220
|
+
* @default {}
|
|
221
|
+
*/
|
|
222
|
+
wallets?: { applePay?: "never" | "auto" | undefined; googlePay?: "never" | "auto" | undefined; payPal?: "never" | "auto" | undefined; };
|
|
218
223
|
/**
|
|
219
224
|
* 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. `phone: 'never'` hides only the billing phone input when your form already collects it; pass `billingDetails.phone` to `createConfirmationToken` for methods that require it. Pass the address to `createConfirmationToken` instead. The country selector includes only countries supported by the method and payment currency. With an installment plan selected, it narrows to the countries the plan serves — the billing country is the transaction country the charge processes under. It locks when only one is available.
|
|
220
225
|
* @default {"billingDetails":"minimal"}
|
|
@@ -279,6 +284,11 @@ export interface PaymentElementCreateOptions {
|
|
|
279
284
|
* @default []
|
|
280
285
|
*/
|
|
281
286
|
order?: string[];
|
|
287
|
+
/**
|
|
288
|
+
* Controls which wallets the element offers. Each key defaults to `'auto'`, which offers the wallet wherever the account, the buyer's device, and the charge support it. `'never'` removes that wallet from the method list. Use it when your page draws its own Apple Pay, Google Pay, or PayPal buttons with `paymentRequest`, so buyers see each wallet once. `payPal: 'never'` removes the PayPal method. Saved payment methods are unaffected.
|
|
289
|
+
* @default {}
|
|
290
|
+
*/
|
|
291
|
+
wallets?: { applePay?: "never" | "auto" | undefined; googlePay?: "never" | "auto" | undefined; payPal?: "never" | "auto" | undefined; };
|
|
282
292
|
/**
|
|
283
293
|
* 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. `phone: 'never'` hides only the billing phone input when your form already collects it; pass `billingDetails.phone` to `createConfirmationToken` for methods that require it. Pass the address to `createConfirmationToken` instead. The country selector includes only countries supported by the method and payment currency. With an installment plan selected, it narrows to the countries the plan serves — the billing country is the transaction country the charge processes under. It locks when only one is available.
|
|
284
294
|
* @default {"billingDetails":"minimal"}
|
|
@@ -339,7 +349,7 @@ export interface AddressElementProps {
|
|
|
339
349
|
* The name row: one full-name field (default), split first/last fields, or none.
|
|
340
350
|
* @default "combined"
|
|
341
351
|
*/
|
|
342
|
-
name?: "split" | "
|
|
352
|
+
name?: "split" | "none" | "combined";
|
|
343
353
|
/**
|
|
344
354
|
* Address line 2: always visible (default), revealed by a text button (`toggle`), or never collected.
|
|
345
355
|
* @default "always"
|
|
@@ -368,7 +378,7 @@ export interface AddressElementProps {
|
|
|
368
378
|
* Organization fields: none (default), name only, or name with a business/individual selector.
|
|
369
379
|
* @default "none"
|
|
370
380
|
*/
|
|
371
|
-
organization?: "
|
|
381
|
+
organization?: "none" | "name" | "name_with_type";
|
|
372
382
|
/**
|
|
373
383
|
* Default the country from the buyer's IP (resolved before first paint). Falls back to the controller's `countryHint`, then US.
|
|
374
384
|
* @default true
|
|
@@ -445,7 +455,7 @@ export interface AddressElementCreateOptions {
|
|
|
445
455
|
* The name row: one full-name field (default), split first/last fields, or none.
|
|
446
456
|
* @default "combined"
|
|
447
457
|
*/
|
|
448
|
-
name?: "split" | "
|
|
458
|
+
name?: "split" | "none" | "combined";
|
|
449
459
|
/**
|
|
450
460
|
* Address line 2: always visible (default), revealed by a text button (`toggle`), or never collected.
|
|
451
461
|
* @default "always"
|
|
@@ -474,7 +484,7 @@ export interface AddressElementCreateOptions {
|
|
|
474
484
|
* Organization fields: none (default), name only, or name with a business/individual selector.
|
|
475
485
|
* @default "none"
|
|
476
486
|
*/
|
|
477
|
-
organization?: "
|
|
487
|
+
organization?: "none" | "name" | "name_with_type";
|
|
478
488
|
/**
|
|
479
489
|
* Default the country from the buyer's IP (resolved before first paint). Falls back to the controller's `countryHint`, then US.
|
|
480
490
|
* @default true
|
|
@@ -595,6 +605,11 @@ export interface EmailElementProps {
|
|
|
595
605
|
* @default true
|
|
596
606
|
*/
|
|
597
607
|
label?: boolean;
|
|
608
|
+
/**
|
|
609
|
+
* Placeholder text for the email input. Empty (default) renders `you@example.com`. With floating labels the label text is the placeholder instead.
|
|
610
|
+
* @default ""
|
|
611
|
+
*/
|
|
612
|
+
placeholder?: string;
|
|
598
613
|
/**
|
|
599
614
|
* `above` (default) shows the label above the input. `floating` uses the label text as the placeholder, then shows a small label above the typed text once the input has a value. Ignored when `label` is `false`.
|
|
600
615
|
* @default "above"
|
|
@@ -605,11 +620,6 @@ export interface EmailElementProps {
|
|
|
605
620
|
* @default ""
|
|
606
621
|
*/
|
|
607
622
|
defaultValue?: string;
|
|
608
|
-
/**
|
|
609
|
-
* Placeholder text for the email input. Empty (default) renders `you@example.com`. With floating labels the label text is the placeholder instead.
|
|
610
|
-
* @default ""
|
|
611
|
-
*/
|
|
612
|
-
placeholder?: string;
|
|
613
623
|
}
|
|
614
624
|
|
|
615
625
|
/**
|
|
@@ -646,6 +656,11 @@ export interface EmailElementCreateOptions {
|
|
|
646
656
|
* @default true
|
|
647
657
|
*/
|
|
648
658
|
label?: boolean;
|
|
659
|
+
/**
|
|
660
|
+
* Placeholder text for the email input. Empty (default) renders `you@example.com`. With floating labels the label text is the placeholder instead.
|
|
661
|
+
* @default ""
|
|
662
|
+
*/
|
|
663
|
+
placeholder?: string;
|
|
649
664
|
/**
|
|
650
665
|
* `above` (default) shows the label above the input. `floating` uses the label text as the placeholder, then shows a small label above the typed text once the input has a value. Ignored when `label` is `false`.
|
|
651
666
|
* @default "above"
|
|
@@ -656,11 +671,6 @@ export interface EmailElementCreateOptions {
|
|
|
656
671
|
* @default ""
|
|
657
672
|
*/
|
|
658
673
|
defaultValue?: string;
|
|
659
|
-
/**
|
|
660
|
-
* Placeholder text for the email input. Empty (default) renders `you@example.com`. With floating labels the label text is the placeholder instead.
|
|
661
|
-
* @default ""
|
|
662
|
-
*/
|
|
663
|
-
placeholder?: string;
|
|
664
674
|
/**
|
|
665
675
|
* Fires when the email changes. `complete` is true when plausible. Sign-in fires it with the signed-in email, which also feeds `createConfirmationToken()`.
|
|
666
676
|
*/
|
|
@@ -825,6 +835,10 @@ export interface BrandingElementCreateOptions {
|
|
|
825
835
|
* @see https://docs.whop.com/elements/latest/payments/overview
|
|
826
836
|
*/
|
|
827
837
|
export interface CardFieldsSubOptions {
|
|
838
|
+
/**
|
|
839
|
+
* The seller's accepted card networks in display order — the matrix card entry's `networks` objects, whose API-served icons drive the number field's brand art. Omit it to fetch alongside the key.
|
|
840
|
+
*/
|
|
841
|
+
networks?: CardNetworkArt[];
|
|
828
842
|
/**
|
|
829
843
|
* `stacked` (default) shapes composed fields as a number row above expiration and security code. `compact` shapes one row. Separately mounted fields ignore this layout and render with full borders and rounded corners.
|
|
830
844
|
* @default "stacked"
|
|
@@ -834,10 +848,6 @@ export interface CardFieldsSubOptions {
|
|
|
834
848
|
* Advanced Basis Theory publishable key. Omit it to fetch the key automatically.
|
|
835
849
|
*/
|
|
836
850
|
publicKey?: string;
|
|
837
|
-
/**
|
|
838
|
-
* The seller's accepted card networks in display order — the matrix card entry's `networks` objects, whose API-served icons drive the number field's brand art. Omit it to fetch alongside the key.
|
|
839
|
-
*/
|
|
840
|
-
networks?: CardNetworkArt[];
|
|
841
851
|
/**
|
|
842
852
|
* 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. `funding` is the detected funding type (`credit`, `debit`, or `prepaid`), `null` until the number identifies one. `issuingCountry` is the lowercase two-letter code of the country the card was issued in, `null` until the number identifies one.
|
|
843
853
|
*/
|
|
@@ -1161,7 +1171,7 @@ export interface PaymentsHandle {
|
|
|
1161
1171
|
*/
|
|
1162
1172
|
create(name: "taxId", options?: TaxIdElementCreateOptions): TaxIdElementHandle;
|
|
1163
1173
|
/**
|
|
1164
|
-
* Whop's merchant-of-record notice: the Whop wordmark with links to the buyer terms and privacy policy.
|
|
1174
|
+
* Whop's merchant-of-record notice: the Whop wordmark with links to the buyer terms and privacy policy. Required — the payment, card and card fields elements stay in their loading state until it is mounted, and payments cannot be confirmed without it.
|
|
1165
1175
|
*/
|
|
1166
1176
|
create(name: "branding", options?: BrandingElementCreateOptions): BrandingElementHandle;
|
|
1167
1177
|
/**
|
|
@@ -1306,12 +1316,12 @@ export interface PaymentRequestResult {
|
|
|
1306
1316
|
* Declared from the app's `PaymentRequestError`, referenced by a host-capability surface.
|
|
1307
1317
|
*/
|
|
1308
1318
|
export interface PaymentRequestError {
|
|
1309
|
-
code?: "
|
|
1319
|
+
code?: "other" | "shipping_address_invalid" | "shipping_address_unserviceable" | "shipping_option_invalid" | undefined;
|
|
1310
1320
|
message: string;
|
|
1311
1321
|
/**
|
|
1312
1322
|
* The address field the error is about: one of the fields the redacted address carries. Apple Pay marks that field with the message, whatever the `code`; Google Pay shows the message alone. Omit it for an error about the whole address.
|
|
1313
1323
|
*/
|
|
1314
|
-
field?: "state" | "
|
|
1324
|
+
field?: "state" | "country" | "city" | "postal_code" | undefined;
|
|
1315
1325
|
}
|
|
1316
1326
|
|
|
1317
1327
|
/**
|
|
@@ -1371,6 +1381,14 @@ export interface PromoCodeUpdate {
|
|
|
1371
1381
|
* The total under the code, in minor units.
|
|
1372
1382
|
*/
|
|
1373
1383
|
amount?: number | undefined;
|
|
1384
|
+
/**
|
|
1385
|
+
* The sheet's line items under the code, such as the discount and the tax it changes.
|
|
1386
|
+
*/
|
|
1387
|
+
lineItems?: PaymentRequestLineItem[] | undefined;
|
|
1388
|
+
/**
|
|
1389
|
+
* Replaces the sheet's shipping options under the code, such as a free-shipping code that drops a rate to zero. An option stays selected while its `id` is still in the list. Send `amount` as well when the selected option's price changes, since the total doesn't follow on its own.
|
|
1390
|
+
*/
|
|
1391
|
+
shippingOptions?: PaymentRequestShippingOption[] | undefined;
|
|
1374
1392
|
/**
|
|
1375
1393
|
* A caption for the applied code, where the sheet captions codes (Google Pay).
|
|
1376
1394
|
*/
|
|
@@ -1390,7 +1408,7 @@ export interface PromoCodeChangeEvent {
|
|
|
1390
1408
|
*/
|
|
1391
1409
|
code: string | null;
|
|
1392
1410
|
/**
|
|
1393
|
-
* Answer exactly once: `error` refuses the code and keeps the totals, and any other answer applies it. `amount`
|
|
1411
|
+
* Answer exactly once: `error` refuses the code and keeps the totals, and any other answer applies it. `amount` and `lineItems` reprice the sheet under the code, `shippingOptions` replaces its shipping options (a free-shipping code), and `appliedDescription` captions the applied code where the sheet shows one (Google Pay). `updateWith({})` applies the code at the current total.
|
|
1394
1412
|
*/
|
|
1395
1413
|
updateWith: (update: PromoCodeUpdate) => void;
|
|
1396
1414
|
}
|
package/payments.d.ts
CHANGED
|
@@ -215,6 +215,11 @@ export interface PaymentElementProps {
|
|
|
215
215
|
* @default []
|
|
216
216
|
*/
|
|
217
217
|
order?: string[];
|
|
218
|
+
/**
|
|
219
|
+
* Controls which wallets the element offers. Each key defaults to `'auto'`, which offers the wallet wherever the account, the buyer's device, and the charge support it. `'never'` removes that wallet from the method list. Use it when your page draws its own Apple Pay, Google Pay, or PayPal buttons with `paymentRequest`, so buyers see each wallet once. `payPal: 'never'` removes the PayPal method. Saved payment methods are unaffected.
|
|
220
|
+
* @default {}
|
|
221
|
+
*/
|
|
222
|
+
wallets?: { applePay?: "never" | "auto" | undefined; googlePay?: "never" | "auto" | undefined; payPal?: "never" | "auto" | undefined; };
|
|
218
223
|
/**
|
|
219
224
|
* 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. `phone: 'never'` hides only the billing phone input when your form already collects it; pass `billingDetails.phone` to `createConfirmationToken` for methods that require it. Pass the address to `createConfirmationToken` instead. The country selector includes only countries supported by the method and payment currency. With an installment plan selected, it narrows to the countries the plan serves — the billing country is the transaction country the charge processes under. It locks when only one is available.
|
|
220
225
|
* @default {"billingDetails":"minimal"}
|
|
@@ -279,6 +284,11 @@ export interface PaymentElementCreateOptions {
|
|
|
279
284
|
* @default []
|
|
280
285
|
*/
|
|
281
286
|
order?: string[];
|
|
287
|
+
/**
|
|
288
|
+
* Controls which wallets the element offers. Each key defaults to `'auto'`, which offers the wallet wherever the account, the buyer's device, and the charge support it. `'never'` removes that wallet from the method list. Use it when your page draws its own Apple Pay, Google Pay, or PayPal buttons with `paymentRequest`, so buyers see each wallet once. `payPal: 'never'` removes the PayPal method. Saved payment methods are unaffected.
|
|
289
|
+
* @default {}
|
|
290
|
+
*/
|
|
291
|
+
wallets?: { applePay?: "never" | "auto" | undefined; googlePay?: "never" | "auto" | undefined; payPal?: "never" | "auto" | undefined; };
|
|
282
292
|
/**
|
|
283
293
|
* 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. `phone: 'never'` hides only the billing phone input when your form already collects it; pass `billingDetails.phone` to `createConfirmationToken` for methods that require it. Pass the address to `createConfirmationToken` instead. The country selector includes only countries supported by the method and payment currency. With an installment plan selected, it narrows to the countries the plan serves — the billing country is the transaction country the charge processes under. It locks when only one is available.
|
|
284
294
|
* @default {"billingDetails":"minimal"}
|
|
@@ -339,7 +349,7 @@ export interface AddressElementProps {
|
|
|
339
349
|
* The name row: one full-name field (default), split first/last fields, or none.
|
|
340
350
|
* @default "combined"
|
|
341
351
|
*/
|
|
342
|
-
name?: "split" | "
|
|
352
|
+
name?: "split" | "none" | "combined";
|
|
343
353
|
/**
|
|
344
354
|
* Address line 2: always visible (default), revealed by a text button (`toggle`), or never collected.
|
|
345
355
|
* @default "always"
|
|
@@ -368,7 +378,7 @@ export interface AddressElementProps {
|
|
|
368
378
|
* Organization fields: none (default), name only, or name with a business/individual selector.
|
|
369
379
|
* @default "none"
|
|
370
380
|
*/
|
|
371
|
-
organization?: "
|
|
381
|
+
organization?: "none" | "name" | "name_with_type";
|
|
372
382
|
/**
|
|
373
383
|
* Default the country from the buyer's IP (resolved before first paint). Falls back to the controller's `countryHint`, then US.
|
|
374
384
|
* @default true
|
|
@@ -445,7 +455,7 @@ export interface AddressElementCreateOptions {
|
|
|
445
455
|
* The name row: one full-name field (default), split first/last fields, or none.
|
|
446
456
|
* @default "combined"
|
|
447
457
|
*/
|
|
448
|
-
name?: "split" | "
|
|
458
|
+
name?: "split" | "none" | "combined";
|
|
449
459
|
/**
|
|
450
460
|
* Address line 2: always visible (default), revealed by a text button (`toggle`), or never collected.
|
|
451
461
|
* @default "always"
|
|
@@ -474,7 +484,7 @@ export interface AddressElementCreateOptions {
|
|
|
474
484
|
* Organization fields: none (default), name only, or name with a business/individual selector.
|
|
475
485
|
* @default "none"
|
|
476
486
|
*/
|
|
477
|
-
organization?: "
|
|
487
|
+
organization?: "none" | "name" | "name_with_type";
|
|
478
488
|
/**
|
|
479
489
|
* Default the country from the buyer's IP (resolved before first paint). Falls back to the controller's `countryHint`, then US.
|
|
480
490
|
* @default true
|
|
@@ -595,6 +605,11 @@ export interface EmailElementProps {
|
|
|
595
605
|
* @default true
|
|
596
606
|
*/
|
|
597
607
|
label?: boolean;
|
|
608
|
+
/**
|
|
609
|
+
* Placeholder text for the email input. Empty (default) renders `you@example.com`. With floating labels the label text is the placeholder instead.
|
|
610
|
+
* @default ""
|
|
611
|
+
*/
|
|
612
|
+
placeholder?: string;
|
|
598
613
|
/**
|
|
599
614
|
* `above` (default) shows the label above the input. `floating` uses the label text as the placeholder, then shows a small label above the typed text once the input has a value. Ignored when `label` is `false`.
|
|
600
615
|
* @default "above"
|
|
@@ -605,11 +620,6 @@ export interface EmailElementProps {
|
|
|
605
620
|
* @default ""
|
|
606
621
|
*/
|
|
607
622
|
defaultValue?: string;
|
|
608
|
-
/**
|
|
609
|
-
* Placeholder text for the email input. Empty (default) renders `you@example.com`. With floating labels the label text is the placeholder instead.
|
|
610
|
-
* @default ""
|
|
611
|
-
*/
|
|
612
|
-
placeholder?: string;
|
|
613
623
|
}
|
|
614
624
|
|
|
615
625
|
/**
|
|
@@ -646,6 +656,11 @@ export interface EmailElementCreateOptions {
|
|
|
646
656
|
* @default true
|
|
647
657
|
*/
|
|
648
658
|
label?: boolean;
|
|
659
|
+
/**
|
|
660
|
+
* Placeholder text for the email input. Empty (default) renders `you@example.com`. With floating labels the label text is the placeholder instead.
|
|
661
|
+
* @default ""
|
|
662
|
+
*/
|
|
663
|
+
placeholder?: string;
|
|
649
664
|
/**
|
|
650
665
|
* `above` (default) shows the label above the input. `floating` uses the label text as the placeholder, then shows a small label above the typed text once the input has a value. Ignored when `label` is `false`.
|
|
651
666
|
* @default "above"
|
|
@@ -656,11 +671,6 @@ export interface EmailElementCreateOptions {
|
|
|
656
671
|
* @default ""
|
|
657
672
|
*/
|
|
658
673
|
defaultValue?: string;
|
|
659
|
-
/**
|
|
660
|
-
* Placeholder text for the email input. Empty (default) renders `you@example.com`. With floating labels the label text is the placeholder instead.
|
|
661
|
-
* @default ""
|
|
662
|
-
*/
|
|
663
|
-
placeholder?: string;
|
|
664
674
|
/**
|
|
665
675
|
* Fires when the email changes. `complete` is true when plausible. Sign-in fires it with the signed-in email, which also feeds `createConfirmationToken()`.
|
|
666
676
|
*/
|
|
@@ -825,6 +835,10 @@ export interface BrandingElementCreateOptions {
|
|
|
825
835
|
* @see https://docs.whop.com/elements/latest/payments/overview
|
|
826
836
|
*/
|
|
827
837
|
export interface CardFieldsSubOptions {
|
|
838
|
+
/**
|
|
839
|
+
* The seller's accepted card networks in display order — the matrix card entry's `networks` objects, whose API-served icons drive the number field's brand art. Omit it to fetch alongside the key.
|
|
840
|
+
*/
|
|
841
|
+
networks?: CardNetworkArt[];
|
|
828
842
|
/**
|
|
829
843
|
* `stacked` (default) shapes composed fields as a number row above expiration and security code. `compact` shapes one row. Separately mounted fields ignore this layout and render with full borders and rounded corners.
|
|
830
844
|
* @default "stacked"
|
|
@@ -834,10 +848,6 @@ export interface CardFieldsSubOptions {
|
|
|
834
848
|
* Advanced Basis Theory publishable key. Omit it to fetch the key automatically.
|
|
835
849
|
*/
|
|
836
850
|
publicKey?: string;
|
|
837
|
-
/**
|
|
838
|
-
* The seller's accepted card networks in display order — the matrix card entry's `networks` objects, whose API-served icons drive the number field's brand art. Omit it to fetch alongside the key.
|
|
839
|
-
*/
|
|
840
|
-
networks?: CardNetworkArt[];
|
|
841
851
|
/**
|
|
842
852
|
* 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. `funding` is the detected funding type (`credit`, `debit`, or `prepaid`), `null` until the number identifies one. `issuingCountry` is the lowercase two-letter code of the country the card was issued in, `null` until the number identifies one.
|
|
843
853
|
*/
|
|
@@ -1161,7 +1171,7 @@ export interface PaymentsHandle {
|
|
|
1161
1171
|
*/
|
|
1162
1172
|
create(name: "taxId", options?: TaxIdElementCreateOptions): TaxIdElementHandle;
|
|
1163
1173
|
/**
|
|
1164
|
-
* Whop's merchant-of-record notice: the Whop wordmark with links to the buyer terms and privacy policy.
|
|
1174
|
+
* Whop's merchant-of-record notice: the Whop wordmark with links to the buyer terms and privacy policy. Required — the payment, card and card fields elements stay in their loading state until it is mounted, and payments cannot be confirmed without it.
|
|
1165
1175
|
*/
|
|
1166
1176
|
create(name: "branding", options?: BrandingElementCreateOptions): BrandingElementHandle;
|
|
1167
1177
|
/**
|
|
@@ -1306,12 +1316,12 @@ export interface PaymentRequestResult {
|
|
|
1306
1316
|
* Declared from the app's `PaymentRequestError`, referenced by a host-capability surface.
|
|
1307
1317
|
*/
|
|
1308
1318
|
export interface PaymentRequestError {
|
|
1309
|
-
code?: "
|
|
1319
|
+
code?: "other" | "shipping_address_invalid" | "shipping_address_unserviceable" | "shipping_option_invalid" | undefined;
|
|
1310
1320
|
message: string;
|
|
1311
1321
|
/**
|
|
1312
1322
|
* The address field the error is about: one of the fields the redacted address carries. Apple Pay marks that field with the message, whatever the `code`; Google Pay shows the message alone. Omit it for an error about the whole address.
|
|
1313
1323
|
*/
|
|
1314
|
-
field?: "state" | "
|
|
1324
|
+
field?: "state" | "country" | "city" | "postal_code" | undefined;
|
|
1315
1325
|
}
|
|
1316
1326
|
|
|
1317
1327
|
/**
|
|
@@ -1371,6 +1381,14 @@ export interface PromoCodeUpdate {
|
|
|
1371
1381
|
* The total under the code, in minor units.
|
|
1372
1382
|
*/
|
|
1373
1383
|
amount?: number | undefined;
|
|
1384
|
+
/**
|
|
1385
|
+
* The sheet's line items under the code, such as the discount and the tax it changes.
|
|
1386
|
+
*/
|
|
1387
|
+
lineItems?: PaymentRequestLineItem[] | undefined;
|
|
1388
|
+
/**
|
|
1389
|
+
* Replaces the sheet's shipping options under the code, such as a free-shipping code that drops a rate to zero. An option stays selected while its `id` is still in the list. Send `amount` as well when the selected option's price changes, since the total doesn't follow on its own.
|
|
1390
|
+
*/
|
|
1391
|
+
shippingOptions?: PaymentRequestShippingOption[] | undefined;
|
|
1374
1392
|
/**
|
|
1375
1393
|
* A caption for the applied code, where the sheet captions codes (Google Pay).
|
|
1376
1394
|
*/
|
|
@@ -1390,7 +1408,7 @@ export interface PromoCodeChangeEvent {
|
|
|
1390
1408
|
*/
|
|
1391
1409
|
code: string | null;
|
|
1392
1410
|
/**
|
|
1393
|
-
* Answer exactly once: `error` refuses the code and keeps the totals, and any other answer applies it. `amount`
|
|
1411
|
+
* Answer exactly once: `error` refuses the code and keeps the totals, and any other answer applies it. `amount` and `lineItems` reprice the sheet under the code, `shippingOptions` replaces its shipping options (a free-shipping code), and `appliedDescription` captions the applied code where the sheet shows one (Google Pay). `updateWith({})` applies the code at the current total.
|
|
1394
1412
|
*/
|
|
1395
1413
|
updateWith: (update: PromoCodeUpdate) => void;
|
|
1396
1414
|
}
|