@appfunnel-dev/sdk 2.0.1 → 2.1.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # Changelog
 
+## 2.1.0
+
+### `methods` is now `options`, and it styles the wallet button
+
+`<Checkout>` and `<CheckoutButton>` take `options` where they took `methods`. Everything `methods`
+did works the same under the new name, and `methods` keeps working.
+
+New in `options`: `express`, the wallet button. It takes Stripe's own Express Checkout Element
+options — which wallets show (`paymentMethods`), how many buttons per row and how many rows
+(`layout`), and the buttons' height, colour and label (`buttonHeight`, `buttonTheme`, `buttonType`).
+
+```tsx
+<Checkout
+  offering="plan"
+  options={{ express: { paymentMethods: { link: 'auto' }, layout: { maxColumns: 1 }, buttonHeight: 48 } }}
+/>
+```
+
+### The wallet button offers Apple Pay and Google Pay only
+
+The wallet button used to offer every wallet the Stripe account had turned on, Link, PayPal, Amazon
+Pay and Klarna included. It now offers Apple Pay and Google Pay, both `'always'`; the others are off
+unless a funnel names them in `options.express.paymentMethods`. Anything you name is merged over
+that default, one wallet at a time.
+
+`'always'` shows Apple Pay and Google Pay wherever the browser supports them, even before the
+visitor has added a card. Set `'auto'` to show them only where a card is ready to pay.
+
 ## 2.0.1
 
 A checkout that names no offering is now caught, in both places it can be caught.

package/dist/{checkout-B1K6ozwk.d.ts → checkout-BPYU4wXF.d.ts}

@@ -1,5 +1,5 @@
 import { ReactNode, ComponentType, ReactElement } from 'react';
-import { Appearance } from '@stripe/stripe-js';
+import { Appearance, StripeExpressCheckoutElementOptions } from '@stripe/stripe-js';
 import { CheckoutSettings } from '@paddle/paddle-js';
 import { c as CheckoutProvider, b as CheckoutIntent, d as CheckoutSurface, U as UpsellKind, C as CheckoutError, a as CheckoutErrorCategory, h as PaymentMode, H as HostedPaymentMode, e as OpensIn, i as PaymentRendering } from './capabilities-BtnJi2JD.js';
 
@@ -99,10 +99,11 @@ interface CheckoutRequest {
      */
     appearance?: CheckoutAppearance;
     /**
-     * How the provider LISTS the payment methods — see {@link CheckoutMethods}. Display-only, same
-     * as `appearance`: it never leaves the browser.
+     * How the provider LISTS the payment methods and draws the wallet button — the author's
+     * `options` (see {@link CheckoutOptions}). Display-only, same as `appearance`: it never leaves
+     * the browser.
      */
-    methods?: CheckoutMethods;
+    methods?: CheckoutOptions;
     /**
      * Classes for the buttons the SDK renders itself — see {@link CheckoutClassNames}. Display-only.
      */
@@ -162,22 +163,22 @@ interface CheckoutAppearance {
     paddle?: Pick<CheckoutSettings, 'theme' | 'frameStyle' | 'frameInitialHeight'>;
 }
 /**
- * How the list of payment methods is PRESENTED, in the surfaces the SDK mounts itself.
+ * How the payment methods are PRESENTED — the method list and the wallet button — in the surfaces
+ * the SDK mounts itself.
  *
  * Normalized, unlike {@link CheckoutAppearance} — and the difference is real rather than an
  * inconsistency. Appearance is a token bag whose true cross-provider intersection is roughly empty,
  * so a shared shape there would be a lie. "Stack the methods and start them collapsed" is one idea
  * with one meaning, so it gets one spelling.
  *
- * The DEFAULT is `{ layout: 'accordion', collapsed: true }`: the buyer sees the methods they can pay
- * with — wallets included — and picks one before any field appears, instead of landing on an open
- * card form with the wallet they'd have preferred hidden below it.
+ * The DEFAULT is `{ layout: 'accordion', collapsed: false }` — the first method open — and a wallet
+ * button offering Apple Pay and Google Pay (see {@link CheckoutOptions.express}).
  *
  * ```tsx
  * <Checkout offering="plan" />                                          // accordion, collapsed
- * <Checkout offering="plan" methods={{ collapsed: false }} />           // first method open
- * <Checkout offering="plan" methods={{ layout: 'tabs' }} />             // methods across the top
- * <Checkout offering="plan" methods={{ order: ['apple_pay', 'card'] }} /> // lead with Apple Pay
+ * <Checkout offering="plan" options={{ collapsed: false }} />           // first method open
+ * <Checkout offering="plan" options={{ layout: 'tabs' }} />             // methods across the top
+ * <Checkout offering="plan" options={{ order: ['apple_pay', 'card'] }} /> // lead with Apple Pay
  * ```
  *
  * **Only applies where the SDK mounts the method list** — `payment="card"`, and the `payment="auto"`
@@ -186,7 +187,7 @@ interface CheckoutAppearance {
  * setting. Wallets also have to be able to appear at all before ordering them means anything — that
  * needs the domain registered with Stripe as a payment method domain.
  */
-interface CheckoutMethods {
+interface CheckoutOptions {
     /** `'accordion'` (default) stacks the methods as rows; `'tabs'` runs them across the top. */
     layout?: 'accordion' | 'tabs';
     /** Start with every method closed, so the buyer chooses before any fields render. Default `true`. */
@@ -208,7 +209,32 @@ interface CheckoutMethods {
      * nowhere else to go on this screen. Leave it on unless the funnel is deliberately wallet-only.
      */
     payAnotherWay?: boolean;
+    /**
+     * The wallet BUTTON — Stripe's Express Checkout Element options, passed through as-is: which
+     * wallets it offers (`paymentMethods`), how many buttons per row and how many rows (`layout`),
+     * and the buttons' height, colour and label (`buttonHeight`, `buttonTheme`, `buttonType`).
+     *
+     * ```tsx
+     * <Checkout offering="plan" options={{ express: { paymentMethods: { link: 'auto' } } }} />
+     * <Checkout offering="plan" options={{ express: { layout: { maxColumns: 1 }, buttonHeight: 48 } }} />
+     * ```
+     *
+     * `paymentMethods` defaults to Apple Pay and Google Pay (`'always'`) with Link, PayPal, Amazon Pay
+     * and Klarna off (`'never'`), merged per wallet over that default — `{ link: 'auto' }` adds Link
+     * and leaves the rest as they were. `'always'` shows Apple Pay / Google Pay wherever the browser
+     * supports them, even before the buyer has added a card; `'auto'` only where one is ready to pay.
+     * Everything else unset is Stripe's default. Stripe only.
+     */
+    express?: CheckoutExpressOptions;
 }
+/**
+ * The part of Stripe's `StripeExpressCheckoutElementOptions` that decides what the wallet button
+ * offers and how it LOOKS. The rest (line items, shipping, email and phone collection) belongs to the
+ * charge, which the SDK sets, so it isn't offered here.
+ */
+type CheckoutExpressOptions = Pick<StripeExpressCheckoutElementOptions, 'paymentMethods' | 'paymentMethodOrder' | 'layout' | 'buttonHeight' | 'buttonTheme' | 'buttonType'>;
+/** @deprecated Renamed to {@link CheckoutOptions}. */
+type CheckoutMethods = CheckoutOptions;
 interface CheckoutResult {
     ok: boolean;
     error?: CheckoutError;
@@ -508,9 +534,11 @@ interface CheckoutCommonProps extends Omit<UseCheckoutOptions, 'managed'> {
      * fields render in a cross-origin iframe the funnel's CSS can't reach.
      */
     appearance?: CheckoutAppearance;
-    /** How the provider lists the payment methods ({@link CheckoutMethods}) — accordion + collapsed
-     *  by default. Ignored on surfaces where the provider owns the whole UI. */
-    methods?: CheckoutMethods;
+    /** How the payment methods are listed and how the wallet button looks ({@link CheckoutOptions}).
+     *  Ignored on surfaces where the provider owns the whole UI. */
+    options?: CheckoutOptions;
+    /** @deprecated Renamed to `options`. */
+    methods?: CheckoutOptions;
 }
 /**
  * The `managed` × `payment` constraint, as a type rather than a runtime rejection.
@@ -747,4 +775,4 @@ declare function UpsellButton(props: UpsellButtonProps): ReactNode;
  */
 declare function CheckoutResume(options?: UseCheckoutOptions): ReactNode;
 
-export { useCheckout as A, type CheckoutDriverContext as C, type FailureModalProps as F, type MockDriverOptions as M, type OnFailedMap as O, type PaymentAxis as P, type TriggerAxis as T, UpsellButton as U, type CheckoutDriver as a, Checkout as b, type CheckoutAppearance as c, CheckoutButton as d, type CheckoutButtonProps as e, type CheckoutCallbacks as f, type CheckoutClassNames as g, type CheckoutCommonProps as h, type CheckoutHandle as i, type CheckoutInlineProps as j, type CheckoutMethods as k, type CheckoutProps as l, type CheckoutRequest as m, type CheckoutResult as n, CheckoutResume as o, CheckoutSpinner as p, type CheckoutStatus as q, type FailureRoute as r, type OpensAxis as s, type TriggerState as t, type UpsellButtonProps as u, type UpsellCommonProps as v, type UpsellRecovery as w, type UseCheckoutOptions as x, createMockDriver as y, driverWithEmail as z };
+export { createMockDriver as A, driverWithEmail as B, type CheckoutDriverContext as C, useCheckout as D, type FailureModalProps as F, type MockDriverOptions as M, type OnFailedMap as O, type PaymentAxis as P, type TriggerAxis as T, UpsellButton as U, type CheckoutDriver as a, Checkout as b, type CheckoutAppearance as c, CheckoutButton as d, type CheckoutButtonProps as e, type CheckoutCallbacks as f, type CheckoutClassNames as g, type CheckoutCommonProps as h, type CheckoutExpressOptions as i, type CheckoutHandle as j, type CheckoutInlineProps as k, type CheckoutMethods as l, type CheckoutOptions as m, type CheckoutProps as n, type CheckoutRequest as o, type CheckoutResult as p, CheckoutResume as q, CheckoutSpinner as r, type CheckoutStatus as s, type FailureRoute as t, type OpensAxis as u, type TriggerState as v, type UpsellButtonProps as w, type UpsellCommonProps as x, type UpsellRecovery as y, type UseCheckoutOptions as z };

package/dist/{checkout-C4tFUEdF.d.cts → checkout-BzP__Mxe.d.cts}

@@ -1,5 +1,5 @@
 import { ReactNode, ComponentType, ReactElement } from 'react';
-import { Appearance } from '@stripe/stripe-js';
+import { Appearance, StripeExpressCheckoutElementOptions } from '@stripe/stripe-js';
 import { CheckoutSettings } from '@paddle/paddle-js';
 import { c as CheckoutProvider, b as CheckoutIntent, d as CheckoutSurface, U as UpsellKind, C as CheckoutError, a as CheckoutErrorCategory, h as PaymentMode, H as HostedPaymentMode, e as OpensIn, i as PaymentRendering } from './capabilities-BtnJi2JD.cjs';
 
@@ -99,10 +99,11 @@ interface CheckoutRequest {
      */
     appearance?: CheckoutAppearance;
     /**
-     * How the provider LISTS the payment methods — see {@link CheckoutMethods}. Display-only, same
-     * as `appearance`: it never leaves the browser.
+     * How the provider LISTS the payment methods and draws the wallet button — the author's
+     * `options` (see {@link CheckoutOptions}). Display-only, same as `appearance`: it never leaves
+     * the browser.
      */
-    methods?: CheckoutMethods;
+    methods?: CheckoutOptions;
     /**
      * Classes for the buttons the SDK renders itself — see {@link CheckoutClassNames}. Display-only.
      */
@@ -162,22 +163,22 @@ interface CheckoutAppearance {
     paddle?: Pick<CheckoutSettings, 'theme' | 'frameStyle' | 'frameInitialHeight'>;
 }
 /**
- * How the list of payment methods is PRESENTED, in the surfaces the SDK mounts itself.
+ * How the payment methods are PRESENTED — the method list and the wallet button — in the surfaces
+ * the SDK mounts itself.
  *
  * Normalized, unlike {@link CheckoutAppearance} — and the difference is real rather than an
  * inconsistency. Appearance is a token bag whose true cross-provider intersection is roughly empty,
  * so a shared shape there would be a lie. "Stack the methods and start them collapsed" is one idea
  * with one meaning, so it gets one spelling.
  *
- * The DEFAULT is `{ layout: 'accordion', collapsed: true }`: the buyer sees the methods they can pay
- * with — wallets included — and picks one before any field appears, instead of landing on an open
- * card form with the wallet they'd have preferred hidden below it.
+ * The DEFAULT is `{ layout: 'accordion', collapsed: false }` — the first method open — and a wallet
+ * button offering Apple Pay and Google Pay (see {@link CheckoutOptions.express}).
  *
  * ```tsx
  * <Checkout offering="plan" />                                          // accordion, collapsed
- * <Checkout offering="plan" methods={{ collapsed: false }} />           // first method open
- * <Checkout offering="plan" methods={{ layout: 'tabs' }} />             // methods across the top
- * <Checkout offering="plan" methods={{ order: ['apple_pay', 'card'] }} /> // lead with Apple Pay
+ * <Checkout offering="plan" options={{ collapsed: false }} />           // first method open
+ * <Checkout offering="plan" options={{ layout: 'tabs' }} />             // methods across the top
+ * <Checkout offering="plan" options={{ order: ['apple_pay', 'card'] }} /> // lead with Apple Pay
  * ```
  *
  * **Only applies where the SDK mounts the method list** — `payment="card"`, and the `payment="auto"`
@@ -186,7 +187,7 @@ interface CheckoutAppearance {
  * setting. Wallets also have to be able to appear at all before ordering them means anything — that
  * needs the domain registered with Stripe as a payment method domain.
  */
-interface CheckoutMethods {
+interface CheckoutOptions {
     /** `'accordion'` (default) stacks the methods as rows; `'tabs'` runs them across the top. */
     layout?: 'accordion' | 'tabs';
     /** Start with every method closed, so the buyer chooses before any fields render. Default `true`. */
@@ -208,7 +209,32 @@ interface CheckoutMethods {
      * nowhere else to go on this screen. Leave it on unless the funnel is deliberately wallet-only.
      */
     payAnotherWay?: boolean;
+    /**
+     * The wallet BUTTON — Stripe's Express Checkout Element options, passed through as-is: which
+     * wallets it offers (`paymentMethods`), how many buttons per row and how many rows (`layout`),
+     * and the buttons' height, colour and label (`buttonHeight`, `buttonTheme`, `buttonType`).
+     *
+     * ```tsx
+     * <Checkout offering="plan" options={{ express: { paymentMethods: { link: 'auto' } } }} />
+     * <Checkout offering="plan" options={{ express: { layout: { maxColumns: 1 }, buttonHeight: 48 } }} />
+     * ```
+     *
+     * `paymentMethods` defaults to Apple Pay and Google Pay (`'always'`) with Link, PayPal, Amazon Pay
+     * and Klarna off (`'never'`), merged per wallet over that default — `{ link: 'auto' }` adds Link
+     * and leaves the rest as they were. `'always'` shows Apple Pay / Google Pay wherever the browser
+     * supports them, even before the buyer has added a card; `'auto'` only where one is ready to pay.
+     * Everything else unset is Stripe's default. Stripe only.
+     */
+    express?: CheckoutExpressOptions;
 }
+/**
+ * The part of Stripe's `StripeExpressCheckoutElementOptions` that decides what the wallet button
+ * offers and how it LOOKS. The rest (line items, shipping, email and phone collection) belongs to the
+ * charge, which the SDK sets, so it isn't offered here.
+ */
+type CheckoutExpressOptions = Pick<StripeExpressCheckoutElementOptions, 'paymentMethods' | 'paymentMethodOrder' | 'layout' | 'buttonHeight' | 'buttonTheme' | 'buttonType'>;
+/** @deprecated Renamed to {@link CheckoutOptions}. */
+type CheckoutMethods = CheckoutOptions;
 interface CheckoutResult {
     ok: boolean;
     error?: CheckoutError;
@@ -508,9 +534,11 @@ interface CheckoutCommonProps extends Omit<UseCheckoutOptions, 'managed'> {
      * fields render in a cross-origin iframe the funnel's CSS can't reach.
      */
     appearance?: CheckoutAppearance;
-    /** How the provider lists the payment methods ({@link CheckoutMethods}) — accordion + collapsed
-     *  by default. Ignored on surfaces where the provider owns the whole UI. */
-    methods?: CheckoutMethods;
+    /** How the payment methods are listed and how the wallet button looks ({@link CheckoutOptions}).
+     *  Ignored on surfaces where the provider owns the whole UI. */
+    options?: CheckoutOptions;
+    /** @deprecated Renamed to `options`. */
+    methods?: CheckoutOptions;
 }
 /**
  * The `managed` × `payment` constraint, as a type rather than a runtime rejection.
@@ -747,4 +775,4 @@ declare function UpsellButton(props: UpsellButtonProps): ReactNode;
  */
 declare function CheckoutResume(options?: UseCheckoutOptions): ReactNode;
 
-export { useCheckout as A, type CheckoutDriverContext as C, type FailureModalProps as F, type MockDriverOptions as M, type OnFailedMap as O, type PaymentAxis as P, type TriggerAxis as T, UpsellButton as U, type CheckoutDriver as a, Checkout as b, type CheckoutAppearance as c, CheckoutButton as d, type CheckoutButtonProps as e, type CheckoutCallbacks as f, type CheckoutClassNames as g, type CheckoutCommonProps as h, type CheckoutHandle as i, type CheckoutInlineProps as j, type CheckoutMethods as k, type CheckoutProps as l, type CheckoutRequest as m, type CheckoutResult as n, CheckoutResume as o, CheckoutSpinner as p, type CheckoutStatus as q, type FailureRoute as r, type OpensAxis as s, type TriggerState as t, type UpsellButtonProps as u, type UpsellCommonProps as v, type UpsellRecovery as w, type UseCheckoutOptions as x, createMockDriver as y, driverWithEmail as z };
+export { createMockDriver as A, driverWithEmail as B, type CheckoutDriverContext as C, useCheckout as D, type FailureModalProps as F, type MockDriverOptions as M, type OnFailedMap as O, type PaymentAxis as P, type TriggerAxis as T, UpsellButton as U, type CheckoutDriver as a, Checkout as b, type CheckoutAppearance as c, CheckoutButton as d, type CheckoutButtonProps as e, type CheckoutCallbacks as f, type CheckoutClassNames as g, type CheckoutCommonProps as h, type CheckoutExpressOptions as i, type CheckoutHandle as j, type CheckoutInlineProps as k, type CheckoutMethods as l, type CheckoutOptions as m, type CheckoutProps as n, type CheckoutRequest as o, type CheckoutResult as p, CheckoutResume as q, CheckoutSpinner as r, type CheckoutStatus as s, type FailureRoute as t, type OpensAxis as u, type TriggerState as v, type UpsellButtonProps as w, type UpsellCommonProps as x, type UpsellRecovery as y, type UseCheckoutOptions as z };

package/dist/{chunk-WCBVSZHJ.js → chunk-AW2YURFE.js}

@@ -7640,6 +7640,7 @@ function Checkout(props) {
     payment,
     className,
     appearance,
+    options: displayOptions,
     methods,
     classNames,
     ...options
@@ -7650,7 +7651,8 @@ function Checkout(props) {
     offering,
     className,
     appearance,
-    methods,
+    // `options` is the prop; `methods` is its old name, still accepted.
+    methods: displayOptions ?? methods,
     classNames,
     as: "Checkout",
     // The axes resolve, and the result is always an INLINE rendering: `<Checkout>` is the payment
@@ -7668,6 +7670,7 @@ function CheckoutButton(props) {
     children,
     className,
     appearance,
+    options: displayOptions,
     methods,
     classNames,
     ...options
@@ -7678,7 +7681,7 @@ function CheckoutButton(props) {
     offering,
     className,
     appearance,
-    methods,
+    methods: displayOptions ?? methods,
     classNames,
     asChild,
     children,
@@ -9532,5 +9535,5 @@ function useGroupProgress() {
 }
 
 export { Checkout, CheckoutButton, CheckoutResume, CheckoutSpinner, EmbedBridge, FunnelProvider, FunnelToaster, FunnelView, Modal, Sheet, UpsellButton, VariableStore, attachBus, buildAcquisition, buildContext, createBus, createConsoleTracker, createFunnelStore, createMockDriver, defineModal, dismissAllModals, driverWithEmail, ensureCheckoutButtonStyles, exposurePayload, hideModal, isValidEmail, newEventId, registerModal, removeModal, showModal, toast, unregisterModal, useActiveLocale, useCheckout, useClickIds, useContextValue, useData, useDevice, useExperiment, useField, useFunnel, useGroupProgress, useLocale, useMarketingConsent, useModal, useNavigation, useOffering, useOfferings, usePage, useResponse, useSystem, useTracker, useTranslation, useUserAttribute, useUtm, withBus };
-//# sourceMappingURL=chunk-WCBVSZHJ.js.map
-//# sourceMappingURL=chunk-WCBVSZHJ.js.map
+//# sourceMappingURL=chunk-AW2YURFE.js.map
+//# sourceMappingURL=chunk-AW2YURFE.js.map