@funnelsgrove/payments 0.39.0 → 0.41.0

package/README.md

@@ -41,6 +41,8 @@ elsewhere, preselected, with Stripe's own button, and the card form as the secon
   `checkoutAnalytics`, a complete `StripeWalletFirstCheckoutCopy` from the funnel's
   content, and `themeColor`/`buttonColor`.
 - The card form has no ZIP or terms text.
+- `onCancel` runs when the visitor closes the Apple Pay or Google Pay sheet without paying,
+  for example to show an extra discount. The form is unlocked again by then.
 - Where the browser cannot pay with that wallet, the wallet stays first and its slot shows
   `walletUnavailableNote` (`{wallet}` is replaced with the wallet name). The card remains
   one tap away. This is deliberate: the layout must not move.

package/dist/generated/package-version.d.ts

@@ -1 +1 @@
-export declare const PAYMENTS_PACKAGE_VERSION = "0.39.0";
+export declare const PAYMENTS_PACKAGE_VERSION = "0.41.0";

package/dist/generated/package-version.js

@@ -1,2 +1,2 @@
 // Generated by scripts/generate-package-version.mjs.
-export const PAYMENTS_PACKAGE_VERSION = "0.39.0";
+export const PAYMENTS_PACKAGE_VERSION = "0.41.0";

package/dist/providers/stripe/components/StripeWalletFirstCheckout.d.ts

@@ -26,6 +26,8 @@ export type StripeWalletFirstCheckoutProps = {
     copy: StripeWalletFirstCheckoutCopy;
     customerEmail: string;
     customerName?: string | null;
+    /** The visitor closed the Apple Pay or Google Pay sheet without paying, e.g. to offer a discount. */
+    onCancel?: () => void;
     onError?: (message: string | null) => void;
     onSuccess?: () => void | Promise<void>;
     returnUrl: string;

package/dist/providers/stripe/components/StripeWalletFirstCheckout.js

@@ -55,7 +55,7 @@ export function StripeWalletFirstCheckout(props) {
     }, [checkoutAnalytics, checkoutSessionId, clientSecret, selected]);
     return (_jsxs(_Fragment, { children: [options && stripePromise ? (_jsx(CheckoutProvider, { stripe: stripePromise, options: options, children: _jsx(StripeWalletFirstCheckoutForm, Object.assign({}, props, { wallet: wallet, selected: selected, onSelect: setSelected, style: style })) }, options.clientSecret)) : (_jsx(CheckoutLayout, { copy: copy, wallet: wallet, selected: selected, onSelect: setSelected, disabled: false, style: style, walletSlot: _jsx("span", { className: 'wfc-progress', role: 'status', "aria-label": copy.processingLabel }), cardBody: _jsx("span", { className: 'wfc-progress wfc-progress--form', "aria-hidden": 'true' }) })), _jsx("style", { children: stripeWalletFirstCheckoutStyles })] }));
 }
-function StripeWalletFirstCheckoutForm({ amountCents, checkoutAnalytics, checkoutSessionId, copy, customerEmail, customerName, onError, onSuccess, returnUrl, summaryLabel, wallet, selected, onSelect, style, }) {
+function StripeWalletFirstCheckoutForm({ amountCents, checkoutAnalytics, checkoutSessionId, copy, customerEmail, customerName, onCancel, onError, onSuccess, returnUrl, summaryLabel, wallet, selected, onSelect, style, }) {
     const checkoutState = useCheckout();
     // null until Stripe answers; the slot shows progress at the button's height meanwhile.
     const [walletAvailable, setWalletAvailable] = useState(null);
@@ -167,7 +167,7 @@ function StripeWalletFirstCheckoutForm({ amountCents, checkoutAnalytics, checkou
     // where the customer paid, until the success screen takes over.
     const paymentStatus = completed ? copy.paymentConfirmed : providerConfirmed ? copy.verifyingPayment : null;
     const locked = Boolean(paymentStatus) && !error;
-    return (_jsx(CheckoutLayout, { copy: copy, wallet: wallet, selected: selected, onSelect: onSelect, disabled: submitting || walletConfirming || locked, style: style, walletNote: selected === 'wallet' ? paymentStatus : null, walletSlot: _jsxs(_Fragment, { children: [_jsx("div", { className: 'wfc-wallet-button', "data-ready": walletAvailable === true, children: _jsx(StripeCheckoutExpressCheckoutButton, { amountCents: amountCents, availabilityPaymentMethods: [wallet], beforeConfirm: async () => { setWalletConfirming(true); return customerEmail || null; }, checkoutAnalytics: checkoutAnalytics, checkoutSessionId: checkoutSessionId, confirmEmail: false, customerEmail: customerEmail, customerName: customerName, onAvailabilityChange: setWalletAvailable, onCancel: () => setWalletConfirming(false), onEmbeddedComplete: () => setCompleted(true), onError: message => { setWalletConfirming(false); showError(message, undefined, true); }, onPaymentRejected: () => { setWalletConfirming(false); onSelect('card'); }, onSuccess: () => trackSuccess(), onVerificationPending: () => setProviderConfirmed(true), options: expressOptions, returnUrl: returnUrl, summaryLabel: summaryLabel }) }), walletAvailable === null ? _jsx("span", { className: 'wfc-progress wfc-progress--overlay', role: 'status', "aria-label": copy.processingLabel }) : null, walletAvailable === false ? _jsx("p", { className: 'wfc-wallet-unavailable', role: 'status', children: copy.walletUnavailableNote.replace('{wallet}', copy.walletLabels[wallet]) }) : null] }), cardBody: _jsxs("form", { className: 'wfc-card-form', onSubmit: event => void submitCard(event), children: [_jsx(PaymentElement, { options: paymentElementOptions, onChange: event => setPaymentElementComplete(event.complete), onReady: () => setPaymentElementReady(true) }), _jsx("button", { type: 'submit', className: 'wfc-submit', disabled: locked || submitting || !paymentElementReady, "aria-live": 'polite', children: locked && paymentStatus ? paymentStatus : submitting ? copy.processingLabel : copy.cardSubmitLabel }), _jsx("p", { className: 'wfc-secure', children: copy.secureNote })] }), footer: error ? _jsx("p", { className: 'wfc-error', role: 'alert', children: error }) : null }));
+    return (_jsx(CheckoutLayout, { copy: copy, wallet: wallet, selected: selected, onSelect: onSelect, disabled: submitting || walletConfirming || locked, style: style, walletNote: selected === 'wallet' ? paymentStatus : null, walletSlot: _jsxs(_Fragment, { children: [_jsx("div", { className: 'wfc-wallet-button', "data-ready": walletAvailable === true, children: _jsx(StripeCheckoutExpressCheckoutButton, { amountCents: amountCents, availabilityPaymentMethods: [wallet], beforeConfirm: async () => { setWalletConfirming(true); return customerEmail || null; }, checkoutAnalytics: checkoutAnalytics, checkoutSessionId: checkoutSessionId, confirmEmail: false, customerEmail: customerEmail, customerName: customerName, onAvailabilityChange: setWalletAvailable, onCancel: () => { setWalletConfirming(false); onCancel === null || onCancel === void 0 ? void 0 : onCancel(); }, onEmbeddedComplete: () => setCompleted(true), onError: message => { setWalletConfirming(false); showError(message, undefined, true); }, onPaymentRejected: () => { setWalletConfirming(false); onSelect('card'); }, onSuccess: () => trackSuccess(), onVerificationPending: () => setProviderConfirmed(true), options: expressOptions, returnUrl: returnUrl, summaryLabel: summaryLabel }) }), walletAvailable === null ? _jsx("span", { className: 'wfc-progress wfc-progress--overlay', role: 'status', "aria-label": copy.processingLabel }) : null, walletAvailable === false ? _jsx("p", { className: 'wfc-wallet-unavailable', role: 'status', children: copy.walletUnavailableNote.replace('{wallet}', copy.walletLabels[wallet]) }) : null] }), cardBody: _jsxs("form", { className: 'wfc-card-form', onSubmit: event => void submitCard(event), children: [_jsx(PaymentElement, { options: paymentElementOptions, onChange: event => setPaymentElementComplete(event.complete), onReady: () => setPaymentElementReady(true) }), _jsx("button", { type: 'submit', className: 'wfc-submit', disabled: locked || submitting || !paymentElementReady, "aria-live": 'polite', children: locked && paymentStatus ? paymentStatus : submitting ? copy.processingLabel : copy.cardSubmitLabel }), _jsx("p", { className: 'wfc-secure', children: copy.secureNote })] }), footer: error ? _jsx("p", { className: 'wfc-error', role: 'alert', children: error }) : null }));
 }
 /** Shared by the loading and live states so switching between them moves nothing. */
 function CheckoutLayout({ cardBody, copy, disabled, footer, onSelect, selected, style, wallet, walletNote, walletSlot }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnelsgrove/payments",
-  "version": "0.39.0",
+  "version": "0.41.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/The-Solid-Grove/funnelsgrove.git",
@@ -46,11 +46,11 @@
     "jsdom": "20.0.3",
     "typescript": "^5",
     "vitest": "^3.2.4",
-    "@funnelsgrove/runtime": "0.31.0",
-    "@funnelsgrove/analytics": "0.13.0"
+    "@funnelsgrove/runtime": "0.32.0",
+    "@funnelsgrove/analytics": "0.14.0"
   },
   "peerDependencies": {
-    "@funnelsgrove/runtime": "^0.31.0",
-    "@funnelsgrove/analytics": "^0.13.0"
+    "@funnelsgrove/runtime": "^0.32.0",
+    "@funnelsgrove/analytics": "^0.14.0"
   }
 }