@whop/elements 1.4.0 → 1.5.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/package.json +2 -2
- package/payments.d.cts +112 -6
- package/payments.d.ts +112 -6
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@whop/elements",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.5.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": "2d44149b4b1cc46471d6832a16569c9c60c12e412816bac29665345584162ce2"
|
|
101
101
|
}
|
package/payments.d.cts
CHANGED
|
@@ -354,6 +354,11 @@ export interface AddressElementProps {
|
|
|
354
354
|
* @default "full"
|
|
355
355
|
*/
|
|
356
356
|
layout?: "full" | "compact";
|
|
357
|
+
/**
|
|
358
|
+
* `above` (default) keeps each label outside its field: above it in the `full` layout, as its placeholder in `compact`. `floating` uses each label as the placeholder of its field, in either layout, then shows a small label above the typed text once the field has a value.
|
|
359
|
+
* @default "above"
|
|
360
|
+
*/
|
|
361
|
+
labelMode?: "above" | "floating";
|
|
357
362
|
/**
|
|
358
363
|
* `full` (default) follows the selected country's complete address format. `minimal` collects only country and postal code. `name` independently adds required name fields. Set `name` to `none` to omit them. This element does not add fields required by a payment method. Card confirmation requires a name, country, and postal code, so keep `name` enabled or pass `billingDetails.name`.
|
|
359
364
|
* @default "full"
|
|
@@ -450,6 +455,11 @@ export interface AddressElementCreateOptions {
|
|
|
450
455
|
* @default "full"
|
|
451
456
|
*/
|
|
452
457
|
layout?: "full" | "compact";
|
|
458
|
+
/**
|
|
459
|
+
* `above` (default) keeps each label outside its field: above it in the `full` layout, as its placeholder in `compact`. `floating` uses each label as the placeholder of its field, in either layout, then shows a small label above the typed text once the field has a value.
|
|
460
|
+
* @default "above"
|
|
461
|
+
*/
|
|
462
|
+
labelMode?: "above" | "floating";
|
|
453
463
|
/**
|
|
454
464
|
* `full` (default) follows the selected country's complete address format. `minimal` collects only country and postal code. `name` independently adds required name fields. Set `name` to `none` to omit them. This element does not add fields required by a payment method. Card confirmation requires a name, country, and postal code, so keep `name` enabled or pass `billingDetails.name`.
|
|
455
465
|
* @default "full"
|
|
@@ -575,13 +585,18 @@ export interface EmailElementProps {
|
|
|
575
585
|
* @default true
|
|
576
586
|
*/
|
|
577
587
|
label?: boolean;
|
|
588
|
+
/**
|
|
589
|
+
* `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`.
|
|
590
|
+
* @default "above"
|
|
591
|
+
*/
|
|
592
|
+
labelMode?: "above" | "floating";
|
|
578
593
|
/**
|
|
579
594
|
* Seed value applied once at mount.
|
|
580
595
|
* @default ""
|
|
581
596
|
*/
|
|
582
597
|
defaultValue?: string;
|
|
583
598
|
/**
|
|
584
|
-
* Placeholder text for the email input. Empty (default) renders `you@example.com`.
|
|
599
|
+
* Placeholder text for the email input. Empty (default) renders `you@example.com`. With floating labels the label text is the placeholder instead.
|
|
585
600
|
* @default ""
|
|
586
601
|
*/
|
|
587
602
|
placeholder?: string;
|
|
@@ -621,13 +636,18 @@ export interface EmailElementCreateOptions {
|
|
|
621
636
|
* @default true
|
|
622
637
|
*/
|
|
623
638
|
label?: boolean;
|
|
639
|
+
/**
|
|
640
|
+
* `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`.
|
|
641
|
+
* @default "above"
|
|
642
|
+
*/
|
|
643
|
+
labelMode?: "above" | "floating";
|
|
624
644
|
/**
|
|
625
645
|
* Seed value applied once at mount.
|
|
626
646
|
* @default ""
|
|
627
647
|
*/
|
|
628
648
|
defaultValue?: string;
|
|
629
649
|
/**
|
|
630
|
-
* Placeholder text for the email input. Empty (default) renders `you@example.com`.
|
|
650
|
+
* Placeholder text for the email input. Empty (default) renders `you@example.com`. With floating labels the label text is the placeholder instead.
|
|
631
651
|
* @default ""
|
|
632
652
|
*/
|
|
633
653
|
placeholder?: string;
|
|
@@ -997,6 +1017,7 @@ export interface PaymentRequestResourceOptions {
|
|
|
997
1017
|
currency: string;
|
|
998
1018
|
/**
|
|
999
1019
|
* Payment amount in minor units.
|
|
1020
|
+
* Change it later with `update()`.
|
|
1000
1021
|
*/
|
|
1001
1022
|
amount: number;
|
|
1002
1023
|
/**
|
|
@@ -1018,16 +1039,31 @@ export interface PaymentRequestResourceOptions {
|
|
|
1018
1039
|
* @default false
|
|
1019
1040
|
*/
|
|
1020
1041
|
requestShipping?: boolean;
|
|
1042
|
+
/**
|
|
1043
|
+
* Offer the sheet's own promo code field and answer `onPromoCodeChange`. Apple Pay shows the field on devices that support Apple Pay version 12 (iOS 15 and macOS 12); Google Pay shows it where the account's Google Pay setup allows offers. Other devices open the sheet without it.
|
|
1044
|
+
* @default false
|
|
1045
|
+
*/
|
|
1046
|
+
requestPromoCode?: boolean;
|
|
1047
|
+
/**
|
|
1048
|
+
* A promo code already applied to the charge, prefilled into the sheet so the buyer can see or remove it.
|
|
1049
|
+
*/
|
|
1050
|
+
appliedPromoCode?: string;
|
|
1051
|
+
/**
|
|
1052
|
+
* What `appliedPromoCode` does, shown next to the code where the sheet captions applied codes (Google Pay).
|
|
1053
|
+
*/
|
|
1054
|
+
appliedPromoDescription?: string;
|
|
1021
1055
|
/**
|
|
1022
1056
|
* Account ISO 3166-1 alpha-2 country code for the Apple Pay sheet. Omit it to use the account's published registration country. The sheet defaults to `US` when neither is available.
|
|
1023
1057
|
*/
|
|
1024
1058
|
countryCode?: string;
|
|
1025
1059
|
/**
|
|
1026
1060
|
* Line items the sheet lists under the total.
|
|
1061
|
+
* Change it later with `update()`.
|
|
1027
1062
|
*/
|
|
1028
1063
|
lineItems?: PaymentRequestLineItem[];
|
|
1029
1064
|
/**
|
|
1030
1065
|
* Shipping options the sheet offers when `requestShipping` is set. Display-only — update `amount` from your change handler.
|
|
1066
|
+
* Change it later with `update()`.
|
|
1031
1067
|
*/
|
|
1032
1068
|
shippingOptions?: PaymentRequestShippingOption[];
|
|
1033
1069
|
}
|
|
@@ -1038,14 +1074,18 @@ export interface PaymentRequestResourceOptions {
|
|
|
1038
1074
|
*/
|
|
1039
1075
|
export interface PaymentRequestResource {
|
|
1040
1076
|
/**
|
|
1041
|
-
* 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 and verified as a [payment method domain](/api-reference/beta/payment-method-domains/payment-method-domain), and offering Google Pay there is subject to the [Google Pay API Terms of Service](https://payments.developers.google.com/terms/sellertos)). 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, PayPal last — so express buttons can stack best-first. `payPal` reports PayPal where the account offers it in this currency, the amount is within PayPal's limits, the request neither sets `setupFutureUsage` nor asks for the payer's phone, PayPal's scripts load on this page, and this page's origin is approved for the account like the other wallets'. A page with a Content Security Policy must allow PayPal's hosts, which `contentSecurityPolicy()` includes. A page that already loads PayPal's own v5 JavaScript SDK reports `payPal: false`. This primes `show()`. Always await it first.
|
|
1077
|
+
* 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 and verified as a [payment method domain](/api-reference/beta/payment-method-domains/payment-method-domain), and offering Google Pay there is subject to the [Google Pay API Terms of Service](https://payments.developers.google.com/terms/sellertos)). On a page that is itself inside an iframe, Apple Pay checks the top-level page's domain instead when the browser exposes it. 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, PayPal last — so express buttons can stack best-first. `payPal` reports PayPal where the account offers it in this currency, the amount is within PayPal's limits, the request neither sets `setupFutureUsage` nor asks for the payer's phone, PayPal's scripts load on this page, and this page's origin is approved for the account like the other wallets'. A page with a Content Security Policy must allow PayPal's hosts, which `contentSecurityPolicy()` includes. A page that already loads PayPal's own v5 JavaScript SDK reports `payPal: false`. Pass `types` to check only the wallets you list; `show(type)` needs that wallet checked. `wallets` carries each available wallet's official button art (`light` and `dark` color and image). This primes `show()`. Always await it first.
|
|
1042
1078
|
*/
|
|
1043
|
-
canMakePayment: () => Promise<WalletAvailability>;
|
|
1079
|
+
canMakePayment: (filter?: { types?: ("apple_pay" | "google_pay" | "paypal_express")[] | undefined; } | undefined) => Promise<WalletAvailability>;
|
|
1044
1080
|
/**
|
|
1045
|
-
* Open the selected wallet after awaiting `canMakePayment()`, synchronously in the press: Apple requires session creation within the gesture stack, and PayPal opens its window there — a pop-up on desktop, PayPal's in-page window when the pop-up is blocked and on mobile. Pass `email` when your page already collected one — the wallet takes it and never asks for a second. With `requestPayerEmail: false`, passing one is required, and the wallet refuses to open without it because confirmation tokens require an email.
|
|
1081
|
+
* Open the selected wallet after awaiting `canMakePayment()`, synchronously in the press: Apple requires session creation within the gesture stack, and PayPal opens its window there — a pop-up on desktop, PayPal's in-page window when the pop-up is blocked and on mobile. Pass `email` when your page already collected one — the wallet takes it and never asks for a second. With `requestPayerEmail: false`, passing one is required, and the wallet refuses to open without it because confirmation tokens require an email. While the sheet is open, `update()` throws: answer the change events to change it.
|
|
1046
1082
|
* Call synchronously during user activation. Await prerequisites first because browsers revoke activation across asynchronous steps.
|
|
1047
1083
|
*/
|
|
1048
1084
|
show: (type: "apple_pay" | "google_pay" | "paypal_express", provided?: { email?: string | undefined; } | undefined) => Promise<PaymentRequestResult>;
|
|
1085
|
+
/**
|
|
1086
|
+
* Change `amount`, `lineItems` and `shippingOptions` on this instance. Every other option is fixed at `create()`: create a new instance to change it.
|
|
1087
|
+
*/
|
|
1088
|
+
update: (patch: { amount?: number | undefined; lineItems?: PaymentRequestLineItem[] | undefined; shippingOptions?: PaymentRequestShippingOption[] | undefined; }) => void;
|
|
1049
1089
|
/**
|
|
1050
1090
|
* The sheet's shipping address changed (redacted pre-authorization: city/state/postal/country only). An error in the answer that names a `field` (`city`, `state`, `postal_code`, `country`) marks that field in Apple Pay; Google Pay shows the message alone. PayPal fires it with the address the buyer picks, and an error naming a `field` refuses that part of the address inside PayPal.
|
|
1051
1091
|
* Call `updateWith(…)` exactly once per event. A handler that throws or rejects before calling it fails that update right away.
|
|
@@ -1064,6 +1104,12 @@ export interface PaymentRequestResource {
|
|
|
1064
1104
|
* Returns the unsubscribe function.
|
|
1065
1105
|
*/
|
|
1066
1106
|
onBillingAddressChange(handler: (ev: BillingAddressChangeEvent) => void): () => void;
|
|
1107
|
+
/**
|
|
1108
|
+
* The buyer typed, changed, or removed a code in the sheet's promo field (`requestPromoCode`). Answer `updateWith({ amount })` to apply the code at a new total, `updateWith({})` to apply it at the current total, or `updateWith({ error })` to refuse it in place. A removal arrives with `code` null and is answered the same way. A handler that throws, rejects, or doesn't answer within 10 seconds refuses the code.
|
|
1109
|
+
* Call `updateWith(…)` exactly once per event. A handler that throws or rejects before calling it fails that update right away.
|
|
1110
|
+
* Returns the unsubscribe function.
|
|
1111
|
+
*/
|
|
1112
|
+
onPromoCodeChange(handler: (ev: PromoCodeChangeEvent) => void): () => void;
|
|
1067
1113
|
/**
|
|
1068
1114
|
* The sheet created a confirmation token. This is the same result that `show()` returns.
|
|
1069
1115
|
* Returns the unsubscribe function.
|
|
@@ -1144,6 +1190,30 @@ export interface PaymentsStatics {
|
|
|
1144
1190
|
paymentRequest: { create(options: PaymentRequestResourceOptions): PaymentRequestResource };
|
|
1145
1191
|
}
|
|
1146
1192
|
|
|
1193
|
+
/**
|
|
1194
|
+
* Declared from the app's `WalletButtonArt`, referenced by a host-capability surface.
|
|
1195
|
+
*/
|
|
1196
|
+
export interface WalletButtonArt {
|
|
1197
|
+
/**
|
|
1198
|
+
* For light pages.
|
|
1199
|
+
*/
|
|
1200
|
+
light: { color: string; image: string; };
|
|
1201
|
+
/**
|
|
1202
|
+
* For dark pages.
|
|
1203
|
+
*/
|
|
1204
|
+
dark: { color: string; image: string; };
|
|
1205
|
+
}
|
|
1206
|
+
|
|
1207
|
+
/**
|
|
1208
|
+
* Declared from the app's `WalletDetails`, referenced by a host-capability surface.
|
|
1209
|
+
*/
|
|
1210
|
+
export interface WalletDetails {
|
|
1211
|
+
/**
|
|
1212
|
+
* The wallet's official button art. Absent when none is published.
|
|
1213
|
+
*/
|
|
1214
|
+
button?: WalletButtonArt | undefined;
|
|
1215
|
+
}
|
|
1216
|
+
|
|
1147
1217
|
/**
|
|
1148
1218
|
* Host-probed wallet availability after checking offered methods, device capability, and Google Pay origin approval.
|
|
1149
1219
|
* Declared from the app's `WalletAvailability`, referenced by a host-capability surface.
|
|
@@ -1156,6 +1226,10 @@ export interface WalletAvailability {
|
|
|
1156
1226
|
* The wallets ranked by which sheet is native to this browser — Apple Pay first on WebKit, Google Pay first everywhere else, PayPal last — 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.
|
|
1157
1227
|
*/
|
|
1158
1228
|
order?: ("apple_pay" | "google_pay" | "paypal_express")[] | undefined;
|
|
1229
|
+
/**
|
|
1230
|
+
* Each available wallet's details, keyed by wallet type. Absent on consumer-stated availability (previews).
|
|
1231
|
+
*/
|
|
1232
|
+
wallets?: { apple_pay?: WalletDetails | undefined; google_pay?: WalletDetails | undefined; paypal_express?: WalletDetails | undefined; } | undefined;
|
|
1159
1233
|
}
|
|
1160
1234
|
|
|
1161
1235
|
/**
|
|
@@ -1274,7 +1348,39 @@ export interface BillingAddressChangeEvent {
|
|
|
1274
1348
|
*/
|
|
1275
1349
|
address: PaymentRequestAddress;
|
|
1276
1350
|
/**
|
|
1277
|
-
* Call this exactly once. An event left unanswered
|
|
1351
|
+
* Call this exactly once. An event left unanswered for 10 seconds refuses the card, and the buyer picks another one.
|
|
1278
1352
|
*/
|
|
1279
1353
|
updateWith: (update: PaymentRequestUpdate) => void;
|
|
1280
1354
|
}
|
|
1355
|
+
|
|
1356
|
+
/**
|
|
1357
|
+
* Declared from the app's `PromoCodeUpdate`, referenced by a host-capability surface.
|
|
1358
|
+
*/
|
|
1359
|
+
export interface PromoCodeUpdate {
|
|
1360
|
+
/**
|
|
1361
|
+
* The total under the code, in minor units.
|
|
1362
|
+
*/
|
|
1363
|
+
amount?: number | undefined;
|
|
1364
|
+
/**
|
|
1365
|
+
* A caption for the applied code, where the sheet captions codes (Google Pay).
|
|
1366
|
+
*/
|
|
1367
|
+
appliedDescription?: string | undefined;
|
|
1368
|
+
/**
|
|
1369
|
+
* Refuses the code. The sheet shows `message` next to its promo field.
|
|
1370
|
+
*/
|
|
1371
|
+
error?: { message: string; } | undefined;
|
|
1372
|
+
}
|
|
1373
|
+
|
|
1374
|
+
/**
|
|
1375
|
+
* Declared from the app's `PromoCodeChangeEvent`, referenced by a host-capability surface.
|
|
1376
|
+
*/
|
|
1377
|
+
export interface PromoCodeChangeEvent {
|
|
1378
|
+
/**
|
|
1379
|
+
* The code now in the sheet's promo field, or null when the buyer removed it.
|
|
1380
|
+
*/
|
|
1381
|
+
code: string | null;
|
|
1382
|
+
/**
|
|
1383
|
+
* Answer exactly once: `error` refuses the code and keeps the totals, and any other answer applies it. `amount` reprices the sheet under the code, and `appliedDescription` captions the applied code where the sheet shows one (Google Pay). `updateWith({})` applies the code at the current total.
|
|
1384
|
+
*/
|
|
1385
|
+
updateWith: (update: PromoCodeUpdate) => void;
|
|
1386
|
+
}
|
package/payments.d.ts
CHANGED
|
@@ -354,6 +354,11 @@ export interface AddressElementProps {
|
|
|
354
354
|
* @default "full"
|
|
355
355
|
*/
|
|
356
356
|
layout?: "full" | "compact";
|
|
357
|
+
/**
|
|
358
|
+
* `above` (default) keeps each label outside its field: above it in the `full` layout, as its placeholder in `compact`. `floating` uses each label as the placeholder of its field, in either layout, then shows a small label above the typed text once the field has a value.
|
|
359
|
+
* @default "above"
|
|
360
|
+
*/
|
|
361
|
+
labelMode?: "above" | "floating";
|
|
357
362
|
/**
|
|
358
363
|
* `full` (default) follows the selected country's complete address format. `minimal` collects only country and postal code. `name` independently adds required name fields. Set `name` to `none` to omit them. This element does not add fields required by a payment method. Card confirmation requires a name, country, and postal code, so keep `name` enabled or pass `billingDetails.name`.
|
|
359
364
|
* @default "full"
|
|
@@ -450,6 +455,11 @@ export interface AddressElementCreateOptions {
|
|
|
450
455
|
* @default "full"
|
|
451
456
|
*/
|
|
452
457
|
layout?: "full" | "compact";
|
|
458
|
+
/**
|
|
459
|
+
* `above` (default) keeps each label outside its field: above it in the `full` layout, as its placeholder in `compact`. `floating` uses each label as the placeholder of its field, in either layout, then shows a small label above the typed text once the field has a value.
|
|
460
|
+
* @default "above"
|
|
461
|
+
*/
|
|
462
|
+
labelMode?: "above" | "floating";
|
|
453
463
|
/**
|
|
454
464
|
* `full` (default) follows the selected country's complete address format. `minimal` collects only country and postal code. `name` independently adds required name fields. Set `name` to `none` to omit them. This element does not add fields required by a payment method. Card confirmation requires a name, country, and postal code, so keep `name` enabled or pass `billingDetails.name`.
|
|
455
465
|
* @default "full"
|
|
@@ -575,13 +585,18 @@ export interface EmailElementProps {
|
|
|
575
585
|
* @default true
|
|
576
586
|
*/
|
|
577
587
|
label?: boolean;
|
|
588
|
+
/**
|
|
589
|
+
* `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`.
|
|
590
|
+
* @default "above"
|
|
591
|
+
*/
|
|
592
|
+
labelMode?: "above" | "floating";
|
|
578
593
|
/**
|
|
579
594
|
* Seed value applied once at mount.
|
|
580
595
|
* @default ""
|
|
581
596
|
*/
|
|
582
597
|
defaultValue?: string;
|
|
583
598
|
/**
|
|
584
|
-
* Placeholder text for the email input. Empty (default) renders `you@example.com`.
|
|
599
|
+
* Placeholder text for the email input. Empty (default) renders `you@example.com`. With floating labels the label text is the placeholder instead.
|
|
585
600
|
* @default ""
|
|
586
601
|
*/
|
|
587
602
|
placeholder?: string;
|
|
@@ -621,13 +636,18 @@ export interface EmailElementCreateOptions {
|
|
|
621
636
|
* @default true
|
|
622
637
|
*/
|
|
623
638
|
label?: boolean;
|
|
639
|
+
/**
|
|
640
|
+
* `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`.
|
|
641
|
+
* @default "above"
|
|
642
|
+
*/
|
|
643
|
+
labelMode?: "above" | "floating";
|
|
624
644
|
/**
|
|
625
645
|
* Seed value applied once at mount.
|
|
626
646
|
* @default ""
|
|
627
647
|
*/
|
|
628
648
|
defaultValue?: string;
|
|
629
649
|
/**
|
|
630
|
-
* Placeholder text for the email input. Empty (default) renders `you@example.com`.
|
|
650
|
+
* Placeholder text for the email input. Empty (default) renders `you@example.com`. With floating labels the label text is the placeholder instead.
|
|
631
651
|
* @default ""
|
|
632
652
|
*/
|
|
633
653
|
placeholder?: string;
|
|
@@ -997,6 +1017,7 @@ export interface PaymentRequestResourceOptions {
|
|
|
997
1017
|
currency: string;
|
|
998
1018
|
/**
|
|
999
1019
|
* Payment amount in minor units.
|
|
1020
|
+
* Change it later with `update()`.
|
|
1000
1021
|
*/
|
|
1001
1022
|
amount: number;
|
|
1002
1023
|
/**
|
|
@@ -1018,16 +1039,31 @@ export interface PaymentRequestResourceOptions {
|
|
|
1018
1039
|
* @default false
|
|
1019
1040
|
*/
|
|
1020
1041
|
requestShipping?: boolean;
|
|
1042
|
+
/**
|
|
1043
|
+
* Offer the sheet's own promo code field and answer `onPromoCodeChange`. Apple Pay shows the field on devices that support Apple Pay version 12 (iOS 15 and macOS 12); Google Pay shows it where the account's Google Pay setup allows offers. Other devices open the sheet without it.
|
|
1044
|
+
* @default false
|
|
1045
|
+
*/
|
|
1046
|
+
requestPromoCode?: boolean;
|
|
1047
|
+
/**
|
|
1048
|
+
* A promo code already applied to the charge, prefilled into the sheet so the buyer can see or remove it.
|
|
1049
|
+
*/
|
|
1050
|
+
appliedPromoCode?: string;
|
|
1051
|
+
/**
|
|
1052
|
+
* What `appliedPromoCode` does, shown next to the code where the sheet captions applied codes (Google Pay).
|
|
1053
|
+
*/
|
|
1054
|
+
appliedPromoDescription?: string;
|
|
1021
1055
|
/**
|
|
1022
1056
|
* Account ISO 3166-1 alpha-2 country code for the Apple Pay sheet. Omit it to use the account's published registration country. The sheet defaults to `US` when neither is available.
|
|
1023
1057
|
*/
|
|
1024
1058
|
countryCode?: string;
|
|
1025
1059
|
/**
|
|
1026
1060
|
* Line items the sheet lists under the total.
|
|
1061
|
+
* Change it later with `update()`.
|
|
1027
1062
|
*/
|
|
1028
1063
|
lineItems?: PaymentRequestLineItem[];
|
|
1029
1064
|
/**
|
|
1030
1065
|
* Shipping options the sheet offers when `requestShipping` is set. Display-only — update `amount` from your change handler.
|
|
1066
|
+
* Change it later with `update()`.
|
|
1031
1067
|
*/
|
|
1032
1068
|
shippingOptions?: PaymentRequestShippingOption[];
|
|
1033
1069
|
}
|
|
@@ -1038,14 +1074,18 @@ export interface PaymentRequestResourceOptions {
|
|
|
1038
1074
|
*/
|
|
1039
1075
|
export interface PaymentRequestResource {
|
|
1040
1076
|
/**
|
|
1041
|
-
* 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 and verified as a [payment method domain](/api-reference/beta/payment-method-domains/payment-method-domain), and offering Google Pay there is subject to the [Google Pay API Terms of Service](https://payments.developers.google.com/terms/sellertos)). 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, PayPal last — so express buttons can stack best-first. `payPal` reports PayPal where the account offers it in this currency, the amount is within PayPal's limits, the request neither sets `setupFutureUsage` nor asks for the payer's phone, PayPal's scripts load on this page, and this page's origin is approved for the account like the other wallets'. A page with a Content Security Policy must allow PayPal's hosts, which `contentSecurityPolicy()` includes. A page that already loads PayPal's own v5 JavaScript SDK reports `payPal: false`. This primes `show()`. Always await it first.
|
|
1077
|
+
* 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 and verified as a [payment method domain](/api-reference/beta/payment-method-domains/payment-method-domain), and offering Google Pay there is subject to the [Google Pay API Terms of Service](https://payments.developers.google.com/terms/sellertos)). On a page that is itself inside an iframe, Apple Pay checks the top-level page's domain instead when the browser exposes it. 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, PayPal last — so express buttons can stack best-first. `payPal` reports PayPal where the account offers it in this currency, the amount is within PayPal's limits, the request neither sets `setupFutureUsage` nor asks for the payer's phone, PayPal's scripts load on this page, and this page's origin is approved for the account like the other wallets'. A page with a Content Security Policy must allow PayPal's hosts, which `contentSecurityPolicy()` includes. A page that already loads PayPal's own v5 JavaScript SDK reports `payPal: false`. Pass `types` to check only the wallets you list; `show(type)` needs that wallet checked. `wallets` carries each available wallet's official button art (`light` and `dark` color and image). This primes `show()`. Always await it first.
|
|
1042
1078
|
*/
|
|
1043
|
-
canMakePayment: () => Promise<WalletAvailability>;
|
|
1079
|
+
canMakePayment: (filter?: { types?: ("apple_pay" | "google_pay" | "paypal_express")[] | undefined; } | undefined) => Promise<WalletAvailability>;
|
|
1044
1080
|
/**
|
|
1045
|
-
* Open the selected wallet after awaiting `canMakePayment()`, synchronously in the press: Apple requires session creation within the gesture stack, and PayPal opens its window there — a pop-up on desktop, PayPal's in-page window when the pop-up is blocked and on mobile. Pass `email` when your page already collected one — the wallet takes it and never asks for a second. With `requestPayerEmail: false`, passing one is required, and the wallet refuses to open without it because confirmation tokens require an email.
|
|
1081
|
+
* Open the selected wallet after awaiting `canMakePayment()`, synchronously in the press: Apple requires session creation within the gesture stack, and PayPal opens its window there — a pop-up on desktop, PayPal's in-page window when the pop-up is blocked and on mobile. Pass `email` when your page already collected one — the wallet takes it and never asks for a second. With `requestPayerEmail: false`, passing one is required, and the wallet refuses to open without it because confirmation tokens require an email. While the sheet is open, `update()` throws: answer the change events to change it.
|
|
1046
1082
|
* Call synchronously during user activation. Await prerequisites first because browsers revoke activation across asynchronous steps.
|
|
1047
1083
|
*/
|
|
1048
1084
|
show: (type: "apple_pay" | "google_pay" | "paypal_express", provided?: { email?: string | undefined; } | undefined) => Promise<PaymentRequestResult>;
|
|
1085
|
+
/**
|
|
1086
|
+
* Change `amount`, `lineItems` and `shippingOptions` on this instance. Every other option is fixed at `create()`: create a new instance to change it.
|
|
1087
|
+
*/
|
|
1088
|
+
update: (patch: { amount?: number | undefined; lineItems?: PaymentRequestLineItem[] | undefined; shippingOptions?: PaymentRequestShippingOption[] | undefined; }) => void;
|
|
1049
1089
|
/**
|
|
1050
1090
|
* The sheet's shipping address changed (redacted pre-authorization: city/state/postal/country only). An error in the answer that names a `field` (`city`, `state`, `postal_code`, `country`) marks that field in Apple Pay; Google Pay shows the message alone. PayPal fires it with the address the buyer picks, and an error naming a `field` refuses that part of the address inside PayPal.
|
|
1051
1091
|
* Call `updateWith(…)` exactly once per event. A handler that throws or rejects before calling it fails that update right away.
|
|
@@ -1064,6 +1104,12 @@ export interface PaymentRequestResource {
|
|
|
1064
1104
|
* Returns the unsubscribe function.
|
|
1065
1105
|
*/
|
|
1066
1106
|
onBillingAddressChange(handler: (ev: BillingAddressChangeEvent) => void): () => void;
|
|
1107
|
+
/**
|
|
1108
|
+
* The buyer typed, changed, or removed a code in the sheet's promo field (`requestPromoCode`). Answer `updateWith({ amount })` to apply the code at a new total, `updateWith({})` to apply it at the current total, or `updateWith({ error })` to refuse it in place. A removal arrives with `code` null and is answered the same way. A handler that throws, rejects, or doesn't answer within 10 seconds refuses the code.
|
|
1109
|
+
* Call `updateWith(…)` exactly once per event. A handler that throws or rejects before calling it fails that update right away.
|
|
1110
|
+
* Returns the unsubscribe function.
|
|
1111
|
+
*/
|
|
1112
|
+
onPromoCodeChange(handler: (ev: PromoCodeChangeEvent) => void): () => void;
|
|
1067
1113
|
/**
|
|
1068
1114
|
* The sheet created a confirmation token. This is the same result that `show()` returns.
|
|
1069
1115
|
* Returns the unsubscribe function.
|
|
@@ -1144,6 +1190,30 @@ export interface PaymentsStatics {
|
|
|
1144
1190
|
paymentRequest: { create(options: PaymentRequestResourceOptions): PaymentRequestResource };
|
|
1145
1191
|
}
|
|
1146
1192
|
|
|
1193
|
+
/**
|
|
1194
|
+
* Declared from the app's `WalletButtonArt`, referenced by a host-capability surface.
|
|
1195
|
+
*/
|
|
1196
|
+
export interface WalletButtonArt {
|
|
1197
|
+
/**
|
|
1198
|
+
* For light pages.
|
|
1199
|
+
*/
|
|
1200
|
+
light: { color: string; image: string; };
|
|
1201
|
+
/**
|
|
1202
|
+
* For dark pages.
|
|
1203
|
+
*/
|
|
1204
|
+
dark: { color: string; image: string; };
|
|
1205
|
+
}
|
|
1206
|
+
|
|
1207
|
+
/**
|
|
1208
|
+
* Declared from the app's `WalletDetails`, referenced by a host-capability surface.
|
|
1209
|
+
*/
|
|
1210
|
+
export interface WalletDetails {
|
|
1211
|
+
/**
|
|
1212
|
+
* The wallet's official button art. Absent when none is published.
|
|
1213
|
+
*/
|
|
1214
|
+
button?: WalletButtonArt | undefined;
|
|
1215
|
+
}
|
|
1216
|
+
|
|
1147
1217
|
/**
|
|
1148
1218
|
* Host-probed wallet availability after checking offered methods, device capability, and Google Pay origin approval.
|
|
1149
1219
|
* Declared from the app's `WalletAvailability`, referenced by a host-capability surface.
|
|
@@ -1156,6 +1226,10 @@ export interface WalletAvailability {
|
|
|
1156
1226
|
* The wallets ranked by which sheet is native to this browser — Apple Pay first on WebKit, Google Pay first everywhere else, PayPal last — 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.
|
|
1157
1227
|
*/
|
|
1158
1228
|
order?: ("apple_pay" | "google_pay" | "paypal_express")[] | undefined;
|
|
1229
|
+
/**
|
|
1230
|
+
* Each available wallet's details, keyed by wallet type. Absent on consumer-stated availability (previews).
|
|
1231
|
+
*/
|
|
1232
|
+
wallets?: { apple_pay?: WalletDetails | undefined; google_pay?: WalletDetails | undefined; paypal_express?: WalletDetails | undefined; } | undefined;
|
|
1159
1233
|
}
|
|
1160
1234
|
|
|
1161
1235
|
/**
|
|
@@ -1274,7 +1348,39 @@ export interface BillingAddressChangeEvent {
|
|
|
1274
1348
|
*/
|
|
1275
1349
|
address: PaymentRequestAddress;
|
|
1276
1350
|
/**
|
|
1277
|
-
* Call this exactly once. An event left unanswered
|
|
1351
|
+
* Call this exactly once. An event left unanswered for 10 seconds refuses the card, and the buyer picks another one.
|
|
1278
1352
|
*/
|
|
1279
1353
|
updateWith: (update: PaymentRequestUpdate) => void;
|
|
1280
1354
|
}
|
|
1355
|
+
|
|
1356
|
+
/**
|
|
1357
|
+
* Declared from the app's `PromoCodeUpdate`, referenced by a host-capability surface.
|
|
1358
|
+
*/
|
|
1359
|
+
export interface PromoCodeUpdate {
|
|
1360
|
+
/**
|
|
1361
|
+
* The total under the code, in minor units.
|
|
1362
|
+
*/
|
|
1363
|
+
amount?: number | undefined;
|
|
1364
|
+
/**
|
|
1365
|
+
* A caption for the applied code, where the sheet captions codes (Google Pay).
|
|
1366
|
+
*/
|
|
1367
|
+
appliedDescription?: string | undefined;
|
|
1368
|
+
/**
|
|
1369
|
+
* Refuses the code. The sheet shows `message` next to its promo field.
|
|
1370
|
+
*/
|
|
1371
|
+
error?: { message: string; } | undefined;
|
|
1372
|
+
}
|
|
1373
|
+
|
|
1374
|
+
/**
|
|
1375
|
+
* Declared from the app's `PromoCodeChangeEvent`, referenced by a host-capability surface.
|
|
1376
|
+
*/
|
|
1377
|
+
export interface PromoCodeChangeEvent {
|
|
1378
|
+
/**
|
|
1379
|
+
* The code now in the sheet's promo field, or null when the buyer removed it.
|
|
1380
|
+
*/
|
|
1381
|
+
code: string | null;
|
|
1382
|
+
/**
|
|
1383
|
+
* Answer exactly once: `error` refuses the code and keeps the totals, and any other answer applies it. `amount` reprices the sheet under the code, and `appliedDescription` captions the applied code where the sheet shows one (Google Pay). `updateWith({})` applies the code at the current total.
|
|
1384
|
+
*/
|
|
1385
|
+
updateWith: (update: PromoCodeUpdate) => void;
|
|
1386
|
+
}
|