@funnelsgrove/payments 0.1.18 → 0.1.20

package/dist/components/shared/StripeCheckoutExpressCheckoutButton.d.ts

@@ -11,8 +11,10 @@ export type StripeCheckoutExpressCheckoutButtonProps = {
     availabilityPaymentMethods?: readonly (keyof AvailablePaymentMethods)[];
     initialAvailable?: boolean | null;
     keepInitialAvailableOnReady?: boolean;
+    serverUpdateKey?: string | null;
+    onServerUpdate?: () => Promise<boolean>;
     onAvailabilityChange?: (available: boolean) => void;
     onError?: (message: string | null) => void;
     onSuccess?: () => void;
 };
-export declare function StripeCheckoutExpressCheckoutButton({ beforeConfirm, returnUrl, customerEmail, className, options, availabilityPaymentMethods, initialAvailable, keepInitialAvailableOnReady, onAvailabilityChange, onError, onSuccess, }: StripeCheckoutExpressCheckoutButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function StripeCheckoutExpressCheckoutButton({ beforeConfirm, returnUrl, customerEmail, className, options, availabilityPaymentMethods, initialAvailable, keepInitialAvailableOnReady, serverUpdateKey, onServerUpdate, onAvailabilityChange, onError, onSuccess, }: StripeCheckoutExpressCheckoutButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/shared/StripeCheckoutExpressCheckoutButton.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { ExpressCheckoutElement, useCheckout, } from '@stripe/react-stripe-js/checkout';
 const buildDefaultOptions = () => ({
     buttonHeight: 55,
@@ -25,9 +25,12 @@ const buildDefaultOptions = () => ({
         paypal: 'never',
     },
 });
-export function StripeCheckoutExpressCheckoutButton({ beforeConfirm, returnUrl, customerEmail, className, options, availabilityPaymentMethods = ['applePay'], initialAvailable, keepInitialAvailableOnReady = false, onAvailabilityChange, onError, onSuccess, }) {
+export function StripeCheckoutExpressCheckoutButton({ beforeConfirm, returnUrl, customerEmail, className, options, availabilityPaymentMethods = ['applePay'], initialAvailable, keepInitialAvailableOnReady = false, serverUpdateKey, onServerUpdate, onAvailabilityChange, onError, onSuccess, }) {
     const checkoutState = useCheckout();
+    const appliedServerUpdateKeyRef = useRef('');
+    const serverUpdatePromiseRef = useRef(null);
     const [walletAvailable, setWalletAvailable] = useState(initialAvailable !== null && initialAvailable !== void 0 ? initialAvailable : null);
+    const normalizedServerUpdateKey = (serverUpdateKey === null || serverUpdateKey === void 0 ? void 0 : serverUpdateKey.trim()) || '';
     const effectiveWalletAvailable = initialAvailable === true && walletAvailable !== false
         ? true
         : walletAvailable;
@@ -36,6 +39,52 @@ export function StripeCheckoutExpressCheckoutButton({ beforeConfirm, returnUrl,
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         return Object.assign(Object.assign(Object.assign({}, baseOptions), (options !== null && options !== void 0 ? options : {})), { buttonTheme: Object.assign(Object.assign({}, ((_a = baseOptions.buttonTheme) !== null && _a !== void 0 ? _a : {})), ((_b = options === null || options === void 0 ? void 0 : options.buttonTheme) !== null && _b !== void 0 ? _b : {})), buttonType: Object.assign(Object.assign({}, ((_c = baseOptions.buttonType) !== null && _c !== void 0 ? _c : {})), ((_d = options === null || options === void 0 ? void 0 : options.buttonType) !== null && _d !== void 0 ? _d : {})), layout: Object.assign(Object.assign({}, ((_e = baseOptions.layout) !== null && _e !== void 0 ? _e : {})), ((_f = options === null || options === void 0 ? void 0 : options.layout) !== null && _f !== void 0 ? _f : {})), paymentMethods: Object.assign(Object.assign({}, ((_g = baseOptions.paymentMethods) !== null && _g !== void 0 ? _g : {})), ((_h = options === null || options === void 0 ? void 0 : options.paymentMethods) !== null && _h !== void 0 ? _h : {})), paymentMethodOrder: (_j = options === null || options === void 0 ? void 0 : options.paymentMethodOrder) !== null && _j !== void 0 ? _j : baseOptions.paymentMethodOrder });
     }, [baseOptions, options]);
+    const ensureServerUpdated = useCallback(async () => {
+        if (!normalizedServerUpdateKey) {
+            return true;
+        }
+        if (appliedServerUpdateKeyRef.current === normalizedServerUpdateKey) {
+            return true;
+        }
+        if (!onServerUpdate || checkoutState.type !== 'success') {
+            return false;
+        }
+        if (serverUpdatePromiseRef.current) {
+            return serverUpdatePromiseRef.current;
+        }
+        const updatePromise = (async () => {
+            const updateResult = await checkoutState.checkout.runServerUpdate(async () => {
+                const updated = await onServerUpdate();
+                if (!updated) {
+                    throw new Error('Unable to update checkout session.');
+                }
+            });
+            if (updateResult.type === 'error') {
+                onError === null || onError === void 0 ? void 0 : onError(updateResult.error.message || 'Unable to update checkout session.');
+                return false;
+            }
+            appliedServerUpdateKeyRef.current = normalizedServerUpdateKey;
+            onError === null || onError === void 0 ? void 0 : onError(null);
+            return true;
+        })();
+        serverUpdatePromiseRef.current = updatePromise;
+        try {
+            return await updatePromise;
+        }
+        finally {
+            serverUpdatePromiseRef.current = null;
+        }
+    }, [checkoutState, normalizedServerUpdateKey, onError, onServerUpdate]);
+    useEffect(() => {
+        if (!normalizedServerUpdateKey) {
+            appliedServerUpdateKeyRef.current = '';
+            return;
+        }
+        if (checkoutState.type !== 'success' || !onServerUpdate) {
+            return;
+        }
+        void ensureServerUpdated();
+    }, [checkoutState.type, ensureServerUpdated, normalizedServerUpdateKey, onServerUpdate]);
     const handleConfirm = async (event) => {
         if (checkoutState.type !== 'success') {
             const message = checkoutState.type === 'error'
@@ -46,6 +95,13 @@ export function StripeCheckoutExpressCheckoutButton({ beforeConfirm, returnUrl,
             return;
         }
         onError === null || onError === void 0 ? void 0 : onError(null);
+        const updated = await ensureServerUpdated();
+        if (!updated) {
+            const message = 'Unable to update checkout session.';
+            onError === null || onError === void 0 ? void 0 : onError(message);
+            event.paymentFailed({ reason: 'fail', message });
+            return;
+        }
         let preparedCustomerEmail = (customerEmail === null || customerEmail === void 0 ? void 0 : customerEmail.trim()) || null;
         if (beforeConfirm) {
             try {

package/dist/providers/stripe/WalletSubscriptionCheckoutSlot.js

@@ -31,6 +31,11 @@ export function WalletSubscriptionCheckoutSlot({ amountCents, availabilityPaymen
         expressCheckoutAllowed &&
         walletAvailable === null;
     const placeholderIsPreparing = shouldRenderPlaceholder;
+    const serverUpdateKey = session.activeClientSecret &&
+        session.checkoutSessionId &&
+        session.activePlanKey !== session.planKey
+        ? session.planKey
+        : null;
     const markWalletUnavailable = useCallback((intentKey) => {
         setWalletAvailability({
             available: false,
@@ -105,7 +110,7 @@ export function WalletSubscriptionCheckoutSlot({ amountCents, availabilityPaymen
                     .filter(Boolean)
                     .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 }, session.activeClientSecret)) : null, shouldRenderPlaceholder ? (_jsx("div", { className: 'wallet-subscription-checkout-slot__placeholder', children: (renderPreparingPlaceholder !== null && renderPreparingPlaceholder !== void 0 ? renderPreparingPlaceholder : renderPlaceholder)({
+                        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, serverUpdateKey: serverUpdateKey, stripePromise: session.stripePromise, summaryLabel: summaryLabel, onServerUpdate: session.updateCheckoutSessionPlan })) : null, shouldRenderPlaceholder ? (_jsx("div", { className: 'wallet-subscription-checkout-slot__placeholder', children: (renderPreparingPlaceholder !== null && renderPreparingPlaceholder !== void 0 ? renderPreparingPlaceholder : renderPlaceholder)({
                             className,
                             disabled: slotDisabled,
                             label: placeholderLabel,

package/dist/providers/stripe/useStripeSubscriptionCheckoutSession.d.ts

@@ -17,6 +17,8 @@ export type StripeSubscriptionCheckoutSessionInput = {
 };
 export type StripeSubscriptionCheckoutSession = {
     activeClientSecret: string | null;
+    activePlanKey: string | null;
+    checkoutSessionId: string | null;
     configured: boolean;
     error: string | null;
     intentKey: string;
@@ -27,8 +29,10 @@ export type StripeSubscriptionCheckoutSession = {
     reset: () => void;
     restartCardCheckout: () => Promise<string | null>;
     restartWalletCheckout: () => Promise<string | null>;
+    planKey: string;
     setError: (message: string | null) => void;
     stripePromise: Promise<Stripe | null> | null;
+    updateCheckoutSessionPlan: () => Promise<boolean>;
 };
 export declare function isInactiveCheckoutSessionError(message?: string | null): boolean;
 export declare function useStripeSubscriptionCheckoutSession({ checkoutMode, couponId, customerEmail, displayPlan, enabled, onError, plan, returnUrl, runtimeConfig, userId, }: StripeSubscriptionCheckoutSessionInput): StripeSubscriptionCheckoutSession;

package/dist/providers/stripe/useStripeSubscriptionCheckoutSession.js

@@ -1,7 +1,7 @@
 'use client';
 import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { createEmptyCheckoutPreparationLoading, } from '../paymentProvider.types.js';
-import { createStripeSubscriptionCheckout, getStripePromise, isStripeConfigured, } from '../../services/stripe.service.js';
+import { createStripeSubscriptionCheckout, getStripePromise, isStripeConfigured, updateStripeSubscriptionCheckoutPlan, } from '../../services/stripe.service.js';
 const getFriendlyStripeCheckoutError = (error) => {
     const message = error instanceof Error ? error.message : 'Unable to initialize checkout';
     return message === 'Internal server error'
@@ -14,9 +14,11 @@ export function isInactiveCheckoutSessionError(message) {
     return /\bcheckout session\b.*\bno longer active\b/i.test((_a = message === null || message === void 0 ? void 0 : message.trim()) !== null && _a !== void 0 ? _a : '');
 }
 export function useStripeSubscriptionCheckoutSession({ checkoutMode, couponId, customerEmail, displayPlan, enabled = true, onError, plan, returnUrl, runtimeConfig, userId, }) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const [clientSecret, setClientSecret] = useState(null);
     const [clientSecretIntentKey, setClientSecretIntentKey] = useState(null);
+    const [checkoutSessionId, setCheckoutSessionId] = useState(null);
+    const [clientSecretPlanKey, setClientSecretPlanKey] = useState(null);
     const [error, setErrorState] = useState(null);
     const [loading, setLoading] = useState(createEmptyCheckoutPreparationLoading);
     const [runtimeStripePublishableKey, setRuntimeStripePublishableKey] = useState(null);
@@ -35,20 +37,27 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, couponId, c
         'stripe',
         checkoutMode,
         runtimeConfigSignature,
-        (_a = plan === null || plan === void 0 ? void 0 : plan.id) !== null && _a !== void 0 ? _a : '',
-        (_b = plan === null || plan === void 0 ? void 0 : plan.amountCents) !== null && _b !== void 0 ? _b : '',
-        (_c = displayPlan === null || displayPlan === void 0 ? void 0 : displayPlan.id) !== null && _c !== void 0 ? _c : '',
-        (_d = displayPlan === null || displayPlan === void 0 ? void 0 : displayPlan.amountCents) !== null && _d !== void 0 ? _d : '',
         (couponId === null || couponId === void 0 ? void 0 : couponId.trim()) || '',
         returnUrl.trim(),
     ].join('|');
+    const planKey = [
+        (_a = plan === null || plan === void 0 ? void 0 : plan.id) !== null && _a !== void 0 ? _a : '',
+        (_b = plan === null || plan === void 0 ? void 0 : plan.providerPlanId) !== null && _b !== void 0 ? _b : '',
+        (_c = plan === null || plan === void 0 ? void 0 : plan.amountCents) !== null && _c !== void 0 ? _c : '',
+        (_d = displayPlan === null || displayPlan === void 0 ? void 0 : displayPlan.id) !== null && _d !== void 0 ? _d : '',
+        (_e = displayPlan === null || displayPlan === void 0 ? void 0 : displayPlan.amountCents) !== null && _e !== void 0 ? _e : '',
+    ].join('|');
     const activeClientSecret = clientSecretIntentKey === intentKey ? clientSecret : null;
+    const activeCheckoutSessionId = clientSecretIntentKey === intentKey ? checkoutSessionId : null;
+    const activePlanKey = clientSecretIntentKey === intentKey ? clientSecretPlanKey : null;
     const stripePromise = useMemo(() => getStripePromise(checkoutMode, runtimeStripePublishableKey), [checkoutMode, runtimeStripePublishableKey]);
     const clearActiveCheckoutSession = useCallback(() => {
         requestIdRef.current += 1;
         creatingIntentRef.current = null;
         setClientSecret(null);
         setClientSecretIntentKey(null);
+        setCheckoutSessionId(null);
+        setClientSecretPlanKey(null);
     }, []);
     const setError = useCallback((message) => {
         if (isInactiveCheckoutSessionError(message)) {
@@ -89,10 +98,11 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, couponId, c
             clearActiveCheckoutSession();
         }
         const requestKey = intentKey;
+        const requestPlanKey = planKey;
         const requestId = requestIdRef.current + 1;
         requestIdRef.current = requestId;
         const subscriptionRequest = (async () => {
-            var _a, _b, _c, _d, _e, _f, _g;
+            var _a, _b, _c, _d, _e, _f, _g, _h;
             try {
                 const response = await createStripeSubscriptionCheckout({
                     plan,
@@ -113,18 +123,20 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, couponId, c
                 }
                 setClientSecret(response.clientSecret);
                 setClientSecretIntentKey(requestKey);
+                setCheckoutSessionId(((_d = response.checkoutSessionId) === null || _d === void 0 ? void 0 : _d.trim()) || null);
+                setClientSecretPlanKey(requestPlanKey);
                 return response.clientSecret;
             }
             catch (subscriptionError) {
-                if (((_d = creatingIntentRef.current) === null || _d === void 0 ? void 0 : _d.key) === requestKey &&
-                    ((_e = creatingIntentRef.current) === null || _e === void 0 ? void 0 : _e.id) === requestId) {
+                if (((_e = creatingIntentRef.current) === null || _e === void 0 ? void 0 : _e.key) === requestKey &&
+                    ((_f = creatingIntentRef.current) === null || _f === void 0 ? void 0 : _f.id) === requestId) {
                     setError(getFriendlyStripeCheckoutError(subscriptionError));
                 }
                 return null;
             }
             finally {
-                if (((_f = creatingIntentRef.current) === null || _f === void 0 ? void 0 : _f.key) === requestKey &&
-                    ((_g = creatingIntentRef.current) === null || _g === void 0 ? void 0 : _g.id) === requestId) {
+                if (((_g = creatingIntentRef.current) === null || _g === void 0 ? void 0 : _g.key) === requestKey &&
+                    ((_h = creatingIntentRef.current) === null || _h === void 0 ? void 0 : _h.id) === requestId) {
                     creatingIntentRef.current = null;
                 }
             }
@@ -145,6 +157,7 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, couponId, c
         displayPlan,
         intentKey,
         plan,
+        planKey,
         returnUrl,
         runtimeConfig,
         setError,
@@ -178,8 +191,49 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, couponId, c
     const prepareWalletCheckout = useCallback(() => prepareCheckout('wallet'), [prepareCheckout]);
     const restartCardCheckout = useCallback(() => prepareCheckout('card', { forceNew: true }), [prepareCheckout]);
     const restartWalletCheckout = useCallback(() => prepareCheckout('wallet', { forceNew: true }), [prepareCheckout]);
+    const updateCheckoutSessionPlan = useCallback(async () => {
+        if (!configured || !plan || !displayPlan || !activeCheckoutSessionId) {
+            return false;
+        }
+        if (activePlanKey === planKey) {
+            return true;
+        }
+        setError(null);
+        try {
+            await updateStripeSubscriptionCheckoutPlan({
+                checkoutSessionId: activeCheckoutSessionId,
+                plan,
+                couponId,
+                customerEmail,
+                user_id: userId,
+                environment: checkoutMode,
+                runtimeConfig,
+            });
+            setClientSecretPlanKey(planKey);
+            return true;
+        }
+        catch (subscriptionError) {
+            setError(getFriendlyStripeCheckoutError(subscriptionError));
+            return false;
+        }
+    }, [
+        activeCheckoutSessionId,
+        activePlanKey,
+        checkoutMode,
+        configured,
+        couponId,
+        customerEmail,
+        displayPlan,
+        plan,
+        planKey,
+        runtimeConfig,
+        setError,
+        userId,
+    ]);
     return {
         activeClientSecret,
+        activePlanKey,
+        checkoutSessionId: activeCheckoutSessionId,
         configured,
         error,
         intentKey,
@@ -190,7 +244,9 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, couponId, c
         reset,
         restartCardCheckout,
         restartWalletCheckout,
+        planKey,
         setError,
         stripePromise,
+        updateCheckoutSessionPlan,
     };
 }

package/dist/services/stripe.service.d.ts

@@ -80,7 +80,21 @@ type CreateSubscriptionCheckoutResponse = {
     stripePublishableKey?: string;
     environment?: 'test' | 'live';
 };
+type UpdateSubscriptionCheckoutPlanInput = {
+    checkoutSessionId: string;
+    plan: CheckoutSessionPlanInput;
+    couponId?: string | null;
+    customerEmail?: string | null;
+    user_id?: string | null;
+    environment?: RuntimeMode;
+    runtimeConfig?: StripeRuntimeConfigOverrides;
+};
+type UpdateSubscriptionCheckoutPlanResponse = {
+    checkoutSessionId: string;
+    environment?: 'test' | 'live';
+};
 export declare function createStripeSubscriptionCheckout(input: CreateSubscriptionCheckoutInput): Promise<CreateSubscriptionCheckoutResponse>;
+export declare function updateStripeSubscriptionCheckoutPlan(input: UpdateSubscriptionCheckoutPlanInput): Promise<UpdateSubscriptionCheckoutPlanResponse>;
 type CreateCheckoutSessionInput = {
     plan: CheckoutSessionPlanInput;
     successUrl: string;

package/dist/services/stripe.service.js

@@ -588,6 +588,42 @@ export async function createStripeSubscriptionCheckout(input) {
     }
     return (await response.json());
 }
+export async function updateStripeSubscriptionCheckoutPlan(input) {
+    var _a, _b, _c, _d, _e;
+    const recurring = resolveCheckoutPlanRecurringConfig(input.plan);
+    if (!recurring) {
+        throw new Error('Unable to resolve the recurring interval for the selected plan');
+    }
+    const runtimeConfig = resolveStripeRuntimeConfig(input.runtimeConfig);
+    const response = await fetch(buildStripeRuntimeApiUrl('/sdk/public/payments/subscriptions/update-plan', runtimeConfig), {
+        method: 'POST',
+        headers: buildStripeRuntimeHeaders(runtimeConfig, {
+            'Content-Type': 'application/json',
+        }),
+        body: JSON.stringify({
+            publishableKey: runtimeConfig.funnelSdkPublishableKey || undefined,
+            funnelId: runtimeConfig.funnelId || undefined,
+            funnelVersionId: runtimeConfig.funnelVersionId || undefined,
+            checkoutSessionId: input.checkoutSessionId.trim(),
+            planId: getPaywallPlanSelectionValue(input.plan),
+            providerPlanId: ((_a = input.plan.providerPlanId) === null || _a === void 0 ? void 0 : _a.trim()) || undefined,
+            title: input.plan.title,
+            description: ((_b = input.plan.description) === null || _b === void 0 ? void 0 : _b.trim()) || undefined,
+            amountCents: input.plan.amountCents,
+            billingInterval: recurring.interval,
+            billingIntervalCount: recurring.intervalCount,
+            couponId: ((_c = input.couponId) === null || _c === void 0 ? void 0 : _c.trim()) || undefined,
+            customerEmail: ((_d = input.customerEmail) === null || _d === void 0 ? void 0 : _d.trim()) || undefined,
+            user_id: ((_e = input.user_id) === null || _e === void 0 ? void 0 : _e.trim()) || undefined,
+            environment: input.environment || undefined,
+        }),
+    });
+    if (!response.ok) {
+        const errorMessage = await parseErrorMessage(response, 'Unable to update subscription checkout');
+        throw new Error(errorMessage);
+    }
+    return (await response.json());
+}
 export async function createStripeCheckoutSession(input) {
     var _a, _b, _c, _d, _e;
     const recurring = resolveCheckoutPlanRecurringConfig(input.plan);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnelsgrove/payments",
-  "version": "0.1.18",
+  "version": "0.1.20",
   "type": "module",
   "private": false,
   "main": "./dist/index.js",
@@ -26,7 +26,7 @@
     "test:run": "vitest run --passWithNoTests"
   },
   "dependencies": {
-    "@funnelsgrove/runtime": "0.1.3",
+    "@funnelsgrove/runtime": "0.1.5",
     "@stripe/react-stripe-js": "^5.6.0",
     "@stripe/stripe-js": "^8.7.0",
     "react": "19.2.3",