@funnelsgrove/cli 0.1.67 → 0.1.71

package/template_scaffold/.funnelsgrove-scaffold.json

@@ -1,8 +1,8 @@
 {
   "schemaVersion": 1,
-  "sourceTreeHash": "da47d4b45148058b3485786ebf529164773f845391a1ca1ce896b38606651bb5",
+  "sourceTreeHash": "961a24b0df402b27d513fe5a386494e619bf73a49d248a41e53cca2a47d770ff",
   "stepContractVersion": 3,
-  "docsBundleVersion": "2.0.56",
+  "docsBundleVersion": "2.0.60",
   "files": [
     {
       "path": ".env.example",
@@ -16,7 +16,7 @@
     },
     {
       "path": ".funnelsgrove-docs.json",
-      "sha256": "8a7f62f1471af7a5a37e5e1e8123c4f9c64b09a2570ec12f5b8812eeddc145f3",
+      "sha256": "2c4d14855705a91586a404eabddeec0c19a3625f9bc9082362deb62b4a41eae6",
       "mode": "100644"
     },
     {
@@ -76,7 +76,7 @@
     },
     {
       "path": "docs/funnelsgrove/contracts/analytics-events.md",
-      "sha256": "496ebab7c1fd00b40f9a5b29a5d3f8b6605549bf5927eb4280ccdc3023acd3c9",
+      "sha256": "4324a89f55f38b148c13ad26cbc65a3efb45b8bd034180881b31b3093622e949",
       "mode": "100644"
     },
     {
@@ -91,7 +91,7 @@
     },
     {
       "path": "docs/funnelsgrove/contracts/payments.md",
-      "sha256": "3614a2c6e4d48411c9eba21400ce2699a49782d802aa08acc72335ed4ef2421d",
+      "sha256": "3e91737d0d9aef3f9e7842d87b5a4e6a922fc68a3f88da7ff4a09538f5f3e36d",
       "mode": "100644"
     },
     {
@@ -101,12 +101,12 @@
     },
     {
       "path": "docs/funnelsgrove/migrations/step-contract-v3.md",
-      "sha256": "3f89ff9d4d5501c6d3562f4d60d5d2fbc46d0069866353d0fe9a899e4690ac24",
+      "sha256": "cf02bed62505b7b00ce5f6175eaa2fde99159556b37aad0f304ceba407041173",
       "mode": "100644"
     },
     {
       "path": "docs/funnelsgrove/qa/analytics.md",
-      "sha256": "1a42fcb7fccfb35f41fe2df297aadd67d6ea86fa3a9de2960c861664f32cf9ab",
+      "sha256": "53d528d318a76b74f57aaeabe73049f2c693b0ab5b3bc4277805ca4fd779b9a8",
       "mode": "100644"
     },
     {
@@ -116,7 +116,7 @@
     },
     {
       "path": "docs/funnelsgrove/qa/paywall-checkout.md",
-      "sha256": "6fc887772e52ddd99ab70d898d8fd9b89869ca49ce1b49152d232cbe32865aae",
+      "sha256": "982f18d6e150606dcabe947cea95b654b643b8200f873a56fe7fe43321359b83",
       "mode": "100644"
     },
     {
@@ -171,7 +171,7 @@
     },
     {
       "path": "docs/funnelsgrove/steps/paywall_offer.md",
-      "sha256": "969ee556ca1da3bfa09c21f530726467735693537452fcbf3065f21644b90669",
+      "sha256": "0fe7260fa4c22f10cb218193bbb870da5f48753d964b8a9250ecc79158dd5462",
       "mode": "100644"
     },
     {
@@ -216,7 +216,7 @@
     },
     {
       "path": "docs/funnelsgrove/steps/upsell_offer.md",
-      "sha256": "832ffb5506ccdc72b28c839e1b574e5c9ba0c01755fa6c4be105dbe1136b21d0",
+      "sha256": "ba549a9355e9171193c765cc8744f68ae150c279bd9ffa08ef0f6fda0b71847b",
       "mode": "100644"
     },
     {
@@ -236,7 +236,7 @@
     },
     {
       "path": "funnel-docs.config.json",
-      "sha256": "44a40a7630f8ffd287390886d48461cbfb982160daaa9c77a816fbdf446df683",
+      "sha256": "2cd26fc471e315234da4daca6d5f54bf33107d9c7671e1db1a4ba229bc5c2ba0",
       "mode": "100644"
     },
     {
@@ -261,12 +261,12 @@
     },
     {
       "path": "package-lock.json",
-      "sha256": "7b9cd26b58befd01f21ca16928bb3544be09bd7647155ab147f8a8c5764647a3",
+      "sha256": "fb4f9a6bdfbb1f699004b728578b1c24fdd4ee18d618c6814e162688faf711c3",
       "mode": "100644"
     },
     {
       "path": "package.json",
-      "sha256": "5f5414ce78626c5e28d287d91ee91fc77e7a3ff2cb4d8d4c41e9f3ea443d9568",
+      "sha256": "c07d07c88f42e81903cd8a8d8877c25ae79a8fc48eb1eb50e50cf185b33f30c6",
       "mode": "100644"
     },
     {
@@ -841,7 +841,7 @@
     },
     {
       "path": "src/steps/step-32-paywall.tsx",
-      "sha256": "86407736b37dbaa88300ba270ea1b51b7ff27bdf2244365bbdb020e5f86004a4",
+      "sha256": "85f2c0774389458546de28cf70ccfe6d00abb16ddf07259abc1bce8e62befcd4",
       "mode": "100644"
     },
     {
@@ -916,7 +916,7 @@
     },
     {
       "path": "tests/funnel-agent-docs.test.ts",
-      "sha256": "4245b5e7c07fdc15a099e1c2c758b4960e7d43e90abdfb1ac52b5d423b816317",
+      "sha256": "5d577c81b48e910a3a257df838518721432d4fd1b99f5a34d7ab8943ae1517fd",
       "mode": "100644"
     },
     {
@@ -1031,7 +1031,7 @@
     },
     {
       "path": "tests/src/steps/step-32-paywall.test.ts",
-      "sha256": "0306cbe4e10d1f7027d0ba114eb95c8b5b095dfad57472887a4b985f1482afda",
+      "sha256": "d41faefa0098207ac50e0f5fdf82d15544d029fd5854341a8d83ebc9d7a6971f",
       "mode": "100644"
     },
     {

package/template_scaffold/docs/funnelsgrove/contracts/analytics-events.md

@@ -34,11 +34,12 @@ The `purchase_completed` event is owned by `trusted-server` and is recorded only
 - The flow controller emits lifecycle events. Step components do not duplicate them.
 - `step_engaged` is non-automatic and absent by default; only an explicit, centralized, tested policy may emit it through the approved controller/helper boundary.
 - `submitEmailCapture` creates `email_captured` transactionally, then routes only after success.
-- Named payment helpers emit checkout semantic events at real payment boundaries.
+- Shared payments components emit checkout semantic events at real payment boundaries when given `checkoutAnalytics`: dialog/wallet intent owns `checkout_started`, actual submit owns `add_payment_info`, and verified success owns `checkout_completed`. Funnel components do not call those SDK methods directly.
 - The terminal helper owns funnel completion.
 - A trusted backend owns `purchase_completed` after verifying an initial subscription or one-time payment; browser code never emits it. This purchase event is independent from the paywall-reach definition of Quiz completed.
 - A separate trusted server claim owns `registration_completed` when the purchased subscription is later linked in the app.
 - Provider adapters and the durable outbox own PostHog and server Meta delivery.
+- Stripe return URLs use `trackStripePaymentCheckoutReturn` only for deduplicated `payment_checkout_succeeded` / `payment_checkout_returned` diagnostics. Browser query parameters never prove a purchase.
 
 ## Privacy boundary
 

package/template_scaffold/docs/funnelsgrove/contracts/payments.md

@@ -30,11 +30,16 @@ A paywall presents purchasable plans. A reveal, loading state, calculation, or
 ## Payment rules
 
 - Resolve plans, prices, discounts, currencies, provider IDs, and payment mode from shared configuration.
-- Use named checkout helpers at actual checkout-started, payment-info, and completed boundaries.
+- Use `SharedStripeCheckoutV2Dialog` for card checkout and one `StripeSubscriptionWalletSurface` per simultaneously visible wallet placement. Never share a `useStripeSubscriptionCheckoutSession` result between card and wallet surfaces or between two visible wallet placements.
+- Pass `checkoutAnalytics` to every shared dialog and wallet surface. The payments package owns `checkout_started`, `add_payment_info`, and verified `checkout_completed`; do not call the corresponding `publicAnalyticsSdk` methods in funnel components.
+- Treat `onSuccess` as the first valid place to call `completeStep` for a purchase flow. Payment-info submission, dialog open, session creation, browser return, and provider-pending state are not lifecycle completion.
+- Use `completeStripeOneClickPayment` for one-click upsells. Do not duplicate the public one-click endpoint, Stripe loader, or `confirmPayment` inside a funnel.
 - Reuse the same event ID when retrying the same logical conversion.
 - Keep secrets and trusted provider calls server-side.
 - Route post-purchase behavior through the manifest and runtime handoff helper.
 
+On a Stripe return screen, call `trackStripePaymentCheckoutReturn` for browser diagnostics. Query parameters never prove `checkout_completed` or `purchase_completed`.
+
 ## Purchase completion separation
 
 Quiz completed counts each unique user who reaches a paywall step. `purchase_completed` remains trusted-server-only purchase verification and does not define Quiz completed. Browser terminal reach and `funnel_completed` remain lifecycle-only and are not purchase conversions.

package/template_scaffold/docs/funnelsgrove/migrations/step-contract-v3.md

@@ -17,7 +17,7 @@ Supported read versions: `1`, `2`, `3`. Authoring and publish target version `3`
 
 ### Package release order
 
-Release `@funnelsgrove/runtime` `0.7.2` first, then `@funnelsgrove/analytics` `0.1.51`, then `@funnelsgrove/payments` `0.7.1`. Deploy the API and funnel template, then confirm production `/health` reports the new docs identity. Only then publish `@funnelsgrove/cli` `0.1.67`. Publishing packages and deploying production remain separately approved operational actions.
+Release `@funnelsgrove/runtime` `0.7.4` first, then `@funnelsgrove/analytics` `0.1.53`, then `@funnelsgrove/payments` `0.7.2`. Deploy the API and funnel template, then confirm production `/health` reports the new docs identity. Only then publish `@funnelsgrove/cli` `0.1.71`. Publishing packages and deploying production remain separately approved operational actions.
 <!-- funnelsgrove:generated:end contract-v3/migration/step-contract-v3 -->
 
 ## Version-last policy

package/template_scaffold/docs/funnelsgrove/qa/analytics.md

@@ -25,6 +25,10 @@ Contract hash: `d761e91d5ac6ff9e72c6d49c5bcd014270912473a66f99c49d726c65998085cf
 
 ## Journey assertions
 
+- Shared checkout UI receives `checkoutAnalytics`; funnel paywalls do not call `trackCheckoutStarted`, `trackPaymentInfoSubmitted`, or `trackCheckoutCompleted` directly.
+- Card and each visible wallet surface use their own Checkout Session id for semantic-event deduplication.
+- Stripe return query parameters produce only `payment_checkout_succeeded` / `payment_checkout_returned` diagnostics through `trackStripePaymentCheckoutReturn`, never a trusted purchase.
+
 - Funnel start occurs once per run.
 - Each visit has one start and exactly one completion or exit.
 - First-step view/click dedupe correctly.

package/template_scaffold/docs/funnelsgrove/qa/paywall-checkout.md

@@ -48,8 +48,11 @@ _Not a choice type._
 
 - Verify every plan, price, currency, discount, and eligibility rule.
 - Test card and every enabled wallet.
+- Confirm every visible wallet placement has its own `StripeSubscriptionWalletSurface` session and the card dialog has a separate `useStripeSubscriptionCheckoutSession`.
 - Test validation, decline, retry, cancel, double-submit, and provider delay.
 - Verify named checkout events, complete metadata, one event ID, and retry deduplication.
+- Verify payment-info submission does not call `completeStep`; verified `onSuccess` does.
+- Verify funnel code contains no direct checkout analytics calls, one-click endpoint fetch, or direct Stripe confirmation.
 - Verify success routing and the `purchase_completed` terminal handoff.
 
 Run `fgrove validate` after all checks.

package/template_scaffold/docs/funnelsgrove/steps/paywall_offer.md

@@ -85,22 +85,24 @@ The controller owns view/start/completion/exit lifecycle. Closing or leaving wit
 
 ## Required semantic conversions
 
-Use named helpers for checkout started, payment info, and checkout completed at their real boundaries with one stable event ID.
+Pass `checkoutAnalytics` into `SharedStripeCheckoutV2Dialog` and every `StripeSubscriptionWalletSurface`. Those shared components emit checkout started, payment info, and verified checkout completed with the real Checkout Session identity. Do not call the analytics SDK methods directly.
 
 ## Approved shared helpers
 
-Use shared plan resolution, checkout, wallet, and `trackCheckoutStarted`, `trackPaymentInfoSubmitted`, and `trackCheckoutCompleted` helpers.
+Use shared plan resolution, `useStripeSubscriptionCheckoutSession` for the card dialog, `SharedStripeCheckoutV2Dialog`, and one private-session `StripeSubscriptionWalletSurface` per visible wallet placement. Call `completeStep` only from `onSuccess`.
 
 ## MUST rules
 
 - Keep the primary paywall identity exact; variants use contract-compliant distinct identities.
 - Present at least one purchasable plan.
 - Read prices, discounts, provider IDs, and payment mode from shared configuration.
+- Keep card and wallet Checkout Sessions isolated even when they show the same plan.
 
 ## NEVER rules
 
 - Never classify a reveal/interstitial as a paywall.
 - Never put secrets, provider IDs, amount math, or provider analytics in JSX.
+- Never complete the step on payment-info submission or manually emit checkout semantic events.
 
 ## Golden template or fixture
 

package/template_scaffold/docs/funnelsgrove/steps/upsell_offer.md

@@ -83,11 +83,11 @@ The controller owns lifecycle completion/exit; the payment boundary owns semanti
 
 ## Required semantic conversions
 
-Call `trackCheckoutStarted`, `trackPaymentInfoSubmitted`, and `trackCheckoutCompleted` only at their matching real boundaries.
+For embedded checkout, pass `checkoutAnalytics` to the shared dialog/surface and let the payments package own the three checkout semantic events. For an authorized post-purchase charge, use `completeStripeOneClickPayment` so required Stripe confirmation is not reimplemented locally.
 
 ## Approved shared helpers
 
-Use named payment helpers and manifest routing.
+Use `completeStripeOneClickPayment` or the shared Checkout Session components, plus manifest routing.
 
 ## MUST rules
 
@@ -98,6 +98,7 @@ Use named payment helpers and manifest routing.
 
 - Never emit a completed checkout before provider success.
 - Never call provider analytics directly.
+- Never call the one-click HTTP endpoint or `loadStripe` directly from the offer component.
 
 ## Golden template or fixture
 

package/template_scaffold/funnel-docs.config.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 1,
-  "bundleVersion": "2.0.56",
+  "bundleVersion": "2.0.60",
   "contractSource": "funnelsgrove-repository://apps/funnel-runtime/contracts/step-contract-v2.json",
   "fullyGenerated": [
     ".funnelsgrove-docs.json",

package/template_scaffold/package-lock.json

@@ -8,9 +8,9 @@
       "name": "funnel-template",
       "version": "0.1.0",
       "dependencies": {
-        "@funnelsgrove/analytics": "^0.1.51",
-        "@funnelsgrove/payments": "^0.7.1",
-        "@funnelsgrove/runtime": "^0.7.2",
+        "@funnelsgrove/analytics": "^0.1.53",
+        "@funnelsgrove/payments": "^0.7.2",
+        "@funnelsgrove/runtime": "^0.7.4",
         "@stripe/react-stripe-js": "^5.6.0",
         "@stripe/stripe-js": "^8.7.0",
         "lucide-react": "^0.553.0",
@@ -891,20 +891,20 @@
       }
     },
     "node_modules/@funnelsgrove/analytics": {
-      "version": "0.1.51",
-      "resolved": "https://registry.npmjs.org/@funnelsgrove/analytics/-/analytics-0.1.51.tgz",
-      "integrity": "sha512-tDY3p8pit/cqBwKXqbzh4o13Nzuk+nQ8SpqGddvV1kFteF9I/zqXCdrc01Qw00WdDdavTaMiFw6rqcbZT3pQfQ==",
+      "version": "0.1.53",
+      "resolved": "https://registry.npmjs.org/@funnelsgrove/analytics/-/analytics-0.1.53.tgz",
+      "integrity": "sha512-YT/gW+ToUvbcVBSnX+4b0zOFwlWL3MI2I0WAcNjRssm+zcpGlYn5vUsRU5W6f1ZgyoxBssyKdSaV+AItIy+Hiw==",
       "dependencies": {
-        "@funnelsgrove/runtime": "0.7.2"
+        "@funnelsgrove/runtime": "0.7.4"
       }
     },
     "node_modules/@funnelsgrove/payments": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/@funnelsgrove/payments/-/payments-0.7.1.tgz",
-      "integrity": "sha512-BvJNJgs9tXgDq4ICzvvASfrIH3u5JENQEInjTWlRrngW5mSJUQjwow2BuKd1FnI1TXxsNyiDUb6cdIi0MeXRYA==",
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/@funnelsgrove/payments/-/payments-0.7.2.tgz",
+      "integrity": "sha512-q0+b1NSvrehn4x7dOI2FMGd08zDRM2KTWXIroYFHByenkF94UV4UJbcpjwlnsEi9xJRFPhaFzQfFt4zmfMdg6A==",
       "dependencies": {
-        "@funnelsgrove/analytics": "^0.1.28",
-        "@funnelsgrove/runtime": "^0.7.1",
+        "@funnelsgrove/analytics": "^0.1.52",
+        "@funnelsgrove/runtime": "^0.7.3",
         "@stripe/react-stripe-js": "^5.6.0",
         "@stripe/stripe-js": "^8.7.0",
         "react": "19.2.3",
@@ -913,9 +913,9 @@
       }
     },
     "node_modules/@funnelsgrove/runtime": {
-      "version": "0.7.2",
-      "resolved": "https://registry.npmjs.org/@funnelsgrove/runtime/-/runtime-0.7.2.tgz",
-      "integrity": "sha512-NODUpe+2tjP83isXOmGHMCHDrKW/BpsiprkB9p3P4OyQJdCuDbKFoAsPGvoN3Q7nWB/I8ybfTm2FSCizXZCD4g==",
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@funnelsgrove/runtime/-/runtime-0.7.4.tgz",
+      "integrity": "sha512-82kqvsm1sG0jakKOspkn1XCt7YXnTWhjFSPU5T+661KzLIHtEumKz30hxPQ/9SyIonGAat3hFtlMbKw8XptVGA==",
       "dependencies": {
         "posthog-js": "^1.369.2",
         "react": "19.2.3",

package/template_scaffold/package.json

@@ -12,9 +12,9 @@
     "validate:funnel": "vite-node --config src/contract/funnel-validator.vite.config.ts src/contract/validate-funnel.cli.ts"
   },
   "dependencies": {
-    "@funnelsgrove/analytics": "^0.1.51",
-    "@funnelsgrove/payments": "^0.7.1",
-    "@funnelsgrove/runtime": "^0.7.2",
+    "@funnelsgrove/analytics": "^0.1.53",
+    "@funnelsgrove/payments": "^0.7.2",
+    "@funnelsgrove/runtime": "^0.7.4",
     "@stripe/react-stripe-js": "^5.6.0",
     "@stripe/stripe-js": "^8.7.0",
     "lucide-react": "^0.553.0",

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.56',
+      bundleVersion: '2.0.60',
       stepContractVersion: contract.stepContractVersion,
       contractHash: contract.contractHash,
     });