@funnelsgrove/cli 0.1.68 → 0.1.73

package/template_scaffold/src/steps/step-32-paywall.tsx

@@ -14,7 +14,6 @@ import {
 } from '@/config/billing.plans';
 import { stepPaywallContent } from '@/steps/content/step-32-paywall.content';
 import { useClaimbeeStepContent } from '@/steps/use-claimbee-step-content';
-import { publicAnalyticsSdk } from '@funnelsgrove/analytics';
 import {
   PaymentRuntimeBoundary,
   apiService,
@@ -31,10 +30,9 @@ import {
 } from '@funnelsgrove/runtime';
 import { getPathForStep } from '@/runtime/funnel-runtime';
 import {
-  ApplePaySubscriptionCheckoutSlot,
-  GooglePaySubscriptionCheckoutSlot,
   SharedCheckoutSpecialOfferDialog,
   SharedStripeCheckoutV2Dialog,
+  StripeSubscriptionWalletSurface,
   activateSecondPaywallDiscount,
   advancePaywallDiscountState,
   buildBillingDiscountCatalog,
@@ -45,12 +43,13 @@ import {
   getPaywallPromoDisplayName,
   resolvePaywallDiscountState,
   serializePaywallDiscountState,
-  usePlatformWalletPaymentMethods,
   useStripeSubscriptionCheckoutSession,
   type BillingFallbackPlanConfig,
   type BillingPlanCatalog,
   type PaywallDiscountState,
   type PlatformWalletPaymentMethod,
+  type StripeSubscriptionWalletSurfaceAvailability,
+  type StripeSubscriptionWalletSurfaceCheckoutInput,
 } from '@funnelsgrove/payments';
 import { stepSubscriptionStartedId } from '@/steps/step-33-subscription-started';
 import { funnelManifest } from '@/config/funnel.manifest';
@@ -76,9 +75,18 @@ type StoryOption = {
   backgroundColor: string;
 };
 
-type PaywallWalletAvailabilityState = {
-  intentKey: string;
-  methods: Partial<Record<PlatformWalletPaymentMethod, boolean>>;
+const PAYWALL_WALLET_SURFACE_ID = 'paywall-primary';
+
+type PaywallWalletAvailabilityState = Partial<Record<string, boolean>>;
+
+const paywallWalletMethodClassNames: Record<PlatformWalletPaymentMethod, string> = {
+  applePay: 'paywall-v2-apple-pay-button',
+  googlePay: 'paywall-v2-google-pay-button',
+};
+
+const paywallWalletMethodWrapperClassNames: Record<PlatformWalletPaymentMethod, string> = {
+  applePay: 'paywall-v2-apple-pay-shell',
+  googlePay: 'paywall-v2-google-pay-shell',
 };
 
 const claimbeeStoryBackgroundColors = ['var(--color-secondary-text)', 'var(--color-primary)', 'var(--color-secondary)'] as const;
@@ -141,7 +149,6 @@ function StepPaywallRuntime({
   const publishedRuntime = useFunnelRuntimeConfig();
   const content = useClaimbeeStepContent(stepPaywallId, stepPaywallContent);
   const supportEmail = runtimePublicConfig.supportEmail;
-  const walletPaymentMethods = usePlatformWalletPaymentMethods();
   const publishedOfferSetRuntime = useMemo(
     () => publishedRuntime.config && publishedRuntime.config.offerSets.length > 0
       ? resolveGeneratedOfferSetRuntime<BillingFallbackPlanConfig>({
@@ -208,10 +215,8 @@ function StepPaywallRuntime({
   const [activeStoryIndex, setActiveStoryIndex] = useState(0);
   const [openFaqIds, setOpenFaqIds] = useState<string[]>([]);
   const [checkoutEmail, setCheckoutEmail] = useState(user.email);
-  const [paywallWalletAvailability, setPaywallWalletAvailability] = useState<PaywallWalletAvailabilityState>({
-    intentKey: '',
-    methods: {},
-  });
+  const [paywallWalletAvailability, setPaywallWalletAvailability] =
+    useState<PaywallWalletAvailabilityState>({});
   const paywallStepRef = useRef<HTMLDivElement | null>(null);
 
   const activeCouponId = discountState.couponId;
@@ -363,21 +368,40 @@ function StepPaywallRuntime({
     runtimeConfig: checkoutRuntimeConfig,
     userId: user.id,
   });
+  const walletCheckoutInput = useMemo<StripeSubscriptionWalletSurfaceCheckoutInput>(
+    () => ({
+      analyticsMetadata: checkoutAnalyticsMetadata,
+      checkoutMode,
+      couponId: checkoutPromoActive ? selectedDisplayPlan?.couponId ?? null : null,
+      customerEmail: checkoutEmail || user.email,
+      customerName: user.name,
+      displayPlan: selectedDisplayPlan,
+      plan: selectedPlan,
+      returnUrl: successReturnUrl,
+      runtimeConfig: checkoutRuntimeConfig,
+      userId: user.id,
+    }),
+    [
+      checkoutAnalyticsMetadata,
+      checkoutEmail,
+      checkoutMode,
+      checkoutPromoActive,
+      selectedDisplayPlan,
+      selectedPlan,
+      successReturnUrl,
+      user.email,
+      user.id,
+      user.name,
+    ],
+  );
   const checkoutDisabled = !checkoutSession.configured || !selectedPlan || !selectedDisplayPlan;
   const checkoutDialogReady =
     checkoutDialogOpen &&
     Boolean(checkoutSession.activeClientSecret) &&
     Boolean(checkoutSession.stripePromise) &&
     Boolean(selectedDisplayPlan);
-  const currentPaywallWalletAvailability: PaywallWalletAvailabilityState['methods'] =
-    paywallWalletAvailability.intentKey === checkoutSession.intentKey
-      ? paywallWalletAvailability.methods
-      : {};
-  const checkoutInitialWalletAvailable = walletPaymentMethods.some(
-    (method) => currentPaywallWalletAvailability[method] === true,
-  )
-    ? true
-    : null;
+  const checkoutInitialWalletAvailable =
+    paywallWalletAvailability[PAYWALL_WALLET_SURFACE_ID] ?? null;
   const checkoutTotalValue = useMemo(() => {
     if (!selectedDisplayPlan) {
       return '';
@@ -468,31 +492,22 @@ function StepPaywallRuntime({
     );
   }, [discountStateReady, serializedDiscountSnapshot]);
 
-  const updatePaywallWalletAvailability = (
-    method: PlatformWalletPaymentMethod,
-    available: boolean,
+  const handleWalletSurfaceAvailabilityChange = (
+    surfaceId: string,
+    availability: StripeSubscriptionWalletSurfaceAvailability,
   ) => {
-    setPaywallWalletAvailability((current) => {
-      const currentMethods =
-        current.intentKey === checkoutSession.intentKey
-          ? current.methods
-          : {};
-
-      return {
-        intentKey: checkoutSession.intentKey,
-        methods: {
-          ...currentMethods,
-          [method]: available,
-        },
-      };
-    });
+    setPaywallWalletAvailability((current) =>
+      current[surfaceId] === availability.anyAvailable
+        ? current
+        : { ...current, [surfaceId]: availability.anyAvailable },
+    );
   };
 
-  const handleApplePayAvailabilityChange = (available: boolean) =>
-    updatePaywallWalletAvailability('applePay', available);
+  const resolvePaywallWalletMethodClassName = (method: PlatformWalletPaymentMethod) =>
+    paywallWalletMethodClassNames[method];
 
-  const handleGooglePayAvailabilityChange = (available: boolean) =>
-    updatePaywallWalletAvailability('googlePay', available);
+  const resolvePaywallWalletMethodWrapperClassName = (method: PlatformWalletPaymentMethod) =>
+    paywallWalletMethodWrapperClassNames[method];
 
   const startCheckout = async () => {
     if (checkoutDisabled || checkoutSession.loading.card) {
@@ -510,29 +525,13 @@ function StepPaywallRuntime({
     }
   };
 
-  const trackPaymentInfoSubmitted = () => {
-    if (!selectedDisplayPlan || !checkoutAnalyticsMetadata) {
-      return;
-    }
-
-    const checkoutSessionId = checkoutSession.checkoutSessionId?.trim();
-    if (!checkoutSessionId) {
+  const handleCheckoutCompleted = () => {
+    if (!selectedDisplayPlan) {
       return;
     }
-
     completeStep(analyticsStepId, {
       planId: selectedDisplayPlan.id,
     });
-    publicAnalyticsSdk.trackPaymentInfoSubmitted({
-      eventId: `add_payment_info:${checkoutSessionId}`,
-      stepId: analyticsStepId,
-      stepName: analyticsStepName,
-      stepType: stepPaywall.type,
-      stepContractVersion: funnelManifest.stepContractVersion,
-      featureFlags,
-      metadata: checkoutAnalyticsMetadata,
-    });
-    void publicAnalyticsSdk.flush().catch(() => 0);
   };
 
   const preparePaywallWalletCheckout = async (): Promise<string | null> => {
@@ -676,7 +675,7 @@ function StepPaywallRuntime({
           onCustomerEmailChange={setCheckoutEmail}
           onCustomerEmailCommit={commitCheckoutEmail}
           onError={checkoutSession.setError}
-          onPaymentInfoSubmitted={trackPaymentInfoSubmitted}
+          onSuccess={handleCheckoutCompleted}
           paymentMethodLabels={content.checkout.paymentMethodLabels}
           paypalButtonLabel={content.checkout.paypalButtonLabel}
           paypalLabel={content.checkout.paypalLabel}
@@ -884,51 +883,28 @@ function StepPaywallRuntime({
         </section>
 
         <section className='paywall-v2-payment-stack'>
-          {walletPaymentMethods.includes('applePay') ? (
-            <div className='paywall-v2-apple-pay-shell'>
-              {selectedDisplayPlan ? (
-                <ApplePaySubscriptionCheckoutSlot
-                  amountCents={selectedDisplayPlan.amountCents}
-                  beforeConfirm={preparePaywallWalletCheckout}
-                  checkoutAnalytics={checkoutAnalyticsContext}
-                  className='paywall-v2-apple-pay-button'
-                  customerEmail={checkoutEmail || user.email}
-                  customerName={user.name}
-                  disabled={checkoutDisabled}
-                  onAvailabilityChange={handleApplePayAvailabilityChange}
-                  onPaymentInfoSubmitted={trackPaymentInfoSubmitted}
-                  onUnavailableClick={openCardCheckoutFromUnavailableWallet}
-                  placeholderLabel={content.checkout.walletPlaceholderLabel}
-                  returnUrl={successReturnUrl}
-                  session={checkoutSession}
-                  summaryLabel={checkoutSummaryLabel}
-                  suspended={checkoutDialogReady || specialOfferDialogOpen}
-                />
-              ) : null}
-            </div>
-          ) : null}
-          {walletPaymentMethods.includes('googlePay') ? (
-            <div className='paywall-v2-google-pay-shell'>
-              {selectedDisplayPlan ? (
-                <GooglePaySubscriptionCheckoutSlot
-                  amountCents={selectedDisplayPlan.amountCents}
-                  beforeConfirm={preparePaywallWalletCheckout}
-                  checkoutAnalytics={checkoutAnalyticsContext}
-                  className='paywall-v2-google-pay-button'
-                  customerEmail={checkoutEmail || user.email}
-                  customerName={user.name}
-                  disabled={checkoutDisabled}
-                  onAvailabilityChange={handleGooglePayAvailabilityChange}
-                  onPaymentInfoSubmitted={trackPaymentInfoSubmitted}
-                  onUnavailableClick={openCardCheckoutFromUnavailableWallet}
-                  placeholderLabel={content.checkout.googlePayPlaceholderLabel}
-                  returnUrl={successReturnUrl}
-                  session={checkoutSession}
-                  summaryLabel={checkoutSummaryLabel}
-                  suspended={checkoutDialogReady || specialOfferDialogOpen}
-                />
-              ) : null}
-            </div>
+          {selectedDisplayPlan ? (
+            <StripeSubscriptionWalletSurface
+              amountCents={selectedDisplayPlan.amountCents}
+              applePayPlaceholderLabel={content.checkout.walletPlaceholderLabel}
+              beforeConfirm={preparePaywallWalletCheckout}
+              checkout={walletCheckoutInput}
+              checkoutAnalytics={checkoutAnalyticsContext}
+              containerClassName='paywall-v2-wallet-surface'
+              disabled={checkoutDisabled}
+              googlePayPlaceholderLabel={content.checkout.googlePayPlaceholderLabel}
+              onAvailabilityChange={(availability) =>
+                handleWalletSurfaceAvailabilityChange(PAYWALL_WALLET_SURFACE_ID, availability)
+              }
+              onError={setError}
+              onSuccess={handleCheckoutCompleted}
+              onUnavailableClick={openCardCheckoutFromUnavailableWallet}
+              resolveMethodClassName={resolvePaywallWalletMethodClassName}
+              resolveMethodWrapperClassName={resolvePaywallWalletMethodWrapperClassName}
+              summaryLabel={checkoutSummaryLabel}
+              surfaceId={PAYWALL_WALLET_SURFACE_ID}
+              suspended={checkoutDialogReady || specialOfferDialogOpen}
+            />
           ) : null}
           <button
             type='button'
@@ -1721,6 +1697,13 @@ const stepPaywallStyles = `
   width: 100%;
 }
 
+.paywall-v2-wallet-surface {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+}
+
 .paywall-v2-card-button {
   width: 100%;
   min-height: 64px;

package/template_scaffold/tests/funnel-agent-docs.test.ts

@@ -363,7 +363,7 @@ describe('funnel agent documentation supply', () => {
 
     expect(manifest).toMatchObject({
       schemaVersion: 1,
-      bundleVersion: '2.0.57',
+      bundleVersion: '2.0.62',
       stepContractVersion: contract.stepContractVersion,
       contractHash: contract.contractHash,
     });

package/template_scaffold/tests/src/steps/step-32-paywall.test.ts

@@ -43,8 +43,7 @@ describe('ClaimBee paywall source', () => {
     );
 
     expect(stepSource).toContain('SharedCheckoutSpecialOfferDialog');
-    expect(stepSource).toContain('ApplePaySubscriptionCheckoutSlot');
-    expect(stepSource).toContain('GooglePaySubscriptionCheckoutSlot');
+    expect(stepSource).toContain('StripeSubscriptionWalletSurface');
     expect(stepSource).toContain('SharedStripeCheckoutV2Dialog');
     expect(stepSource).not.toContain('StripeExpressCheckoutElement');
     expect(stepSource).not.toContain('createStripeSubscriptionCheckout');
@@ -67,8 +66,8 @@ describe('ClaimBee paywall source', () => {
     expect(stepSource).toContain('imageSrc={content.checkout.specialOffer.image.src}');
     expect(stepSource).toContain("className='paywall-v2-scroll-cta paywall-v2-vibe-cta'");
     expect(stepSource).toContain("className='paywall-v2-card-button paywall-v2-vibe-cta'");
-    expect(stepSource).toContain("className='paywall-v2-apple-pay-button'");
-    expect(stepSource).toContain("className='paywall-v2-google-pay-button'");
+    expect(stepSource).toContain("applePay: 'paywall-v2-apple-pay-button'");
+    expect(stepSource).toContain("googlePay: 'paywall-v2-google-pay-button'");
     expect(stepSource).not.toContain('Continue with other payment options');
   });
 
@@ -172,7 +171,7 @@ describe('ClaimBee paywall source', () => {
     expect(stepSource).toContain('useStripeSubscriptionCheckoutSession');
     expect(stepSource).toContain('checkoutSession.activeClientSecret');
     expect(stepSource).toContain('<SharedStripeCheckoutV2Dialog');
-    expect(stepSource).toContain('<ApplePaySubscriptionCheckoutSlot');
+    expect(stepSource).toContain('<StripeSubscriptionWalletSurface');
     expect(stepSource).not.toContain('<StripeExpressCheckoutElement');
     expect(stepSource).not.toContain('createStripePaymentIntent');
     expect(stepSource).not.toContain('createStripeSubscriptionCheckout');
@@ -183,23 +182,25 @@ describe('ClaimBee paywall source', () => {
     expect(stepSource).toContain("aria-label='Loading checkout'");
   });
 
-  it('claims paywall completion only when payment information is submitted', () => {
+  it('claims paywall completion only after verified checkout success', () => {
     const stepSource = readFileSync(
       path.resolve(__dirname, '../../../src/steps/step-32-paywall.tsx'),
       'utf8',
     );
-    const paymentInfoHandler = stepSource.slice(
-      stepSource.indexOf('const trackPaymentInfoSubmitted = () => {'),
+    const completionHandler = stepSource.slice(
+      stepSource.indexOf('const handleCheckoutCompleted = () => {'),
       stepSource.indexOf('const preparePaywallWalletCheckout'),
     );
     const checkoutStartHandler = stepSource.slice(
       stepSource.indexOf('const startCheckout = async () => {'),
-      stepSource.indexOf('const trackPaymentInfoSubmitted'),
+      stepSource.indexOf('const handleCheckoutCompleted'),
     );
 
     expect(stepSource).toContain('const { user, setUser, attributes, featureFlags, completeStep } = useFunnel();');
-    expect(paymentInfoHandler).toContain('completeStep(analyticsStepId, {');
-    expect(paymentInfoHandler).toContain('planId: selectedDisplayPlan.id');
+    expect(completionHandler).toContain('completeStep(analyticsStepId, {');
+    expect(completionHandler).toContain('planId: selectedDisplayPlan.id');
+    expect(stepSource).toContain('onSuccess={handleCheckoutCompleted}');
+    expect(stepSource).not.toContain('onPaymentInfoSubmitted=');
     expect(checkoutStartHandler).not.toContain('completeStep(');
   });
 
@@ -315,8 +316,7 @@ describe('ClaimBee paywall source', () => {
     expect(plansIndex).toBeGreaterThan(-1);
     expect(paymentStackIndex).toBeGreaterThan(plansIndex);
     expect(featureGridIndex).toBeGreaterThan(paymentStackIndex);
-    expect(stepSource).toContain('ApplePaySubscriptionCheckoutSlot');
-    expect(stepSource).toContain('GooglePaySubscriptionCheckoutSlot');
+    expect(stepSource).toContain('StripeSubscriptionWalletSurface');
     expect(stepSource).toContain('.paywall-v2-apple-pay-button,');
     expect(stepSource).toContain('.paywall-v2-google-pay-button {');
     expect(stepSource).toContain('min-height: 64px;');
@@ -352,12 +352,13 @@ describe('ClaimBee paywall source', () => {
       'utf8',
     );
 
-    expect(stepSource).toContain("<div className='paywall-v2-apple-pay-shell'>");
-    expect(stepSource).toContain("<div className='paywall-v2-google-pay-shell'>");
-    expect(stepSource).toContain('<ApplePaySubscriptionCheckoutSlot');
-    expect(stepSource).toContain('<GooglePaySubscriptionCheckoutSlot');
+    expect(stepSource).toContain('<StripeSubscriptionWalletSurface');
+    expect(stepSource).toContain("surfaceId={PAYWALL_WALLET_SURFACE_ID}");
+    expect(stepSource).toContain('checkout={walletCheckoutInput}');
+    expect(stepSource).toContain('resolveMethodClassName={resolvePaywallWalletMethodClassName}');
+    expect(stepSource).toContain('resolveMethodWrapperClassName={resolvePaywallWalletMethodWrapperClassName}');
     expect(stepSource).toContain('onUnavailableClick={openCardCheckoutFromUnavailableWallet}');
-    expect(stepSource).toContain('session={checkoutSession}');
+    expect(stepSource).not.toContain('session={checkoutSession}');
     expect(stepSource).not.toContain('onClick={() => void startWalletCheckout()}');
     expect(stepSource).not.toContain('StripeExpressCheckoutElement');
     expect(stepSource).not.toContain('createStripeSubscriptionCheckout');
@@ -372,14 +373,13 @@ describe('ClaimBee paywall source', () => {
       'utf8',
     );
 
-    expect(stepSource).toContain('type PaywallWalletAvailabilityState = {');
-    expect(stepSource).toContain('const [paywallWalletAvailability, setPaywallWalletAvailability] = useState<PaywallWalletAvailabilityState>');
-    expect(stepSource).toContain("updatePaywallWalletAvailability('applePay', available)");
-    expect(stepSource).toContain("updatePaywallWalletAvailability('googlePay', available)");
-    expect(stepSource).toContain('const checkoutInitialWalletAvailable = walletPaymentMethods.some(');
+    expect(stepSource).toContain('type PaywallWalletAvailabilityState = Partial<Record<string, boolean>>;');
+    expect(stepSource).toContain('useState<PaywallWalletAvailabilityState>({});');
+    expect(stepSource).toContain('const handleWalletSurfaceAvailabilityChange = (');
+    expect(stepSource).toContain('availability: StripeSubscriptionWalletSurfaceAvailability');
+    expect(stepSource).toContain('paywallWalletAvailability[PAYWALL_WALLET_SURFACE_ID] ?? null');
     expect(stepSource).toContain('initialWalletAvailable={checkoutInitialWalletAvailable}');
-    expect(stepSource).toContain('onAvailabilityChange={handleApplePayAvailabilityChange}');
-    expect(stepSource).toContain('onAvailabilityChange={handleGooglePayAvailabilityChange}');
+    expect(stepSource).toContain('handleWalletSurfaceAvailabilityChange(PAYWALL_WALLET_SURFACE_ID, availability)');
   });
 
   it('prepares the real Apple Pay element on load instead of waiting for the placeholder tap', () => {
@@ -389,7 +389,7 @@ describe('ClaimBee paywall source', () => {
     );
 
     expect(stepSource).toContain('useStripeSubscriptionCheckoutSession');
-    expect(stepSource).toContain('ApplePaySubscriptionCheckoutSlot');
+    expect(stepSource).toContain('StripeSubscriptionWalletSurface');
     expect(stepSource).toContain('checkoutSession.prepareCardCheckout');
     expect(stepSource).toContain('checkoutSession.activeClientSecret');
     expect(stepSource).not.toContain('const autoWalletIntentKeyRef = useRef<string | null>(null);');
@@ -410,8 +410,8 @@ describe('ClaimBee paywall source', () => {
     expect(stepSource).toContain('couponId: checkoutPromoActive ? selectedDisplayPlan?.couponId ?? null : null');
     expect(stepSource).toContain('summaryLabel: checkoutSummaryLabel');
     expect(stepSource).toContain('checkoutSession.activeClientSecret');
-    expect(stepSource).toContain('<ApplePaySubscriptionCheckoutSlot');
-    expect(stepSource).toContain('<GooglePaySubscriptionCheckoutSlot');
+    expect(stepSource).toContain('<StripeSubscriptionWalletSurface');
+    expect(stepSource).toContain('const walletCheckoutInput = useMemo<StripeSubscriptionWalletSurfaceCheckoutInput>');
     expect(stepSource).not.toContain('StripeExpressCheckoutElement');
     expect(stepSource).not.toContain('preparePaywallWalletSubscription');
     expect(stepSource).not.toContain('const handlePaywallApplePayPlaceholderClick = () => {');
@@ -424,9 +424,8 @@ describe('ClaimBee paywall source', () => {
       'utf8',
     );
 
-    expect(stepSource).toContain('const trackPaymentInfoSubmitted = () => {');
+    expect(stepSource).not.toContain('publicAnalyticsSdk');
     expect(stepSource).not.toContain('publicAnalyticsSdk.trackCheckoutStarted({');
-    expect(stepSource).toContain('publicAnalyticsSdk.trackPaymentInfoSubmitted({');
     expect(stepSource).toContain('stepType: stepPaywall.type');
     expect(stepSource).toContain('value: selectedDisplayPlan.analyticsPurchaseValue');
     expect(stepSource).toContain("currency: 'USD'");
@@ -434,16 +433,16 @@ describe('ClaimBee paywall source', () => {
     expect(stepSource).toContain('const checkoutAnalyticsContext = useMemo(');
     expect(stepSource).toContain('checkoutAnalytics={checkoutAnalyticsContext}');
     expect(stepSource).toContain('checkoutSessionId={checkoutSession.checkoutSessionId}');
-    expect(stepSource).toContain('onPaymentInfoSubmitted={trackPaymentInfoSubmitted}');
+    expect(stepSource).not.toContain('onPaymentInfoSubmitted=');
     expect(stepSource).toContain("await checkoutSession.prepareCardCheckout({ checkoutStartSource: 'checkout_render' });");
-    expect(stepSource).not.toContain('const trackCheckoutCompleted = () => {');
+    expect(stepSource).toContain('const handleCheckoutCompleted = () => {');
     expect(stepSource).not.toContain('publicAnalyticsSdk.trackCheckoutCompleted({');
-    expect(stepSource).not.toContain('onSuccess={trackCheckoutCompleted}');
+    expect(stepSource).toContain('onSuccess={handleCheckoutCompleted}');
     expect(stepSource).not.toContain("eventType: 'checkout_started'");
     expect(stepSource).not.toContain("eventType: 'checkout_completed'");
   });
 
-  it('emits payment-info analytics only after a stable Checkout Session exists', () => {
+  it('delegates payment-info analytics to shared checkout components with session context', () => {
     const stepSource = readFileSync(
       path.resolve(__dirname, '../../../src/steps/step-32-paywall.tsx'),
       'utf8',
@@ -456,25 +455,12 @@ describe('ClaimBee paywall source', () => {
       stepSource.indexOf('const checkoutAnalyticsContext = useMemo(() => {'),
       stepSource.indexOf('const successReturnUrl = useMemo(() => {'),
     );
-    const paymentInfoHandler = stepSource.slice(
-      stepSource.indexOf('const trackPaymentInfoSubmitted = () => {'),
-      stepSource.indexOf('const preparePaywallWalletCheckout'),
-    );
-
     expect(analyticsMetadata).toContain("currency: 'USD'");
     expect(checkoutAnalyticsContext).toContain('metadata: checkoutAnalyticsMetadata');
-    expect(paymentInfoHandler).toContain(
-      'const checkoutSessionId = checkoutSession.checkoutSessionId?.trim();',
-    );
-    expect(paymentInfoHandler).toContain('if (!checkoutSessionId) {');
-    expect(paymentInfoHandler.indexOf('if (!checkoutSessionId) {')).toBeLessThan(
-      paymentInfoHandler.indexOf('completeStep(analyticsStepId, {'),
-    );
-    expect(paymentInfoHandler).toContain(
-      'eventId: `add_payment_info:${checkoutSessionId}`',
-    );
-    expect(paymentInfoHandler).toContain('metadata: checkoutAnalyticsMetadata');
-    expect(paymentInfoHandler).toContain('void publicAnalyticsSdk.flush().catch(() => 0);');
+    expect(stepSource.match(/checkoutAnalytics=\{checkoutAnalyticsContext\}/g)).toHaveLength(2);
+    expect(stepSource).toContain('checkoutSessionId={checkoutSession.checkoutSessionId}');
+    expect(stepSource).not.toContain('trackPaymentInfoSubmitted');
+    expect(stepSource).not.toContain('add_payment_info:');
   });
 
   it('uses a local three-plan catalog so the paywall shows weekly, monthly, and yearly offers', () => {