@whop/elements 1.8.0 → 1.9.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/payments.d.ts CHANGED
@@ -314,9 +314,9 @@ export interface PaymentElementCreateOptions {
314
314
  */
315
315
  autoSelect?: boolean;
316
316
  /**
317
- * Fires when selection changes. `complete: true` means the buyer selected a method and completed its card fields or required inputs. Use it to enable confirmation. `method` provides category, per-currency countries, and amount bounds for dependent UI such as country fields. `requiresBillingPhone` indicates whether the selected method requires a phone in billing details, including when `fields.phone` disables its input. `supportsBuyerFee` indicates whether to include Whop's buyer service fee in the displayed total.
317
+ * Fires when selection changes. `complete: true` means the buyer selected a method and completed its card fields or required inputs. Use it to enable confirmation. `paymentMethod` is the selected payment method, saved or new, or `null` while nothing is selected: `displayName` and `icons` name the pick the way the element shows it (with `balance.imageUrl`, a balance owner's image), `card` carries a card's network, last four digits and funding, `requiresBillingPhone` says whether the method needs a phone in billing details, and `countries` lists where the method can pay from in the charge's currency. `type`, `requiresBillingPhone` and `method` at the top level are deprecated: read them from `paymentMethod`. `supportsBuyerFee` at the top level is deprecated too, with no replacement: Whop prices its buyer service fee itself.
318
318
  */
319
- onChange?: ((payload: { complete: boolean; type?: string | undefined; supportsBuyerFee?: boolean | undefined; requiresBillingPhone?: boolean | undefined; method?: { type: string; category: string; template: string; display_name: string; countries: ({ country: string; min_amount: number | null; max_amount: number | null; })[]; min_amount: number | null; max_amount: number | null; } | undefined; }) => void);
319
+ onChange?: ((payload: PaymentElementChangeEvent) => void);
320
320
  /**
321
321
  * Fires about 300 ms after the internal billing address changes. Use it for tax, shipping, or other address-dependent updates. `country` is an ISO 3166-1 alpha-2 code. The payload omits other address keys when empty or unused for that country. `complete: true` means the billing block is valid and complete. This event fires only while the payment element owns address collection. With `fields.billingDetails: 'never'`, use your address source. With a mounted `AddressElement`, use its `change` event.
322
322
  */
@@ -389,7 +389,7 @@ export interface AddressElementProps {
389
389
  */
390
390
  allowedCountries?: string[];
391
391
  /**
392
- * Enables Google Places suggestions for the street address. If no match appears or Places is blocked, the list reports no matches and lets buyers enter the address manually. Set `false` for a plain input.
392
+ * Enables Google Places suggestions for the street address. If no match appears or Places is blocked, the list reports no matches and lets buyers enter the address manually. On a phone, the suggestions open full screen from a search button in the street field instead of under it, where the keyboard would cover them. Set `false` for a plain input.
393
393
  * @default true
394
394
  */
395
395
  autocomplete?: boolean;
@@ -495,7 +495,7 @@ export interface AddressElementCreateOptions {
495
495
  */
496
496
  allowedCountries?: string[];
497
497
  /**
498
- * Enables Google Places suggestions for the street address. If no match appears or Places is blocked, the list reports no matches and lets buyers enter the address manually. Set `false` for a plain input.
498
+ * Enables Google Places suggestions for the street address. If no match appears or Places is blocked, the list reports no matches and lets buyers enter the address manually. On a phone, the suggestions open full screen from a search button in the street field instead of under it, where the keyboard would cover them. Set `false` for a plain input.
499
499
  * @default true
500
500
  */
501
501
  autocomplete?: boolean;
@@ -849,9 +849,9 @@ export interface CardFieldsSubOptions {
849
849
  */
850
850
  publicKey?: string;
851
851
  /**
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.
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 as the field reports it; `network` is the same detection in the API's network vocabulary (matches the matrix card entry's `networks`, `null` while unknown). `last4` is the number's last four digits, `null` until the number is far enough along. `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.
853
853
  */
854
- onChange?: ((payload: { complete: boolean; brand: string; funding: string | null; issuingCountry: string | null; }) => void);
854
+ onChange?: ((payload: { complete: boolean; brand: string; network: "visa" | "mastercard" | "amex" | "discover" | "jcb" | "diners" | "unionpay" | "elo" | "maestro" | null; last4: string | null; funding: string | null; issuingCountry: string | null; }) => void);
855
855
  }
856
856
 
857
857
  /**
@@ -1044,6 +1044,10 @@ export interface PaymentRequestResourceOptions {
1044
1044
  * Set only after displaying save consent. Marks the token for `off_session` or `on_session` use.
1045
1045
  */
1046
1046
  setupFutureUsage?: "off_session" | "on_session";
1047
+ /**
1048
+ * Payment method filters in the API's `enabled`, `disabled`, and `include_platform_defaults` format. They narrow the wallets `canMakePayment()` reports: `disabled` removes types, `enabled` restores offered types, and `include_platform_defaults: false` leaves only enabled types. They never add a method the account doesn't offer. PayPal follows the `paypal` type.
1049
+ */
1050
+ paymentMethodConfiguration?: PaymentMethodConfigurationShape;
1047
1051
  /**
1048
1052
  * Ask the sheet for the payer's email — the confirmation token requires one.
1049
1053
  * @default true
@@ -1065,11 +1069,11 @@ export interface PaymentRequestResourceOptions {
1065
1069
  */
1066
1070
  requestPromoCode?: boolean;
1067
1071
  /**
1068
- * A promo code already applied to the charge, prefilled into the sheet so the buyer can see or remove it.
1072
+ * A promo code already applied to the charge, prefilled into the sheet so the buyer can see, replace or remove it.
1069
1073
  */
1070
1074
  appliedPromoCode?: string;
1071
1075
  /**
1072
- * What `appliedPromoCode` does, shown next to the code where the sheet captions applied codes (Google Pay).
1076
+ * What `appliedPromoCode` does, shown next to the code in Google Pay. Apple Pay's coupon field has no caption.
1073
1077
  */
1074
1078
  appliedPromoDescription?: string;
1075
1079
  /**
@@ -1082,7 +1086,7 @@ export interface PaymentRequestResourceOptions {
1082
1086
  */
1083
1087
  lineItems?: PaymentRequestLineItem[];
1084
1088
  /**
1085
- * Shipping options the sheet offers when `requestShipping` is set. Display-only — update `amount` from your change handler.
1089
+ * Shipping options the sheet offers when `requestShipping` is set. Display-only — update `amount` from your change handler. The sheet opens with the first option selected and fires no `onShippingOptionChange` for it, so `amount` must already include its price.
1086
1090
  * Change it later with `update()`.
1087
1091
  */
1088
1092
  shippingOptions?: PaymentRequestShippingOption[];
@@ -1094,7 +1098,7 @@ export interface PaymentRequestResourceOptions {
1094
1098
  */
1095
1099
  export interface PaymentRequestResource {
1096
1100
  /**
1097
- * 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.
1101
+ * 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 does not ask for the payer's phone (an `off_session` request may be $0, which saves PayPal without a charge), 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.
1098
1102
  */
1099
1103
  canMakePayment: (filter?: { types?: ("apple_pay" | "google_pay" | "paypal_express")[] | undefined; } | undefined) => Promise<WalletAvailability>;
1100
1104
  /**
@@ -1107,31 +1111,43 @@ export interface PaymentRequestResource {
1107
1111
  */
1108
1112
  update: (patch: { amount?: number | undefined; lineItems?: PaymentRequestLineItem[] | undefined; shippingOptions?: PaymentRequestShippingOption[] | undefined; }) => void;
1109
1113
  /**
1110
- * 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.
1114
+ * The buyer chose a shipping address (redacted pre-authorization: city, state, postal code and country only; Apple Pay cuts a US ZIP code to five digits and drops the last three characters of a Canadian or UK postal code). Answer with the totals for the address and the selected shipping option: the first one until the buyer picks another. `shippingOptions` replaces the options (an empty list changes nothing). A picked option stays selected while the answer keeps its `id`; when the answer drops it, the first option becomes the selection without an `onShippingOptionChange`, so price that one. Every error in the answer stays on the address until a later answer for an address clears it: one that names a `field` (`city`, `state`, `postal_code`, `country`) marks that field in Apple Pay, and Google Pay shows the message alone. Pay is refused while an error stands on the address. Refuse an address you can't ship to with a `shipping_address_unserviceable` error and no `field`. On Apple Pay, Google Pay and PayPal, a handler that hasn't answered within 25 seconds fails the address, the way a throwing one does, and its later answer is ignored. PayPal fires it with the address the buyer picks, and an error naming a `field` refuses that part of the address inside PayPal.
1111
1115
  * Call `updateWith(…)` exactly once per event. A handler that throws or rejects before calling it fails that update right away.
1112
1116
  * Returns the unsubscribe function.
1113
1117
  */
1114
1118
  onShippingAddressChange(handler: (ev: ShippingAddressChangeEvent) => void): () => void;
1115
1119
  /**
1116
- * The buyer picked a shipping option. Amount-only contract: `updateWith` carries amount/lineItems/shippingOptions/errors. Apple Pay has no error slot for a shipping option: an answer with `errors` keeps the last accepted total, and the first error's message shows when the buyer taps Pay, until they pick an option your handler accepts. Google Pay shows the message when the option is picked.
1120
+ * The buyer picked a shipping option, or Apple Pay re-announced the selected one: once the address changes are all answered and none is waiting, Apple Pay fires it for the option still selected. It never fires after an answer that drops the selected option, which makes the first option the selection without an event, so every total you answer prices the selected option: the first one until the buyer picks another, the pick while your answers keep its `id`, and the first again once an answer drops it. Amount-only contract: `updateWith` carries amount/lineItems/shippingOptions/errors. An answer with `errors` refuses the option until the buyer picks one your handler accepts. Apple Pay has no error slot for a shipping option, so it keeps the last accepted total whatever else the answer carries, and the first error's message shows when the buyer taps Pay. Google Pay shows the message when the option is picked. On Apple Pay, Google Pay and PayPal, a handler that hasn't answered within 25 seconds refuses the option, the way a throwing one does, and its later answer is ignored.
1117
1121
  * Call `updateWith(…)` exactly once per event. A handler that throws or rejects before calling it fails that update right away.
1118
1122
  * Returns the unsubscribe function.
1119
1123
  */
1120
1124
  onShippingOptionChange(handler: (ev: ShippingOptionChangeEvent) => void): () => void;
1121
1125
  /**
1122
- * Fires at sheet open and on card switches with the selected card's redacted billing address (city/state/postal/country only) — reprice the total for the address the charge taxes off. Answer `updateWith({ amount })` in minor units, `updateWith({})` to keep the current total, or `updateWith({ errors })` to refuse the card. Every event is answered exactly once: a handler that throws, rejects, or doesn't answer within 10 seconds refuses the card, so the buyer picks another one. PayPal fires it with each shipping address the buyer picks in PayPal, which is the address its token bills and taxes on, and a refusal there refuses that address inside PayPal.
1126
+ * The buyer selected a card, with its redacted billing address (city, state, postal code and country only): reprice the total for the address the charge taxes off. Apple Pay fires it when the buyer selects a card, and Google Pay when the sheet opens and each time the buyer switches cards. Answer `updateWith({ amount })` in minor units, `updateWith({})` to keep the current total, or `updateWith({ errors })` to refuse the card. Every event is answered exactly once: a handler that throws, rejects, or doesn't answer within 10 seconds refuses the card, so the buyer picks another one. On Apple Pay and Google Pay the same selection then fires `paymentMethodChange`, and the sheet updates once both are answered. PayPal fires it with each shipping address the buyer picks in PayPal, which is the address its token bills and taxes on, and a refusal there refuses that address inside PayPal.
1123
1127
  * Call `updateWith(…)` exactly once per event. A handler that throws or rejects before calling it fails that update right away.
1124
1128
  * Returns the unsubscribe function.
1125
1129
  */
1126
1130
  onBillingAddressChange(handler: (ev: BillingAddressChangeEvent) => void): () => void;
1127
1131
  /**
1128
- * 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.
1132
+ * The buyer selected a payment method: reprice the total for it, such as a surcharge on credit cards. Apple Pay fires it when the buyer selects a card, and Google Pay when the sheet opens and each time the buyer switches cards, each right after that card's `billingAddressChange`. `paymentMethod.type` is `card`. `paymentMethod.card` carries what the wallet tells about a card before the buyer authorizes: Apple Pay reports its `funding` (Apple usually withholds the network until then), and Google Pay its `network`. `paymentMethod.billingAddress` is the card's redacted billing address. Answer `updateWith({ amount, lineItems })` to reprice, `updateWith({})` to keep the current total, or `updateWith({ errors })` to refuse the method; `shippingOptions` is ignored. Apple Pay marks a refusal on the card's billing contact (on the named `field` when one is given) and holds its Pay button until the buyer picks another method. Google Pay shows the message on the card and refuses a Pay tap on it until the buyer picks a card you accept. A refused card leaves the totals as they were, whatever this answer or its `billingAddressChange` answer priced. Every event is answered exactly once: a handler that throws, rejects, or doesn't answer within 10 seconds refuses the method. Each sheet waits for your answer before the buyer can pay. PayPal never fires it.
1133
+ * Call `updateWith(…)` exactly once per event. A handler that throws or rejects before calling it fails that update right away.
1134
+ * Returns the unsubscribe function.
1135
+ */
1136
+ onPaymentMethodChange(handler: (ev: PaymentMethodChangeEvent) => void): () => void;
1137
+ /**
1138
+ * 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. Replacing an applied code arrives as one event with the new code, never a removal first, and a refused new code leaves the applied one in place. When `shippingOptions` drops the selected option, the first one becomes the selection without an `onShippingOptionChange`, so price that one. `appliedDescription` captions the code in Google Pay; Apple Pay's coupon field has no caption, so put anything the buyer must see in a line item label. A handler that throws, rejects, or doesn't answer within 10 seconds refuses the code.
1129
1139
  * Call `updateWith(…)` exactly once per event. A handler that throws or rejects before calling it fails that update right away.
1130
1140
  * Returns the unsubscribe function.
1131
1141
  */
1132
1142
  onPromoCodeChange(handler: (ev: PromoCodeChangeEvent) => void): () => void;
1133
1143
  /**
1134
- * The sheet created a confirmation token. This is the same result that `show()` returns.
1144
+ * The buyer authorized the payment, and no confirmation token exists yet. Subscribe to approve or refuse it first: the sheet waits for your answer, and without a handler the token is created at once. The event carries the payer, the payment method (with its redacted billing address, and in `displayName` the wallet's own label for it, such as `Visa 1234`), the shipping address and option, and the total and line items the buyer authorized. Answer `respondWith({ approved: true })` to create the token, which `show()` and `onConfirmationToken` then deliver as usual. Answer `respondWith({ approved: false, message })` to refuse: no token is created, Apple Pay and Google Pay show `message` in the sheet, and the buyer can change something and pay again, or close the sheet. PayPal can't show your message, so a refusal there ends the attempt: `show()` rejects with `payment_request_refused`, and the buyer can press PayPal again. Every event is answered exactly once, and only `approved: true` creates a token: a handler that throws, rejects, or doesn't answer within 25 seconds refuses the payment, early enough for Apple Pay and Google Pay to show the refusal before their own 30-second limit.
1145
+ * Call `respondWith(…)` exactly once per event. A handler that throws or rejects before calling it fails that update right away.
1146
+ * Returns the unsubscribe function.
1147
+ */
1148
+ onPaymentAuthorization(handler: (ev: PaymentAuthorizationEvent) => void): () => void;
1149
+ /**
1150
+ * The sheet created a confirmation token, heard once the sheet has closed. This is the same result that `show()` returns.
1135
1151
  * Returns the unsubscribe function.
1136
1152
  */
1137
1153
  onConfirmationToken(handler: (ev: PaymentRequestResult) => void): () => void;
@@ -1153,7 +1169,7 @@ export interface PaymentsHandle {
1153
1169
  */
1154
1170
  create(name: "payment", options?: PaymentElementCreateOptions): PaymentElementHandle;
1155
1171
  /**
1156
- * Collects a billing or shipping address. Fields, order, and validation follow the selected country. Includes street autocomplete and methods to read or validate the address.
1172
+ * Collects a billing or shipping address. Fields, order, and validation follow the selected country. Includes street autocomplete (full screen on phones) and methods to read or validate the address.
1157
1173
  * One per "mode": call once per "mode" value; a second "address" with the same "mode" throws. "mode" is fixed at create.
1158
1174
  */
1159
1175
  create(name: "address", options?: AddressElementCreateOptions): AddressElementHandle;
@@ -1171,11 +1187,11 @@ export interface PaymentsHandle {
1171
1187
  */
1172
1188
  create(name: "taxId", options?: TaxIdElementCreateOptions): TaxIdElementHandle;
1173
1189
  /**
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.
1190
+ * Whop's merchant-of-record notice: the buyer's agreement to Whop's Buyer Terms of Service and Privacy Policy, with the Whop wordmark. Required — the payment, card and card fields elements stay in their loading state until it is mounted, and payments cannot be confirmed without it.
1175
1191
  */
1176
1192
  create(name: "branding", options?: BrandingElementCreateOptions): BrandingElementHandle;
1177
1193
  /**
1178
- * Creates a confirmation token for the selected method from your pay button. Pass the checkout's billing details. They must include `email`. Supply `phone` for methods that require it when billing collection is disabled. 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(…)`.
1194
+ * Creates a confirmation token for the selected method from your pay button. Pass the checkout's billing details. They must include `email`. Supply `phone` for methods that require it when billing collection is disabled. Cards also need `name` and an address containing `line1` and `country`. Wallet selections open their sheet during the pay-button interaction. When the account offers in-page bank linking (`bank_debit.bank_connection` on its bank account payment method type), a bank account selection opens Plaid Link during it too, and the call resolves once the buyer has linked an account. That needs a whop.com page or a domain verified as a [payment method domain](/api-reference/beta/payment-method-domains/payment-method-domain), and a Content Security Policy that allows the Plaid hosts `contentSecurityPolicy()` returns. Otherwise the buyer links the account after submitting instead. If the buyer closes the sheet or Link, the call rejects with `payment_request_cancelled`: treat it as a cancel, not a payment error, and let the buyer pay again. Confirm the returned `confirmationToken` server-side, then call `WhopElements.payments.handleNextAction(…)`.
1179
1195
  * Runs on your page (host-side), not in the controller iframe.
1180
1196
  */
1181
1197
  createConfirmationToken: (input: { billingDetails?: { email?: string | undefined; name?: string | undefined; phone?: string | undefined; address?: { country?: string | undefined; line1?: string | undefined; line2?: string | undefined; city?: string | undefined; state?: string | undefined; postal_code?: string | undefined; } | undefined; } | undefined; }) => Promise<{ confirmationToken: string; type: string; }>;
@@ -1252,6 +1268,95 @@ export interface WalletAvailability {
1252
1268
  wallets?: { apple_pay?: WalletDetails | undefined; google_pay?: WalletDetails | undefined; paypal_express?: WalletDetails | undefined; } | undefined;
1253
1269
  }
1254
1270
 
1271
+ /**
1272
+ * Any API `icons` object (or slice of one) qualifies: the component only reads the requested shape's light/dark SVGs.
1273
+ * Declared from the app's `PaymentMethodIconVariants`, referenced by a host-capability surface.
1274
+ */
1275
+ export interface PaymentMethodIconVariants {
1276
+ light: { svg: string; };
1277
+ dark: { svg: string; };
1278
+ }
1279
+
1280
+ /**
1281
+ * Declared from the app's `PaymentMethodIcons`, referenced by a host-capability surface.
1282
+ */
1283
+ export interface PaymentMethodIcons {
1284
+ square?: PaymentMethodIconVariants | null | undefined;
1285
+ card?: PaymentMethodIconVariants | null | undefined;
1286
+ }
1287
+
1288
+ /**
1289
+ * Declared from the app's `PaymentElementPaymentMethod`, referenced by a host-capability surface.
1290
+ */
1291
+ export interface PaymentElementPaymentMethod {
1292
+ /**
1293
+ * The saved payment method the buyer picked, or `null` for a method the buyer is entering now or a balance.
1294
+ */
1295
+ id: string | null;
1296
+ /**
1297
+ * The payment method type: `card`, `klarna`, `apple_pay`, `balance`, and so on.
1298
+ */
1299
+ type: string;
1300
+ /**
1301
+ * The family the type belongs to, such as `card`, `wallet`, `bnpl` or `balance`.
1302
+ */
1303
+ category: string;
1304
+ /**
1305
+ * What to call the pick: a saved method's own label ("Visa •••• 4242", "Cash App $tag"), a balance's name ("Acme", "Personal Balance"), a card's network and last four digits as the buyer types it, or else the method's own name ("Klarna").
1306
+ */
1307
+ displayName: string;
1308
+ /**
1309
+ * The pick's icon art: a saved method's own icons, a typed card's network art, or else the method's icons. Always an icon set, with SVG and PNG renditions.
1310
+ */
1311
+ icons?: PaymentMethodIcons | undefined;
1312
+ /**
1313
+ * What is known about a balance pick beyond its type: `imageUrl` is the balance owner's image, a single raster image URL rather than an icon set, to show in place of `icons`. Absent for other methods, and for a balance whose owner has no image.
1314
+ */
1315
+ balance?: { imageUrl?: string | undefined; } | undefined;
1316
+ /**
1317
+ * What is known about a card pick: a saved card's details, or a typed card's as the buyer types. Absent for other methods.
1318
+ */
1319
+ card?: { network?: string | undefined; last4?: string | undefined; funding?: string | undefined; } | undefined;
1320
+ /**
1321
+ * Whether the method needs a phone in the billing details, including when `fields.phone` disables the element's own phone input.
1322
+ */
1323
+ requiresBillingPhone: boolean;
1324
+ /**
1325
+ * The lowercase two-letter country codes the method can pay from in the charge's currency.
1326
+ */
1327
+ countries: string[];
1328
+ }
1329
+
1330
+ /**
1331
+ * Declared from the app's `PaymentElementChangeEvent`, referenced by a host-capability surface.
1332
+ */
1333
+ export interface PaymentElementChangeEvent {
1334
+ /**
1335
+ * Whether the buyer selected a method and completed its card fields or required inputs. Use it to enable confirmation.
1336
+ */
1337
+ complete: boolean;
1338
+ /**
1339
+ * The selected payment method, or `null` while nothing is selected.
1340
+ */
1341
+ paymentMethod: PaymentElementPaymentMethod | null;
1342
+ /**
1343
+ * @deprecated Use `paymentMethod.type`.
1344
+ */
1345
+ type?: string | undefined;
1346
+ /**
1347
+ * @deprecated Whop prices its buyer service fee itself, so a page has no use for it. Removed in the next major.
1348
+ */
1349
+ supportsBuyerFee?: boolean | undefined;
1350
+ /**
1351
+ * @deprecated Use `paymentMethod.requiresBillingPhone`.
1352
+ */
1353
+ requiresBillingPhone?: boolean | undefined;
1354
+ /**
1355
+ * @deprecated Use `paymentMethod`. Absent when the buyer picks a saved method.
1356
+ */
1357
+ method?: { type: string; category: string; template: string; display_name: string; countries: ({ country: string; min_amount: number | null; max_amount: number | null; })[]; min_amount: number | null; max_amount: number | null; } | undefined;
1358
+ }
1359
+
1255
1360
  /**
1256
1361
  * The slice of a matrix card network the fields need: identity plus the API-served square art.
1257
1362
  * Declared from the app's `CardNetworkArt`, referenced by a host-capability surface.
@@ -1261,6 +1366,16 @@ export interface CardNetworkArt {
1261
1366
  icons: { square: { light: { svg: string; }; dark: { svg: string; }; }; };
1262
1367
  }
1263
1368
 
1369
+ /**
1370
+ * Payment method filters in the API's `payment_method_configuration` format: `disabled` removes types, `enabled` restores offered types, and `include_platform_defaults: false` leaves only enabled types.
1371
+ * Declared from the app's `PaymentMethodConfigurationShape`, referenced by a host-capability surface.
1372
+ */
1373
+ export interface PaymentMethodConfigurationShape {
1374
+ enabled?: string[] | undefined;
1375
+ disabled?: string[] | undefined;
1376
+ include_platform_defaults?: boolean | undefined;
1377
+ }
1378
+
1264
1379
  /**
1265
1380
  * Declared from the app's `PaymentRequestLineItem`, referenced by a host-capability surface.
1266
1381
  */
@@ -1289,12 +1404,20 @@ export interface PaymentRequestShippingOption {
1289
1404
  * Declared from the app's `PaymentRequestAddress`, referenced by a host-capability surface.
1290
1405
  */
1291
1406
  export interface PaymentRequestAddress {
1407
+ /**
1408
+ * The name on the address.
1409
+ */
1410
+ name?: string | undefined;
1292
1411
  line1?: string | undefined;
1293
1412
  line2?: string | undefined;
1294
1413
  city?: string | undefined;
1295
1414
  state?: string | undefined;
1296
1415
  postal_code?: string | undefined;
1297
1416
  country?: string | undefined;
1417
+ /**
1418
+ * The same value as `name`.
1419
+ * @deprecated Use `name`.
1420
+ */
1298
1421
  recipient?: string | undefined;
1299
1422
  phone?: string | undefined;
1300
1423
  }
@@ -1308,7 +1431,17 @@ export interface PaymentRequestResult {
1308
1431
  */
1309
1432
  ctok: string;
1310
1433
  type: "apple_pay" | "google_pay" | "paypal_express";
1434
+ /**
1435
+ * `phone` is E.164 where it parsed against the contact's country, as given otherwise; `country` is the billing country every sheet collects.
1436
+ */
1311
1437
  payer: { email?: string | undefined; name?: string | undefined; phone?: string | undefined; country?: string | undefined; };
1438
+ /**
1439
+ * The full billing address the confirmation token carries, unlike the redacted one the change events carry; `null` when the wallet gave none. Apple Pay and Google Pay give the card's billing address. On PayPal it is the address the buyer picked in PayPal, the one its total was taxed on.
1440
+ */
1441
+ billing: { address: PaymentRequestAddress; } | null;
1442
+ /**
1443
+ * `null` unless `requestShipping` was set. `option` is the selected shipping option: the first offered one until the buyer picks another, and the first again when an answer replaced the options without the picked `id`. Apple Pay and Google Pay set it whenever options were offered, and PayPal never does.
1444
+ */
1312
1445
  shipping: { address?: PaymentRequestAddress | undefined; option?: PaymentRequestShippingOption | undefined; } | null;
1313
1446
  }
1314
1447
 
@@ -1316,6 +1449,9 @@ export interface PaymentRequestResult {
1316
1449
  * Declared from the app's `PaymentRequestError`, referenced by a host-capability surface.
1317
1450
  */
1318
1451
  export interface PaymentRequestError {
1452
+ /**
1453
+ * What a shipping answer refuses. An error in a `billingAddressChange` or `paymentMethodChange` answer refuses the card or method that event asked about, whatever its code.
1454
+ */
1319
1455
  code?: "other" | "shipping_address_invalid" | "shipping_address_unserviceable" | "shipping_option_invalid" | undefined;
1320
1456
  message: string;
1321
1457
  /**
@@ -1330,6 +1466,9 @@ export interface PaymentRequestError {
1330
1466
  export interface PaymentRequestUpdate {
1331
1467
  amount?: number | undefined;
1332
1468
  lineItems?: PaymentRequestLineItem[] | undefined;
1469
+ /**
1470
+ * Replaces the sheet's shipping options. The selected option stays selected while its `id` is still in the list; otherwise the first option becomes the selection, with no `shippingOptionChange`, so price it in the same answer. An empty list changes nothing: refuse an address you can't ship to with a `shipping_address_unserviceable` error instead.
1471
+ */
1333
1472
  shippingOptions?: PaymentRequestShippingOption[] | undefined;
1334
1473
  errors?: PaymentRequestError[] | undefined;
1335
1474
  }
@@ -1339,11 +1478,11 @@ export interface PaymentRequestUpdate {
1339
1478
  */
1340
1479
  export interface ShippingAddressChangeEvent {
1341
1480
  /**
1342
- * Vendor-normalized pre-authorization address. It includes only city, state, postal code, and country.
1481
+ * Vendor-normalized pre-authorization address. It includes only city, state, postal code, and country. Apple Pay cuts the postal code down: a US ZIP code to its first five digits, and a Canadian or UK postal code without its last three characters.
1343
1482
  */
1344
1483
  address: PaymentRequestAddress;
1345
1484
  /**
1346
- * Call this exactly once, or the sheet stalls until the vendor times it out.
1485
+ * Call this exactly once, within 25 seconds. On Apple Pay, Google Pay and PayPal a handler that hasn't answered by then fails the address the way a throwing one does, and its later answer is ignored.
1347
1486
  */
1348
1487
  updateWith: (update: PaymentRequestUpdate) => void;
1349
1488
  }
@@ -1356,6 +1495,9 @@ export interface ShippingOptionChangeEvent {
1356
1495
  * Always includes the selected `id`. It includes the full option when it matches one of yours.
1357
1496
  */
1358
1497
  option: { id: string; } & Partial<PaymentRequestShippingOption>;
1498
+ /**
1499
+ * Call this exactly once, within 25 seconds. On Apple Pay, Google Pay and PayPal a handler that hasn't answered by then refuses the option the way a merchant refusal does, and its later answer is ignored.
1500
+ */
1359
1501
  updateWith: (update: PaymentRequestUpdate) => void;
1360
1502
  }
1361
1503
 
@@ -1373,6 +1515,42 @@ export interface BillingAddressChangeEvent {
1373
1515
  updateWith: (update: PaymentRequestUpdate) => void;
1374
1516
  }
1375
1517
 
1518
+ /**
1519
+ * Declared from the app's `PaymentRequestPaymentMethod`, referenced by a host-capability surface.
1520
+ */
1521
+ export interface PaymentRequestPaymentMethod {
1522
+ /**
1523
+ * `card` on Apple Pay and Google Pay, which report only cards; `paypal` on PayPal.
1524
+ */
1525
+ type: string;
1526
+ /**
1527
+ * What the wallet tells about the card. Before the buyer authorizes, on `paymentMethodChange`, Apple Pay reports its funding, usually without the network, and Google Pay its network. At authorization Apple Pay and Google Pay report both.
1528
+ */
1529
+ card?: { network?: string | undefined; funding?: "credit" | "debit" | "prepaid" | "store" | undefined; } | undefined;
1530
+ /**
1531
+ * The card's redacted billing address (city, state, postal code and country only), which Apple Pay and Google Pay hand over with the card.
1532
+ */
1533
+ billingAddress?: PaymentRequestAddress | undefined;
1534
+ /**
1535
+ * The wallet's own label for the method, such as `Visa 1234`. Apple Pay and Google Pay set it only once the buyer authorizes, so only `paymentAuthorization` carries it. Show it, and don't parse it: the wallets promise no format.
1536
+ */
1537
+ displayName?: string | undefined;
1538
+ }
1539
+
1540
+ /**
1541
+ * Declared from the app's `PaymentMethodChangeEvent`, referenced by a host-capability surface.
1542
+ */
1543
+ export interface PaymentMethodChangeEvent {
1544
+ /**
1545
+ * The method the buyer selected, as the wallet describes it before authorization.
1546
+ */
1547
+ paymentMethod: PaymentRequestPaymentMethod;
1548
+ /**
1549
+ * Call this exactly once: `amount` and `lineItems` reprice the sheet for the method, `updateWith({})` keeps the total, and `errors` refuses the method. An event left unanswered for 10 seconds refuses the method.
1550
+ */
1551
+ updateWith: (update: PaymentRequestUpdate) => void;
1552
+ }
1553
+
1376
1554
  /**
1377
1555
  * Declared from the app's `PromoCodeUpdate`, referenced by a host-capability surface.
1378
1556
  */
@@ -1386,11 +1564,11 @@ export interface PromoCodeUpdate {
1386
1564
  */
1387
1565
  lineItems?: PaymentRequestLineItem[] | undefined;
1388
1566
  /**
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.
1567
+ * 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; otherwise the first option becomes the selection, with no `shippingOptionChange`. Send `amount` as well when the selected option's price changes, since the total doesn't follow on its own. An empty list changes nothing.
1390
1568
  */
1391
1569
  shippingOptions?: PaymentRequestShippingOption[] | undefined;
1392
1570
  /**
1393
- * A caption for the applied code, where the sheet captions codes (Google Pay).
1571
+ * A caption shown beside the applied code in Google Pay. Apple Pay's coupon field has no caption, so put anything the buyer must see in a line item label.
1394
1572
  */
1395
1573
  appliedDescription?: string | undefined;
1396
1574
  /**
@@ -1404,7 +1582,7 @@ export interface PromoCodeUpdate {
1404
1582
  */
1405
1583
  export interface PromoCodeChangeEvent {
1406
1584
  /**
1407
- * The code now in the sheet's promo field, or null when the buyer removed it.
1585
+ * The code now in the sheet's promo field, or null when the buyer removed it. Replacing an applied code is one event with the new code, never a removal first.
1408
1586
  */
1409
1587
  code: string | null;
1410
1588
  /**
@@ -1412,3 +1590,51 @@ export interface PromoCodeChangeEvent {
1412
1590
  */
1413
1591
  updateWith: (update: PromoCodeUpdate) => void;
1414
1592
  }
1593
+
1594
+ /**
1595
+ * Declared from the app's `PaymentAuthorizationResponse`, referenced by a host-capability surface.
1596
+ */
1597
+ export interface PaymentAuthorizationResponse {
1598
+ /**
1599
+ * `true` creates the confirmation token. `false` refuses the payment.
1600
+ */
1601
+ approved: boolean;
1602
+ /**
1603
+ * Shown to the buyer when you refuse, in the sheet that took the authorization.
1604
+ */
1605
+ message?: string | undefined;
1606
+ }
1607
+
1608
+ /**
1609
+ * Declared from the app's `PaymentAuthorizationEvent`, referenced by a host-capability surface.
1610
+ */
1611
+ export interface PaymentAuthorizationEvent {
1612
+ /**
1613
+ * The wallet the buyer authorized in.
1614
+ */
1615
+ type: "apple_pay" | "google_pay" | "paypal_express";
1616
+ /**
1617
+ * The payer, as the result will carry it.
1618
+ */
1619
+ payer: { email?: string | undefined; name?: string | undefined; phone?: string | undefined; country?: string | undefined; };
1620
+ /**
1621
+ * The method the buyer authorized. Its billing address is redacted to city, state, postal code and country, as `paymentMethodChange` carries it.
1622
+ */
1623
+ paymentMethod: PaymentRequestPaymentMethod;
1624
+ /**
1625
+ * `null` unless `requestShipping` was set. Otherwise the address and option the result will carry.
1626
+ */
1627
+ shipping: { address?: PaymentRequestAddress | undefined; option?: PaymentRequestShippingOption | undefined; } | null;
1628
+ /**
1629
+ * The total the buyer authorized, in minor units.
1630
+ */
1631
+ amount: number;
1632
+ /**
1633
+ * The line items the sheet showed under that total.
1634
+ */
1635
+ lineItems: PaymentRequestLineItem[];
1636
+ /**
1637
+ * Call this exactly once. `{ approved: true }` creates the confirmation token. Anything else refuses the payment, and no token is created.
1638
+ */
1639
+ respondWith: (response: PaymentAuthorizationResponse) => void;
1640
+ }
@@ -129,6 +129,26 @@ export interface CapabilitiesElementProps {
129
129
  * @default false
130
130
  */
131
131
  hideCapabilities?: boolean;
132
+ /**
133
+ * Hide the Payouts capability row.
134
+ * @default false
135
+ */
136
+ hidePayouts?: boolean;
137
+ /**
138
+ * Hide the Bank deposits capability row.
139
+ * @default false
140
+ */
141
+ hideBankDeposits?: boolean;
142
+ /**
143
+ * Hide the Whop Card capability row.
144
+ * @default false
145
+ */
146
+ hideCards?: boolean;
147
+ /**
148
+ * Hide the Ads capability row.
149
+ * @default false
150
+ */
151
+ hideAds?: boolean;
132
152
  }
133
153
 
134
154
  /**
@@ -170,6 +190,26 @@ export interface CapabilitiesElementCreateOptions {
170
190
  * @default false
171
191
  */
172
192
  hideCapabilities?: boolean;
193
+ /**
194
+ * Hide the Payouts capability row.
195
+ * @default false
196
+ */
197
+ hidePayouts?: boolean;
198
+ /**
199
+ * Hide the Bank deposits capability row.
200
+ * @default false
201
+ */
202
+ hideBankDeposits?: boolean;
203
+ /**
204
+ * Hide the Whop Card capability row.
205
+ * @default false
206
+ */
207
+ hideCards?: boolean;
208
+ /**
209
+ * Hide the Ads capability row.
210
+ * @default false
211
+ */
212
+ hideAds?: boolean;
173
213
  /**
174
214
  * The viewer pressed a verify button. The element never navigates — mount your own verification, such as this namespace’s `kyc` element, in answer to this.
175
215
  */
@@ -129,6 +129,26 @@ export interface CapabilitiesElementProps {
129
129
  * @default false
130
130
  */
131
131
  hideCapabilities?: boolean;
132
+ /**
133
+ * Hide the Payouts capability row.
134
+ * @default false
135
+ */
136
+ hidePayouts?: boolean;
137
+ /**
138
+ * Hide the Bank deposits capability row.
139
+ * @default false
140
+ */
141
+ hideBankDeposits?: boolean;
142
+ /**
143
+ * Hide the Whop Card capability row.
144
+ * @default false
145
+ */
146
+ hideCards?: boolean;
147
+ /**
148
+ * Hide the Ads capability row.
149
+ * @default false
150
+ */
151
+ hideAds?: boolean;
132
152
  }
133
153
 
134
154
  /**
@@ -170,6 +190,26 @@ export interface CapabilitiesElementCreateOptions {
170
190
  * @default false
171
191
  */
172
192
  hideCapabilities?: boolean;
193
+ /**
194
+ * Hide the Payouts capability row.
195
+ * @default false
196
+ */
197
+ hidePayouts?: boolean;
198
+ /**
199
+ * Hide the Bank deposits capability row.
200
+ * @default false
201
+ */
202
+ hideBankDeposits?: boolean;
203
+ /**
204
+ * Hide the Whop Card capability row.
205
+ * @default false
206
+ */
207
+ hideCards?: boolean;
208
+ /**
209
+ * Hide the Ads capability row.
210
+ * @default false
211
+ */
212
+ hideAds?: boolean;
173
213
  /**
174
214
  * The viewer pressed a verify button. The element never navigates — mount your own verification, such as this namespace’s `kyc` element, in answer to this.
175
215
  */