feat: add Stripe pricing table integration for subscription dialog (conditional on feature flag) (#7288)

Integrates Stripe's pricing table web component into the subscription
dialog when the subscription_tiers_enabled feature flag is active. The
implementation includes a new StripePricingTable component that loads
Stripe's pricing table script and renders the table with proper error
handling and loading states. The subscription dialog now displays the
Stripe pricing table with contact us and enterprise links, using a
1100px width that balances multi-column layout with visual design.
Configuration supports environment variables, remote config, and window
config for the Stripe publishable key and pricing table ID.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7288-feat-add-Stripe-pricing-table-integration-for-subscription-dialog-conditional-on-featur-2c46d73d365081fa9d93c213df118996)
by [Unito](https://www.unito.io)

Author: christian-byrne

.env_example

@@ -42,3 +42,7 @@ ALGOLIA_API_KEY=684d998c36b67a9a9fce8fc2d8860579
 # SENTRY_AUTH_TOKEN=private-token # get from sentry
 # SENTRY_ORG=comfy-org
 # SENTRY_PROJECT=cloud-frontend-staging
+
+# Stripe pricing table configuration (used by feature-flagged subscription tiers UI)
+# VITE_STRIPE_PUBLISHABLE_KEY=pk_test_123
+# VITE_STRIPE_PRICING_TABLE_ID=prctbl_123

global.d.ts

@@ -13,6 +13,8 @@ interface Window {
     max_upload_size?: number
     comfy_api_base_url?: string
     comfy_platform_base_url?: string
+    stripe_publishable_key?: string
+    stripe_pricing_table_id?: string
     firebase_config?: {
       apiKey: string
       authDomain: string

src/config/stripePricingTableConfig.ts

@@ -0,0 +1,34 @@
+import { remoteConfig } from '@/platform/remoteConfig/remoteConfig'
+
+export const STRIPE_PRICING_TABLE_SCRIPT_SRC =
+  'https://js.stripe.com/v3/pricing-table.js'
+
+interface StripePricingTableConfig {
+  publishableKey: string
+  pricingTableId: string
+}
+
+function getEnvValue(
+  key: 'VITE_STRIPE_PUBLISHABLE_KEY' | 'VITE_STRIPE_PRICING_TABLE_ID'
+) {
+  return import.meta.env[key]
+}
+
+export function getStripePricingTableConfig(): StripePricingTableConfig {
+  const publishableKey =
+    remoteConfig.value.stripe_publishable_key ||
+    window.__CONFIG__?.stripe_publishable_key ||
+    getEnvValue('VITE_STRIPE_PUBLISHABLE_KEY') ||
+    ''
+
+  const pricingTableId =
+    remoteConfig.value.stripe_pricing_table_id ||
+    window.__CONFIG__?.stripe_pricing_table_id ||
+    getEnvValue('VITE_STRIPE_PRICING_TABLE_ID') ||
+    ''
+
+  return {
+    publishableKey,
+    pricingTableId
+  }
+}

src/locales/en/main.json

@@ -97,6 +97,7 @@
     "no": "No",
     "cancel": "Cancel",
     "close": "Close",
+    "or": "or",
     "pressKeysForNewBinding": "Press keys for new binding",
     "defaultBanner": "default banner",
     "enableOrDisablePack": "Enable or disable pack",
@@ -1894,10 +1895,20 @@
       "waitingForSubscription": "Complete your subscription in the new tab. We'll automatically detect when you're done!",
       "subscribe": "Subscribe"
     },
+    "pricingTable": {
+      "description": "Access cloud-powered ComfyUI workflows with straightforward, usage-based pricing.",
+      "loading": "Loading pricing options...",
+      "loadError": "We couldn't load the pricing table. Please refresh and try again.",
+      "missingConfig": "Stripe pricing table configuration missing. Provide the publishable key and pricing table ID via remote config or .env."
+    },
     "subscribeToRun": "Subscribe",
     "subscribeToRunFull": "Subscribe to Run",
     "subscribeNow": "Subscribe Now",
     "subscribeToComfyCloud": "Subscribe to Comfy Cloud",
+    "description": "Choose the best plan for you",
+    "haveQuestions": "Have questions or wondering about enterprise?",
+    "contactUs": "Contact us",
+    "viewEnterprise": "view enterprise",
     "partnerNodesCredits": "Partner Nodes pricing table"
   },
   "userSettings": {

src/platform/cloud/subscription/components/StripePricingTable.vue

@@ -0,0 +1,117 @@
+<template>
+  <div
+    ref="tableContainer"
+    class="relative w-full rounded-[20px] border border-interface-stroke bg-interface-panel-background"
+  >
+    <div
+      v-if="!hasValidConfig"
+      class="absolute inset-0 flex items-center justify-center px-6 text-center text-sm text-text-secondary"
+      data-testid="stripe-table-missing-config"
+    >
+      {{ $t('subscription.pricingTable.missingConfig') }}
+    </div>
+    <div
+      v-else-if="loadError"
+      class="absolute inset-0 flex items-center justify-center px-6 text-center text-sm text-text-secondary"
+      data-testid="stripe-table-error"
+    >
+      {{ $t('subscription.pricingTable.loadError') }}
+    </div>
+    <div
+      v-else-if="!isReady"
+      class="absolute inset-0 flex items-center justify-center px-6 text-center text-sm text-text-secondary"
+      data-testid="stripe-table-loading"
+    >
+      {{ $t('subscription.pricingTable.loading') }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
+
+import { getStripePricingTableConfig } from '@/config/stripePricingTableConfig'
+import { useStripePricingTableLoader } from '@/platform/cloud/subscription/composables/useStripePricingTableLoader'
+
+const props = defineProps<{
+  pricingTableId?: string
+  publishableKey?: string
+}>()
+
+const tableContainer = ref<HTMLDivElement | null>(null)
+const isReady = ref(false)
+const loadError = ref<string | null>(null)
+const lastRenderedKey = ref('')
+const stripeElement = ref<HTMLElement | null>(null)
+
+const resolvedConfig = computed(() => {
+  const fallback = getStripePricingTableConfig()
+
+  return {
+    publishableKey: props.publishableKey || fallback.publishableKey,
+    pricingTableId: props.pricingTableId || fallback.pricingTableId
+  }
+})
+
+const hasValidConfig = computed(() => {
+  const { publishableKey, pricingTableId } = resolvedConfig.value
+  return Boolean(publishableKey && pricingTableId)
+})
+
+const { loadScript } = useStripePricingTableLoader()
+
+const renderPricingTable = async () => {
+  if (!tableContainer.value) return
+
+  const { publishableKey, pricingTableId } = resolvedConfig.value
+  if (!publishableKey || !pricingTableId) {
+    return
+  }
+
+  const renderKey = `${publishableKey}:${pricingTableId}`
+  if (renderKey === lastRenderedKey.value && isReady.value) {
+    return
+  }
+
+  try {
+    await loadScript()
+    loadError.value = null
+    if (!tableContainer.value) {
+      return
+    }
+    if (stripeElement.value) {
+      stripeElement.value.remove()
+      stripeElement.value = null
+    }
+    const stripeTable = document.createElement('stripe-pricing-table')
+    stripeTable.setAttribute('publishable-key', publishableKey)
+    stripeTable.setAttribute('pricing-table-id', pricingTableId)
+    stripeTable.style.display = 'block'
+    stripeTable.style.width = '100%'
+    stripeTable.style.minHeight = '420px'
+    tableContainer.value.appendChild(stripeTable)
+    stripeElement.value = stripeTable
+    lastRenderedKey.value = renderKey
+    isReady.value = true
+  } catch (error) {
+    console.error('[StripePricingTable] Failed to load pricing table', error)
+    loadError.value = (error as Error).message
+    isReady.value = false
+  }
+}
+
+watch(
+  [resolvedConfig, () => tableContainer.value],
+  () => {
+    if (!hasValidConfig.value) return
+    if (!tableContainer.value) return
+    void renderPricingTable()
+  },
+  { immediate: true }
+)
+
+onBeforeUnmount(() => {
+  stripeElement.value?.remove()
+  stripeElement.value = null
+})
+</script>

src/platform/cloud/subscription/components/SubscribeButton.vue

@@ -24,8 +24,9 @@
 
 <script setup lang="ts">
 import Button from 'primevue/button'
-import { computed, onBeforeUnmount, ref } from 'vue'
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
 
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
@@ -51,12 +52,18 @@ const emit = defineEmits<{
   subscribed: []
 }>()
 
-const { subscribe, isActiveSubscription, fetchStatus } = useSubscription()
+const { subscribe, isActiveSubscription, fetchStatus, showSubscriptionDialog } =
+  useSubscription()
+const { flags } = useFeatureFlags()
+const shouldUseStripePricing = computed(
+  () => isCloud && Boolean(flags.subscriptionTiersEnabled)
+)
 const telemetry = useTelemetry()
 
 const isLoading = ref(false)
 const isPolling = ref(false)
 let pollInterval: number | null = null
+const isAwaitingStripeSubscription = ref(false)
 
 const POLL_INTERVAL_MS = 3000 // Poll every 3 seconds
 const MAX_POLL_DURATION_MS = 5 * 60 * 1000 // Stop polling after 5 minutes
@@ -102,11 +109,27 @@ const stopPolling = () => {
   isLoading.value = false
 }
 
+watch(
+  [isAwaitingStripeSubscription, isActiveSubscription],
+  ([awaiting, isActive]) => {
+    if (shouldUseStripePricing.value && awaiting && isActive) {
+      emit('subscribed')
+      isAwaitingStripeSubscription.value = false
+    }
+  }
+)
+
 const handleSubscribe = async () => {
   if (isCloud) {
     useTelemetry()?.trackSubscription('subscribe_clicked')
   }
 
+  if (shouldUseStripePricing.value) {
+    isAwaitingStripeSubscription.value = true
+    showSubscriptionDialog()
+    return
+  }
+
   isLoading.value = true
   try {
     await subscribe()
@@ -120,5 +143,6 @@ const handleSubscribe = async () => {
 
 onBeforeUnmount(() => {
   stopPolling()
+  isAwaitingStripeSubscription.value = false
 })
 </script>