@funnelsgrove/payments 0.1.4 → 0.1.6

package/README.md

@@ -40,11 +40,11 @@ Shared billing and checkout helpers for funnels.
 - the `StripeExpressCheckoutElement` wrapper, which keeps `Elements` provider ownership inside this package so catalog funnels with their own dependency installs do not pass Stripe promises across duplicate local Stripe type copies
 - `src/providers/paymentProvider.types.ts` for provider-neutral checkout preparation state and provider ids
 - `src/providers/stripe/useStripeSubscriptionCheckoutSession.ts` for Stripe SDK initialization, publishable-key resolution, subscription client-secret preparation, card/wallet loading state, and friendly checkout errors
-- `src/providers/stripe/ApplePaySubscriptionCheckoutSlot.tsx` and `src/providers/stripe/GooglePaySubscriptionCheckoutSlot.tsx` for disabled loading wallet shells that prepare Stripe Express Checkout on load and swap in Stripe's real wallet controls when available
+- `src/providers/stripe/ApplePaySubscriptionCheckoutSlot.tsx` and `src/providers/stripe/GooglePaySubscriptionCheckoutSlot.tsx` for wallet shells that prepare Stripe Express Checkout on load, keep the loading placeholder clickable, and let Stripe's real wallet controls sit above the placeholder as soon as they mount
 - Stripe subscription checkout sessions reuse the active client secret across card checkout and paywall wallet checkout for the same intent key, so opening the embedded checkout after a paywall wallet button is ready does not create a second subscription session.
 - Stripe Express Checkout elements must stay mounted and measurable until Stripe reports availability; only hide the container after `onReady` or `onLoadError` reports that the requested wallet method is unavailable.
 - Shared checkout dialogs must switch to card checkout when Stripe reports no requested wallet availability, so an unavailable Apple Pay or Google Pay shell never leaves a fake wallet tab blocking the card form.
-- Wallet slots should show disabled grey placeholder shells only while availability is unknown; after Stripe reports unavailable, the placeholder must disappear instead of opening a card checkout under wallet branding.
+- Wallet slots should not leave disabled grey placeholder shells blocking the paywall. While availability is unknown, the placeholder can sit behind Stripe's real wallet element; after Stripe reports unavailable or preparation cannot create a client secret, the placeholder must disappear instead of opening a card checkout under wallet branding.
 - Checkout v2 owns only real Stripe Elements for card and wallet collection: Stripe controls the card-field placeholders, Stripe's `ExpressCheckoutElement` controls Apple Pay / Google Pay availability, desktop web can expose both wallet icons, and mobile narrows to Apple Pay on iOS or Google Pay on Android.
 - Checkout v2 can receive a paywall-confirmed wallet availability hint and seed its wallet tab from that state, letting a checkout reopen keep Apple Pay or Google Pay visible while its own Express Checkout element remounts against the same client secret.
 - Checkout v2 renders the wallet tab icons from the active platform wallet list and keeps Apple Pay / Google Pay marks large enough to read inside the tab.

package/dist/providers/stripe/WalletSubscriptionCheckoutSlot.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { StripeExpressCheckoutElement } from '../../components/shared/StripeExpressCheckoutElement.js';
 export function WalletSubscriptionCheckoutSlot({ amountCents, availabilityPaymentMethod, beforeConfirm, className, customerEmail, customerName, disabled = false, expressCheckoutAllowed = true, onAvailabilityChange, onError, onSuccess, onUnavailableClick, options, placeholderLabel, renderPlaceholder, returnUrl, session, summaryLabel, suspended = false, }) {
     const [walletAvailability, setWalletAvailability] = useState({
@@ -12,12 +12,23 @@ export function WalletSubscriptionCheckoutSlot({ amountCents, availabilityPaymen
     const walletAvailable = walletAvailability.intentKey === session.intentKey
         ? walletAvailability.available
         : null;
-    const shouldRenderPlaceholder = !suspended && expressCheckoutAllowed && walletAvailable === null;
     const shouldRenderExpressCheckout = !suspended &&
         expressCheckoutAllowed &&
         walletAvailable !== false &&
         Boolean(session.activeClientSecret) &&
         Boolean(session.stripePromise);
+    const shouldRenderPlaceholder = !shouldRenderExpressCheckout &&
+        !suspended &&
+        expressCheckoutAllowed &&
+        walletAvailable === null;
+    const placeholderIsPreparing = shouldRenderPlaceholder;
+    const markWalletUnavailable = useCallback((intentKey) => {
+        setWalletAvailability({
+            available: false,
+            intentKey,
+        });
+        onAvailabilityChange === null || onAvailabilityChange === void 0 ? void 0 : onAvailabilityChange(false);
+    }, [onAvailabilityChange]);
     useEffect(() => {
         if (slotDisabled ||
             suspended ||
@@ -31,9 +42,15 @@ export function WalletSubscriptionCheckoutSlot({ amountCents, availabilityPaymen
             return;
         }
         autoWalletAttemptedIntentKeyRef.current = requestKey;
-        void session.prepareWalletCheckout();
+        void (async () => {
+            const readyClientSecret = await session.prepareWalletCheckout();
+            if (!readyClientSecret) {
+                markWalletUnavailable(requestKey);
+            }
+        })();
     }, [
         expressCheckoutAllowed,
+        markWalletUnavailable,
         session,
         slotDisabled,
         suspended,
@@ -58,18 +75,22 @@ export function WalletSubscriptionCheckoutSlot({ amountCents, availabilityPaymen
             await (onUnavailableClick === null || onUnavailableClick === void 0 ? void 0 : onUnavailableClick());
             return;
         }
-        await session.prepareWalletCheckout();
+        const readyClientSecret = await session.prepareWalletCheckout();
+        if (!readyClientSecret) {
+            markWalletUnavailable(session.intentKey);
+        }
     };
     return (_jsxs(_Fragment, { children: [shouldRenderPlaceholder || shouldRenderExpressCheckout ? (_jsxs("div", { className: [
                     'wallet-subscription-checkout-slot',
-                    shouldRenderPlaceholder ? 'is-loading' : '',
+                    placeholderIsPreparing ? 'is-loading' : '',
+                    shouldRenderExpressCheckout ? 'has-express-checkout' : '',
                 ]
                     .filter(Boolean)
-                    .join(' '), "aria-busy": shouldRenderPlaceholder || undefined, children: [shouldRenderExpressCheckout &&
+                    .join(' '), "aria-busy": placeholderIsPreparing || undefined, children: [shouldRenderExpressCheckout &&
                         session.activeClientSecret &&
                         session.stripePromise ? (_jsx(StripeExpressCheckoutElement, { amountCents: amountCents, availabilityPaymentMethods: [availabilityPaymentMethod], beforeConfirm: beforeConfirm, className: className, clientSecret: session.activeClientSecret, customerEmail: customerEmail, customerName: customerName, onAvailabilityChange: handleAvailabilityChange, onError: handleError, onSuccess: onSuccess, options: options, returnUrl: returnUrl, stripePromise: session.stripePromise, summaryLabel: summaryLabel })) : null, shouldRenderPlaceholder ? (_jsx("div", { className: 'wallet-subscription-checkout-slot__placeholder', children: renderPlaceholder({
                             className,
-                            disabled: true,
+                            disabled: slotDisabled,
                             label: placeholderLabel,
                             onClick: () => void handlePlaceholderClick(),
                         }) })) : null] })) : null, _jsx("style", { children: walletSubscriptionCheckoutSlotStyles })] }));
@@ -81,6 +102,11 @@ const walletSubscriptionCheckoutSlotStyles = `
   min-height: var(--wallet-subscription-checkout-slot-min-height, 64px);
 }
 
+.wallet-subscription-checkout-slot .stripe-express-checkout-button {
+  position: relative;
+  z-index: 2;
+}
+
 .wallet-subscription-checkout-slot__placeholder {
   position: absolute;
   inset: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnelsgrove/payments",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "type": "module",
   "private": false,
   "main": "./dist/index.js",