Gate embedded checkout design rollout

src/composables/useFeatureFlags.ts

@@ -36,6 +36,7 @@ export enum ServerFeatureFlag {
   UNIFIED_CLOUD_AUTH = 'unified_cloud_auth',
   CONSOLIDATED_BILLING_ENABLED = 'consolidated_billing_enabled',
   BILLING_CONTROL_ENABLED = 'billing_control_enabled',
+  EMBEDDED_CHECKOUT_ENABLED = 'embedded_checkout_enabled',
   FREE_TIER_JOB_ALLOWANCE_ENABLED = 'free_tier_job_allowance_enabled',
   SIGNUP_TURNSTILE = 'signup_turnstile',
   SUPPORTS_MODEL_TYPE_TAGS = 'supports_model_type_tags'
@@ -221,6 +222,13 @@ export function useFeatureFlags() {
         cachedBillingControlEnabled
       )
     },
+    get embeddedCheckoutEnabled() {
+      return resolveFlag(
+        ServerFeatureFlag.EMBEDDED_CHECKOUT_ENABLED,
+        remoteConfig.value.embedded_checkout_enabled,
+        false
+      )
+    },
     get freeTierJobAllowanceEnabled() {
       const config = remoteConfig.value as typeof remoteConfig.value & {
         free_tier_job_allowance_enabled?: boolean

src/platform/remoteConfig/types.ts

@@ -123,6 +123,7 @@ export type RemoteConfig = {
   unified_cloud_auth?: boolean
   consolidated_billing_enabled?: boolean
   billing_control_enabled?: boolean
+  embedded_checkout_enabled?: boolean
   sentry_dsn?: string
   turnstile_sitekey?: string
   // Raw, unvalidated wire value (a server typo like 'enfroce' is possible).

src/platform/workspace/components/SubscriptionAddPaymentPreviewWorkspace.test.ts

@@ -135,7 +135,7 @@ describe('SubscriptionAddPaymentPreviewWorkspace', () => {
     })
     expect(screen.getByText('$380')).toBeTruthy()
     expect(screen.getByText('subscription.billedYearly')).toBeTruthy()
-    expect(screen.getByText('$4560.00')).toBeTruthy()
+    expect(screen.getByText('$4,560.00')).toBeTruthy()
   })
 
   it('emits addCreditCard from the team confirm CTA', async () => {
@@ -173,13 +173,17 @@ describe('SubscriptionAddPaymentPreviewWorkspace', () => {
 
   it('prevents leaving the preview while payment is pending', () => {
     render(SubscriptionAddPaymentPreviewWorkspace, {
-      props: { tierKey: 'creator', isLoading: true },
+      props: {
+        tierKey: 'creator',
+        isLoading: true,
+        usePaymentElement: true
+      },
       global: globalOptions
     })
 
     expect(
       screen.getByRole('button', {
-        name: 'subscription.preview.backToAllPlans'
+        name: 'g.back'
       })
     ).toBeDisabled()
   })

src/platform/workspace/components/SubscriptionRequiredDialogContentUnified.test.ts

@@ -1,18 +1,33 @@
 import { render, screen } from '@testing-library/vue'
 import userEvent from '@testing-library/user-event'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { computed, ref } from 'vue'
 import { createI18n } from 'vue-i18n'
 
 import SubscriptionRequiredDialogContentUnified from './SubscriptionRequiredDialogContentUnified.vue'
 
-const mockHandleSubscribeTeamClick = vi.fn()
-const mockHandleSubscribeClick = vi.fn()
-const mockIsInPersonalWorkspace = ref(false)
+const {
+  mockHandleSubscribeTeamClick,
+  mockHandleSubscribeClick,
+  mockIsInPersonalWorkspace,
+  mockCheckoutStep,
+  mockPreviewVariant,
+  mockEmbeddedCheckoutEnabled
+} = await vi.hoisted(async () => {
+  const { ref } = await import('vue')
+  return {
+    mockHandleSubscribeTeamClick: vi.fn(),
+    mockHandleSubscribeClick: vi.fn(),
+    mockIsInPersonalWorkspace: ref(false),
+    mockCheckoutStep: ref('pricing'),
+    mockPreviewVariant: ref<string | null>(null),
+    mockEmbeddedCheckoutEnabled: ref(false)
+  }
+})
 
 vi.mock('@/platform/workspace/composables/useSubscriptionCheckout', () => ({
   useSubscriptionCheckout: () => ({
-    checkoutStep: ref('pricing'),
+    checkoutStep: mockCheckoutStep,
     isLoadingPreview: ref(false),
     loadingTier: ref(null),
     isSubscribing: ref(false),
@@ -24,18 +39,30 @@ vi.mock('@/platform/workspace/composables/useSubscriptionCheckout', () => ({
     activeCheckoutActionUrl: ref(null),
     isPolling: ref(false),
     isTeamCheckout: computed(() => false),
-    previewVariant: computed(() => null),
+    previewVariant: computed(() => mockPreviewVariant.value),
     handleSubscribeClick: mockHandleSubscribeClick,
     handleSubscribeTeamClick: mockHandleSubscribeTeamClick,
     handleBackToPricing: vi.fn(),
     handleSuccessClose: vi.fn(),
     handleAddCreditCard: vi.fn(),
     handleConfirmTransition: vi.fn(),
     handleTeamSubscribe: vi.fn(),
+    handleSubscriptionPayment: vi.fn(),
+    handleTeamSubscriptionPayment: vi.fn(),
     handleResubscribe: vi.fn()
   })
 }))
 
+vi.mock('@/composables/useFeatureFlags', () => ({
+  useFeatureFlags: () => ({
+    flags: {
+      get embeddedCheckoutEnabled() {
+        return mockEmbeddedCheckoutEnabled.value
+      }
+    }
+  })
+}))
+
 vi.mock('@/platform/workspace/stores/teamWorkspaceStore', () => ({
   useTeamWorkspaceStore: () => ({
     get isInPersonalWorkspace() {
@@ -71,14 +98,21 @@ const UnifiedPricingTableStub = {
   }
 }
 
+const SubscriptionAddPaymentPreviewWorkspaceStub = {
+  name: 'SubscriptionAddPaymentPreviewWorkspace',
+  props: ['usePaymentElement'],
+  template: `<section :aria-label="usePaymentElement ? 'Embedded checkout' : 'Legacy checkout'" />`
+}
+
 function renderComponent(props: Record<string, unknown> = {}) {
   return render(SubscriptionRequiredDialogContentUnified, {
     props: { onClose: vi.fn(), ...props },
     global: {
       plugins: [i18n],
       stubs: {
         UnifiedPricingTable: UnifiedPricingTableStub,
-        SubscriptionAddPaymentPreviewWorkspace: { template: '<div />' },
+        SubscriptionAddPaymentPreviewWorkspace:
+          SubscriptionAddPaymentPreviewWorkspaceStub,
         SubscriptionTransitionPreviewWorkspace: { template: '<div />' },
         SubscriptionSuccessWorkspace: { template: '<div />' }
       }
@@ -90,6 +124,13 @@ describe('SubscriptionRequiredDialogContentUnified team-plan subscribe', () => {
   beforeEach(() => {
     vi.clearAllMocks()
     mockIsInPersonalWorkspace.value = false
+    mockCheckoutStep.value = 'pricing'
+    mockPreviewVariant.value = null
+    mockEmbeddedCheckoutEnabled.value = false
+  })
+
+  afterEach(() => {
+    vi.unstubAllEnvs()
   })
 
   it('advances to team checkout from a team workspace', async () => {
@@ -152,4 +193,28 @@ describe('SubscriptionRequiredDialogContentUnified team-plan subscribe', () => {
     })
     expect(mockHandleSubscribeClick).not.toHaveBeenCalled()
   })
+
+  it('keeps the legacy checkout when the embedded checkout flag is disabled', () => {
+    mockCheckoutStep.value = 'preview'
+    mockPreviewVariant.value = 'personal-new'
+
+    renderComponent()
+
+    expect(
+      screen.getByRole('region', { name: 'Legacy checkout' })
+    ).toBeInTheDocument()
+  })
+
+  it('uses the embedded checkout when the flag is enabled', () => {
+    mockCheckoutStep.value = 'preview'
+    mockPreviewVariant.value = 'personal-new'
+    mockEmbeddedCheckoutEnabled.value = true
+    vi.stubEnv('VITE_STRIPE_PUBLISHABLE_KEY', 'pk_test')
+
+    renderComponent()
+
+    expect(
+      screen.getByRole('region', { name: 'Embedded checkout' })
+    ).toBeInTheDocument()
+  })
 })

src/platform/workspace/components/SubscriptionRequiredDialogContentUnified.vue

@@ -162,6 +162,7 @@ import { useEventListener } from '@vueuse/core'
 import { computed, nextTick, onMounted, ref, watch } from 'vue'
 
 import Button from '@/components/ui/button/Button.vue'
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import type { PaymentIntentSource } from '@/platform/telemetry/types'
 import type { SubscriptionCheckoutSelection } from '@/platform/workspace/composables/useSubscriptionCheckout'
 import { useSubscriptionCheckout } from '@/platform/workspace/composables/useSubscriptionCheckout'
@@ -183,8 +184,11 @@ const emit = defineEmits<{
   close: [subscribed: boolean]
 }>()
 
-const stripePaymentElementEnabled = Boolean(
-  import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY
+const { flags } = useFeatureFlags()
+const stripePaymentElementEnabled = computed(
+  () =>
+    flags.embeddedCheckoutEnabled &&
+    Boolean(import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY)
 )
 
 // The embedded-payment confirm step keeps the pricing table's dialog
@@ -198,7 +202,7 @@ const savedMethodsForConfirm = ref<SavedPaymentMethod[] | null>(null)
 const isEmbeddedPaymentStep = computed(
   () =>
     checkoutStep.value === 'preview' &&
-    stripePaymentElementEnabled &&
+    stripePaymentElementEnabled.value &&
     !savedMethodsForConfirm.value?.length &&
     (previewVariant.value === 'team-new' ||
       previewVariant.value === 'personal-new')
@@ -210,7 +214,7 @@ const isEmbeddedPaymentStep = computed(
 const isEmbeddedConfirmStep = computed(
   () =>
     checkoutStep.value === 'preview' &&
-    stripePaymentElementEnabled &&
+    stripePaymentElementEnabled.value &&
     (previewVariant.value === 'team-change' ||
       previewVariant.value === 'personal-change' ||
       (!!savedMethodsForConfirm.value?.length &&
@@ -223,7 +227,7 @@ const isEmbeddedConfirmStep = computed(
 const isEmbeddedSuccessStep = computed(
   () =>
     checkoutStep.value === 'success' &&
-    stripePaymentElementEnabled &&
+    stripePaymentElementEnabled.value &&
     (previewVariant.value === 'team-new' ||
       previewVariant.value === 'personal-new')
 )
@@ -273,7 +277,7 @@ watch(
   [checkoutStep, () => !!savedMethodsForConfirm.value?.length] as const,
   async ([next, nextSaved], [prev, prevSaved]) => {
     const el = contentRoot.value
-    if (!el || !stripePaymentElementEnabled) return
+    if (!el || !stripePaymentElementEnabled.value) return
     const between = (a: string, b: string) =>
       (prev === a && next === b) || (prev === b && next === a)
     const savedFlip =

src/platform/workspace/components/UnifiedStripePaymentSelector.test.ts

@@ -8,8 +8,9 @@ import UnifiedStripePaymentSelector from './UnifiedStripePaymentSelector.vue'
 const stripeMocks = vi.hoisted(() => {
   const mount = vi.fn()
   const destroy = vi.fn()
+  const on = vi.fn()
   const submit = vi.fn()
-  const create = vi.fn(() => ({ mount, destroy }))
+  const create = vi.fn(() => ({ mount, destroy, on }))
   const elements = { submit, create }
   const createConfirmationToken = vi.fn()
   const stripe = {
@@ -19,6 +20,7 @@ const stripeMocks = vi.hoisted(() => {
   return {
     mount,
     destroy,
+    on,
     submit,
     create,
     elements,
@@ -70,7 +72,8 @@ describe('UnifiedStripePaymentSelector', () => {
     stripeMocks.stripe.elements.mockReturnValue(stripeMocks.elements)
     stripeMocks.create.mockReturnValue({
       mount: stripeMocks.mount,
-      destroy: stripeMocks.destroy
+      destroy: stripeMocks.destroy,
+      on: stripeMocks.on
     })
     stripeMocks.submit.mockResolvedValue({})
     stripeMocks.createConfirmationToken.mockResolvedValue({
@@ -101,7 +104,8 @@ describe('UnifiedStripePaymentSelector', () => {
         defaultCollapsed: false,
         radios: 'always',
         spacedAccordionItems: true
-      }
+      },
+      terms: { card: 'never' }
     })
     expect(stripeMocks.mount).toHaveBeenCalledTimes(1)