From 19a3a9fc76c6df1bcf5a56137e0eba6ec4a734c1 Mon Sep 17 00:00:00 2001
From: bymyself <cbyrne@comfy.org>
Date: Tue, 9 Dec 2025 01:28:06 -0800
Subject: [PATCH 1/6] feat: Add Stripe pricing table integration for
 subscription dialog

- Add StripePricingTable component with Stripe web component integration
- Update subscription dialog to show Stripe pricing table when feature flag enabled
- Add stripePricingTableConfig for environment-based configuration
- Add useStripePricingTableLoader composable for script loading
- Update dialog styling with proper width (1100px) and rounded corners
- Add contact us and enterprise links to subscription dialog
- Include comprehensive test coverage for new components
---
 .env_example                                  |   4 +
 global.d.ts                                   |   2 +
 src/config/stripePricingTableConfig.ts        |  34 ++++
 src/locales/en/main.json                      |  11 ++
 .../components/StripePricingTable.vue         | 120 ++++++++++++
 .../components/SubscribeButton.vue            |  35 +++-
 .../SubscriptionRequiredDialogContent.vue     | 182 +++++++++++++++++-
 .../useStripePricingTableLoader.ts            | 102 ++++++++++
 .../composables/useSubscription.ts            |   6 +-
 .../composables/useSubscriptionDialog.ts      |  31 ++-
 src/platform/remoteConfig/types.ts            |   2 +
 .../settings/composables/useSettingUI.ts      |  22 ++-
 src/vite-env.d.ts                             |   9 +
 .../components/StripePricingTable.test.ts     |  75 ++++++++
 14 files changed, 617 insertions(+), 18 deletions(-)
 create mode 100644 src/config/stripePricingTableConfig.ts
 create mode 100644 src/platform/cloud/subscription/components/StripePricingTable.vue
 create mode 100644 src/platform/cloud/subscription/composables/useStripePricingTableLoader.ts
 create mode 100644 tests-ui/tests/platform/cloud/subscription/components/StripePricingTable.test.ts

diff --git a/.env_example b/.env_example
index b77b87bc0e..d8624b1ec1 100644
--- a/.env_example
+++ b/.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
diff --git a/global.d.ts b/global.d.ts
index 7f7dd832f8..d24c7c40b5 100644
--- a/global.d.ts
+++ b/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
diff --git a/src/config/stripePricingTableConfig.ts b/src/config/stripePricingTableConfig.ts
new file mode 100644
index 0000000000..99ba454443
--- /dev/null
+++ b/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'
+
+function getEnvValue(
+  key: 'VITE_STRIPE_PUBLISHABLE_KEY' | 'VITE_STRIPE_PRICING_TABLE_ID'
+) {
+  return import.meta.env?.[key]
+}
+
+export function getStripePricingTableConfig() {
+  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
+  }
+}
+
+export function hasStripePricingTableConfig() {
+  const { publishableKey, pricingTableId } = getStripePricingTableConfig()
+  return Boolean(publishableKey && pricingTableId)
+}
diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index 73908a3767..f7cbee358e 100644
--- a/src/locales/en/main.json
+++ b/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": {
diff --git a/src/platform/cloud/subscription/components/StripePricingTable.vue b/src/platform/cloud/subscription/components/StripePricingTable.vue
new file mode 100644
index 0000000000..b2248648a0
--- /dev/null
+++ b/src/platform/cloud/subscription/components/StripePricingTable.vue
@@ -0,0 +1,120 @@
+<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,
+  hasStripePricingTableConfig
+} 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(() => {
+  if (props.publishableKey && props.pricingTableId) return true
+  return hasStripePricingTableConfig()
+})
+
+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>
diff --git a/src/platform/cloud/subscription/components/SubscribeButton.vue b/src/platform/cloud/subscription/components/SubscribeButton.vue
index be57d3dada..f2b47d6140 100644
--- a/src/platform/cloud/subscription/components/SubscribeButton.vue
+++ b/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,22 @@ const emit = defineEmits<{
   subscribed: []
 }>()
 
-const { subscribe, isActiveSubscription, fetchStatus } = useSubscription()
+const { subscribe, isActiveSubscription, fetchStatus, showSubscriptionDialog } =
+  useSubscription()
+const { featureFlag } = useFeatureFlags()
+const subscriptionTiersEnabled = featureFlag(
+  'subscription_tiers_enabled',
+  false
+)
+const shouldUseStripePricing = computed(
+  () => isCloud && subscriptionTiersEnabled.value
+)
 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 +113,30 @@ const stopPolling = () => {
   isLoading.value = false
 }
 
+watch(
+  () => ({
+    awaiting: isAwaitingStripeSubscription.value,
+    isActive: isActiveSubscription.value
+  }),
+  ({ 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 +150,6 @@ const handleSubscribe = async () => {
 
 onBeforeUnmount(() => {
   stopPolling()
+  isAwaitingStripeSubscription.value = false
 })
 </script>
diff --git a/src/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue b/src/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue
index 54f32c0a8b..f85fd19bb9 100644
--- a/src/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue
+++ b/src/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue
@@ -1,5 +1,68 @@
 <template>
-  <div class="relative grid h-full grid-cols-5">
+  <div
+    v-if="showStripePricingTable"
+    class="flex flex-col gap-6 rounded-[24px] border border-interface-stroke bg-[var(--p-dialog-background)] p-4 shadow-[0_25px_80px_rgba(5,6,12,0.45)] md:p-6"
+  >
+    <div
+      class="flex flex-col gap-6 md:flex-row md:items-start md:justify-between"
+    >
+      <div class="flex flex-col gap-2 text-left md:max-w-2xl">
+        <div
+          class="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.3em] text-text-secondary"
+        >
+          {{ $t('subscription.required.title') }}
+          <CloudBadge
+            reverse-order
+            no-padding
+            background-color="var(--p-dialog-background)"
+            use-subscription
+          />
+        </div>
+        <div class="text-3xl font-semibold leading-tight md:text-4xl">
+          {{ $t('subscription.description') }}
+        </div>
+      </div>
+      <Button
+        icon="pi pi-times"
+        text
+        rounded
+        class="h-10 w-10 shrink-0 text-text-secondary hover:bg-white/10"
+        :aria-label="$t('g.close')"
+        @click="handleClose"
+      />
+    </div>
+
+    <StripePricingTable class="flex-1" />
+
+    <!-- Contact and Enterprise Links -->
+    <div class="flex flex-col items-center">
+      <p class="text-sm text-text-secondary">
+        {{ $t('subscription.haveQuestions') }}
+      </p>
+      <div class="flex items-center gap-2">
+        <Button
+          :label="$t('subscription.contactUs')"
+          text
+          severity="secondary"
+          icon="pi pi-comments"
+          icon-pos="right"
+          class="h-6 p-1 text-sm text-text-secondary hover:text-white"
+          @click="handleContactUs"
+        />
+        <span class="text-sm text-text-secondary">{{ $t('g.or') }}</span>
+        <Button
+          :label="$t('subscription.viewEnterprise')"
+          text
+          severity="secondary"
+          icon="pi pi-external-link"
+          icon-pos="right"
+          class="h-6 p-1 text-sm text-text-secondary hover:text-white"
+          @click="handleViewEnterprise"
+        />
+      </div>
+    </div>
+  </div>
+  <div v-else class="legacy-dialog relative grid h-full grid-cols-5">
     <!-- Custom close button -->
     <Button
       icon="pi pi-times"
@@ -7,7 +70,7 @@
       rounded
       class="absolute top-2.5 right-2.5 z-10 h-8 w-8 p-0 text-white hover:bg-white/20"
       :aria-label="$t('g.close')"
-      @click="onClose"
+      @click="handleClose"
     />
 
     <div
@@ -72,13 +135,19 @@
 
 <script setup lang="ts">
 import Button from 'primevue/button'
+import { computed, onBeforeUnmount, watch } from 'vue'
 
 import CloudBadge from '@/components/topbar/CloudBadge.vue'
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
+import StripePricingTable from '@/platform/cloud/subscription/components/StripePricingTable.vue'
 import SubscribeButton from '@/platform/cloud/subscription/components/SubscribeButton.vue'
 import SubscriptionBenefits from '@/platform/cloud/subscription/components/SubscriptionBenefits.vue'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
+import { isCloud } from '@/platform/distribution/types'
+import { useTelemetry } from '@/platform/telemetry'
+import { useCommandStore } from '@/stores/commandStore'
 
-defineProps<{
+const props = defineProps<{
   onClose: () => void
 }>()
 
@@ -86,19 +155,120 @@ const emit = defineEmits<{
   close: [subscribed: boolean]
 }>()
 
-const { formattedMonthlyPrice } = useSubscription()
+const { formattedMonthlyPrice, fetchStatus, isActiveSubscription } =
+  useSubscription()
+const { featureFlag } = useFeatureFlags()
+const subscriptionTiersEnabled = featureFlag(
+  'subscription_tiers_enabled',
+  false
+)
+const commandStore = useCommandStore()
+const telemetry = useTelemetry()
+
+const showStripePricingTable = computed(
+  () =>
+    subscriptionTiersEnabled.value &&
+    isCloud &&
+    window.__CONFIG__?.subscription_required
+)
+
+const POLL_INTERVAL_MS = 3000
+const MAX_POLL_DURATION_MS = 5 * 60 * 1000
+let pollInterval: number | null = null
+let pollStartTime = 0
+
+const stopPolling = () => {
+  if (pollInterval) {
+    clearInterval(pollInterval)
+    pollInterval = null
+  }
+}
+
+const startPolling = () => {
+  stopPolling()
+  pollStartTime = Date.now()
+
+  const poll = async () => {
+    try {
+      await fetchStatus()
+    } catch (error) {
+      console.error(
+        '[SubscriptionDialog] Failed to poll subscription status',
+        error
+      )
+    }
+  }
+
+  void poll()
+  pollInterval = window.setInterval(() => {
+    if (Date.now() - pollStartTime > MAX_POLL_DURATION_MS) {
+      stopPolling()
+      return
+    }
+    void poll()
+  }, POLL_INTERVAL_MS)
+}
+
+watch(
+  showStripePricingTable,
+  (enabled) => {
+    if (enabled) {
+      startPolling()
+    } else {
+      stopPolling()
+    }
+  },
+  { immediate: true }
+)
+
+watch(
+  () => isActiveSubscription.value,
+  (isActive) => {
+    if (isActive && showStripePricingTable.value) {
+      emit('close', true)
+      handleClose()
+    }
+  }
+)
 
 const handleSubscribed = () => {
   emit('close', true)
 }
+
+const handleClose = () => {
+  stopPolling()
+  props.onClose()
+}
+
+const handleContactUs = async () => {
+  telemetry?.trackHelpResourceClicked({
+    resource_type: 'help_feedback',
+    is_external: true,
+    source: 'subscription'
+  })
+  await commandStore.execute('Comfy.ContactSupport')
+}
+
+const handleViewEnterprise = () => {
+  telemetry?.trackHelpResourceClicked({
+    resource_type: 'docs',
+    is_external: true,
+    source: 'subscription'
+  })
+  window.open('https://www.comfy.org/cloud/enterprise', '_blank')
+}
+
+onBeforeUnmount(() => {
+  stopPolling()
+})
 </script>
 
 <style scoped>
-:deep(.bg-comfy-menu-secondary) {
+.legacy-dialog :deep(.bg-comfy-menu-secondary) {
   background-color: transparent;
 }
 
-:deep(.p-button) {
+.legacy-dialog :deep(.p-button) {
   color: white;
 }
 </style>
diff --git a/src/platform/cloud/subscription/composables/useStripePricingTableLoader.ts b/src/platform/cloud/subscription/composables/useStripePricingTableLoader.ts
new file mode 100644
index 0000000000..2ab4aa92f1
--- /dev/null
+++ b/src/platform/cloud/subscription/composables/useStripePricingTableLoader.ts
@@ -0,0 +1,102 @@
+import { createSharedComposable } from '@vueuse/core'
+import { ref } from 'vue'
+
+import { STRIPE_PRICING_TABLE_SCRIPT_SRC } from '@/config/stripePricingTableConfig'
+
+function useStripePricingTableLoaderInternal() {
+  const isLoaded = ref(false)
+  const isLoading = ref(false)
+  const error = ref<Error | null>(null)
+  let pendingPromise: Promise<void> | null = null
+
+  const resolveLoaded = () => {
+    isLoaded.value = true
+    isLoading.value = false
+    pendingPromise = null
+  }
+
+  const resolveError = (err: Error) => {
+    error.value = err
+    isLoading.value = false
+    pendingPromise = null
+  }
+
+  const loadScript = (): Promise<void> => {
+    if (isLoaded.value) {
+      return Promise.resolve()
+    }
+
+    if (pendingPromise) {
+      return pendingPromise
+    }
+
+    const existingScript = document.querySelector<HTMLScriptElement>(
+      `script[src="${STRIPE_PRICING_TABLE_SCRIPT_SRC}"]`
+    )
+
+    if (existingScript) {
+      if (existingScript.dataset.loaded === 'true') {
+        resolveLoaded()
+        return Promise.resolve()
+      }
+
+      pendingPromise = new Promise<void>((resolve, reject) => {
+        existingScript.addEventListener(
+          'load',
+          () => {
+            existingScript.dataset.loaded = 'true'
+            resolveLoaded()
+            resolve()
+          },
+          { once: true }
+        )
+        existingScript.addEventListener(
+          'error',
+          () => {
+            const err = new Error('Stripe pricing table script failed to load')
+            resolveError(err)
+            reject(err)
+          },
+          { once: true }
+        )
+      })
+
+      return pendingPromise
+    }
+
+    isLoading.value = true
+    pendingPromise = new Promise<void>((resolve, reject) => {
+      const script = document.createElement('script')
+      script.src = STRIPE_PRICING_TABLE_SCRIPT_SRC
+      script.async = true
+      script.dataset.loaded = 'false'
+
+      script.addEventListener('load', () => {
+        script.dataset.loaded = 'true'
+        resolveLoaded()
+        resolve()
+      })
+
+      script.addEventListener('error', () => {
+        const err = new Error('Stripe pricing table script failed to load')
+        resolveError(err)
+        reject(err)
+      })
+
+      document.head.appendChild(script)
+    })
+
+    return pendingPromise
+  }
+
+  return {
+    loadScript,
+    isLoaded,
+    isLoading,
+    error
+  }
+}
+
+export const useStripePricingTableLoader = createSharedComposable(
+  useStripePricingTableLoaderInternal
+)
diff --git a/src/platform/cloud/subscription/composables/useSubscription.ts b/src/platform/cloud/subscription/composables/useSubscription.ts
index ccd54fe5e4..add78fa20e 100644
--- a/src/platform/cloud/subscription/composables/useSubscription.ts
+++ b/src/platform/cloud/subscription/composables/useSubscription.ts
@@ -9,11 +9,11 @@ import { MONTHLY_SUBSCRIPTION_PRICE } from '@/config/subscriptionPricesConfig'
 import { t } from '@/i18n'
 import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
-import { useDialogService } from '@/services/dialogService'
 import {
   FirebaseAuthStoreError,
   useFirebaseAuthStore
 } from '@/stores/firebaseAuthStore'
+import { useDialogService } from '@/services/dialogService'
 import { useSubscriptionCancellationWatcher } from './useSubscriptionCancellationWatcher'
 
 type CloudSubscriptionCheckoutResponse = {
@@ -37,7 +37,7 @@ function useSubscriptionInternal() {
     return subscriptionStatus.value?.is_active ?? false
   })
   const { reportError, accessBillingPortal } = useFirebaseAuthActions()
-  const dialogService = useDialogService()
+  const { showSubscriptionRequiredDialog } = useDialogService()
 
   const { getAuthHeader } = useFirebaseAuthStore()
   const { wrapWithErrorHandlingAsync } = useErrorHandling()
@@ -102,7 +102,7 @@ function useSubscriptionInternal() {
       useTelemetry()?.trackSubscription('modal_opened')
     }
 
-    void dialogService.showSubscriptionRequiredDialog()
+    showSubscriptionRequiredDialog()
   }
 
   const shouldWatchCancellation = (): boolean =>
diff --git a/src/platform/cloud/subscription/composables/useSubscriptionDialog.ts b/src/platform/cloud/subscription/composables/useSubscriptionDialog.ts
index 1f3542c14a..e471f7dadc 100644
--- a/src/platform/cloud/subscription/composables/useSubscriptionDialog.ts
+++ b/src/platform/cloud/subscription/composables/useSubscriptionDialog.ts
@@ -1,4 +1,7 @@
-import { defineAsyncComponent } from 'vue'
+import { computed, defineAsyncComponent } from 'vue'
+
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
+import { isCloud } from '@/platform/distribution/types'
 import { useDialogService } from '@/services/dialogService'
 import { useDialogStore } from '@/stores/dialogStore'
 
@@ -7,6 +10,18 @@ const DIALOG_KEY = 'subscription-required'
 export const useSubscriptionDialog = () => {
   const dialogService = useDialogService()
   const dialogStore = useDialogStore()
+  const { featureFlag } = useFeatureFlags()
+  const subscriptionTiersEnabled = featureFlag(
+    'subscription_tiers_enabled',
+    false
+  )
+
+  const showStripeDialog = computed(
+    () =>
+      subscriptionTiersEnabled.value &&
+      isCloud &&
+      window.__CONFIG__?.subscription_required
+  )
 
   function hide() {
     dialogStore.closeDialog({ key: DIALOG_KEY })
@@ -25,7 +40,19 @@ export const useSubscriptionDialog = () => {
         onClose: hide
       },
       dialogComponentProps: {
-        style: 'width: 700px;'
+        style: showStripeDialog.value
+          ? 'width: min(1100px, 90vw); max-height: 90vh;'
+          : 'width: 700px;',
+        pt: showStripeDialog.value
+          ? {
+              root: {
+                class: '!rounded-[32px] overflow-visible'
+              },
+              content: {
+                class: '!p-0 bg-transparent'
+              }
+            }
+          : undefined
       }
     })
   }
diff --git a/src/platform/remoteConfig/types.ts b/src/platform/remoteConfig/types.ts
index 7375ec048d..1faf919e4c 100644
--- a/src/platform/remoteConfig/types.ts
+++ b/src/platform/remoteConfig/types.ts
@@ -38,4 +38,6 @@ export type RemoteConfig = {
   asset_update_options_enabled?: boolean
   private_models_enabled?: boolean
   subscription_tiers_enabled?: boolean
+  stripe_publishable_key?: string
+  stripe_pricing_table_id?: string
 }
diff --git a/src/platform/settings/composables/useSettingUI.ts b/src/platform/settings/composables/useSettingUI.ts
index cfeb571dbd..d057057923 100644
--- a/src/platform/settings/composables/useSettingUI.ts
+++ b/src/platform/settings/composables/useSettingUI.ts
@@ -3,6 +3,7 @@ import type { Component } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { isCloud } from '@/platform/distribution/types'
 import type { SettingTreeNode } from '@/platform/settings/settingStore'
 import { useSettingStore } from '@/platform/settings/settingStore'
@@ -11,6 +12,7 @@ import { isElectron } from '@/utils/envUtil'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 import { buildTree } from '@/utils/treeUtil'
 import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
+import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 
 interface SettingPanelItem {
   node: SettingTreeNode
@@ -33,6 +35,12 @@ export function useSettingUI(
   const activeCategory = ref<SettingTreeNode | null>(null)
 
   const { shouldRenderVueNodes } = useVueFeatureFlags()
+  const { isActiveSubscription } = useSubscription()
+  const { featureFlag } = useFeatureFlags()
+  const subscriptionTiersEnabled = featureFlag(
+    'subscription_tiers_enabled',
+    false
+  )
 
   const settingRoot = computed<SettingTreeNode>(() => {
     const root = buildTree(
@@ -102,6 +110,13 @@ export function useSettingUI(
           )
         }
 
+  const shouldShowPlanCreditsPanel = computed(() => {
+    if (!subscriptionPanel) return false
+    if (!isCloud || !window.__CONFIG__?.subscription_required) return false
+    if (!subscriptionTiersEnabled.value) return true
+    return isActiveSubscription.value
+  })
+
   const userPanel: SettingPanelItem = {
     node: {
       key: 'user',
@@ -154,9 +169,7 @@ export function useSettingUI(
       keybindingPanel,
       extensionPanel,
       ...(isElectron() ? [serverConfigPanel] : []),
-      ...(isCloud &&
-      window.__CONFIG__?.subscription_required &&
-      subscriptionPanel
+      ...(shouldShowPlanCreditsPanel.value && subscriptionPanel
         ? [subscriptionPanel]
         : [])
     ].filter((panel) => panel.component)
@@ -191,8 +204,7 @@ export function useSettingUI(
       children: [
         userPanel.node,
         ...(isLoggedIn.value &&
-        isCloud &&
-        window.__CONFIG__?.subscription_required &&
+        shouldShowPlanCreditsPanel.value &&
         subscriptionPanel
           ? [subscriptionPanel.node]
           : []),
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index c38a275850..e02fab73a3 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -16,6 +16,15 @@ declare global {
   interface Window {
     __COMFYUI_FRONTEND_VERSION__: string
   }
+
+  interface ImportMetaEnv {
+    readonly VITE_STRIPE_PUBLISHABLE_KEY?: string
+    readonly VITE_STRIPE_PRICING_TABLE_ID?: string
+  }
+
+  interface ImportMeta {
+    readonly env: ImportMetaEnv
+  }
 }
 
 export {}
diff --git a/tests-ui/tests/platform/cloud/subscription/components/StripePricingTable.test.ts b/tests-ui/tests/platform/cloud/subscription/components/StripePricingTable.test.ts
new file mode 100644
index 0000000000..1292185533
--- /dev/null
+++ b/tests-ui/tests/platform/cloud/subscription/components/StripePricingTable.test.ts
@@ -0,0 +1,75 @@
+import { mount, flushPromises } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import enMessages from '@/locales/en/main.json' with { type: 'json' }
+import StripePricingTable from '@/platform/cloud/subscription/components/StripePricingTable.vue'
+
+const mockLoadScript = vi.fn()
+let currentConfig = {
+  publishableKey: 'pk_test_123',
+  pricingTableId: 'prctbl_123'
+}
+let hasConfig = true
+
+vi.mock('@/config/stripePricingTableConfig', () => ({
+  getStripePricingTableConfig: () => currentConfig,
+  hasStripePricingTableConfig: () => hasConfig
+}))
+
+vi.mock(
+  '@/platform/cloud/subscription/composables/useStripePricingTableLoader',
+  () => ({
+    useStripePricingTableLoader: () => ({
+      loadScript: mockLoadScript,
+      isLoaded: { value: false },
+      isLoading: { value: false },
+      error: { value: null }
+    })
+  })
+)
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: { en: enMessages }
+})
+
+const mountComponent = () =>
+  mount(StripePricingTable, {
+    global: {
+      plugins: [i18n]
+    }
+  })
+
+describe('StripePricingTable', () => {
+  beforeEach(() => {
+    currentConfig = {
+      publishableKey: 'pk_test_123',
+      pricingTableId: 'prctbl_123'
+    }
+    hasConfig = true
+    mockLoadScript.mockReset().mockResolvedValue(undefined)
+  })
+
+  it('renders the Stripe pricing table when config is available', async () => {
+    const wrapper = mountComponent()
+
+    await flushPromises()
+
+    expect(mockLoadScript).toHaveBeenCalled()
+    expect(wrapper.find('stripe-pricing-table').exists()).toBe(true)
+  })
+
+  it('shows missing config message when credentials are absent', () => {
+    hasConfig = false
+    currentConfig = { publishableKey: '', pricingTableId: '' }
+
+    const wrapper = mountComponent()
+
+    expect(
+      wrapper.find('[data-testid="stripe-table-missing-config"]').exists()
+    ).toBe(true)
+    expect(mockLoadScript).not.toHaveBeenCalled()
+  })
+})

From 8ba0a6a9ed371fc83c503945cc458b1bd4e2b309 Mon Sep 17 00:00:00 2001
From: bymyself <cbyrne@comfy.org>
Date: Tue, 9 Dec 2025 02:23:24 -0800
Subject: [PATCH 2/6] fix: Add void operator to promise call to satisfy linting

---
 src/platform/cloud/subscription/composables/useSubscription.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/platform/cloud/subscription/composables/useSubscription.ts b/src/platform/cloud/subscription/composables/useSubscription.ts
index add78fa20e..9762647d83 100644
--- a/src/platform/cloud/subscription/composables/useSubscription.ts
+++ b/src/platform/cloud/subscription/composables/useSubscription.ts
@@ -102,7 +102,7 @@ function useSubscriptionInternal() {
       useTelemetry()?.trackSubscription('modal_opened')
     }
 
-    showSubscriptionRequiredDialog()
+    void showSubscriptionRequiredDialog()
   }
 
   const shouldWatchCancellation = (): boolean =>

From ebe29b1a078be86cffc2ab5e36bf7c149e0c57c4 Mon Sep 17 00:00:00 2001
From: bymyself <cbyrne@comfy.org>
Date: Tue, 9 Dec 2025 02:43:40 -0800
Subject: [PATCH 3/6] test: Improve StripePricingTable tests and fix event
 listener memory leaks

- Add attribute assertions for publishable-key and pricing-table-id
- Replace static mock values with mutable Vue refs for better test control
- Add { once: true } option to event listeners to prevent memory leaks
- Rename mockLoadScript to mockLoadStripeScript for clarity
---
 .../useStripePricingTableLoader.ts            | 30 ++++++++++++-------
 .../components/StripePricingTable.test.ts     | 30 +++++++++++++------
 2 files changed, 40 insertions(+), 20 deletions(-)

diff --git a/src/platform/cloud/subscription/composables/useStripePricingTableLoader.ts b/src/platform/cloud/subscription/composables/useStripePricingTableLoader.ts
index 2ab4aa92f1..25d0ba3f83 100644
--- a/src/platform/cloud/subscription/composables/useStripePricingTableLoader.ts
+++ b/src/platform/cloud/subscription/composables/useStripePricingTableLoader.ts
@@ -71,17 +71,25 @@ function useStripePricingTableLoaderInternal() {
       script.async = true
       script.dataset.loaded = 'false'
 
-      script.addEventListener('load', () => {
-        script.dataset.loaded = 'true'
-        resolveLoaded()
-        resolve()
-      })
-
-      script.addEventListener('error', () => {
-        const err = new Error('Stripe pricing table script failed to load')
-        resolveError(err)
-        reject(err)
-      })
+      script.addEventListener(
+        'load',
+        () => {
+          script.dataset.loaded = 'true'
+          resolveLoaded()
+          resolve()
+        },
+        { once: true }
+      )
+
+      script.addEventListener(
+        'error',
+        () => {
+          const err = new Error('Stripe pricing table script failed to load')
+          resolveError(err)
+          reject(err)
+        },
+        { once: true }
+      )
 
       document.head.appendChild(script)
     })
diff --git a/tests-ui/tests/platform/cloud/subscription/components/StripePricingTable.test.ts b/tests-ui/tests/platform/cloud/subscription/components/StripePricingTable.test.ts
index 1292185533..cdc12420af 100644
--- a/tests-ui/tests/platform/cloud/subscription/components/StripePricingTable.test.ts
+++ b/tests-ui/tests/platform/cloud/subscription/components/StripePricingTable.test.ts
@@ -1,11 +1,12 @@
 import { mount, flushPromises } from '@vue/test-utils'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
+import { ref } from 'vue'
 
 import enMessages from '@/locales/en/main.json' with { type: 'json' }
 import StripePricingTable from '@/platform/cloud/subscription/components/StripePricingTable.vue'
 
-const mockLoadScript = vi.fn()
+const mockLoadStripeScript = vi.fn()
 let currentConfig = {
   publishableKey: 'pk_test_123',
   pricingTableId: 'prctbl_123'
@@ -17,14 +18,18 @@ vi.mock('@/config/stripePricingTableConfig', () => ({
   hasStripePricingTableConfig: () => hasConfig
 }))
 
+const mockIsLoaded = ref(false)
+const mockIsLoading = ref(false)
+const mockError = ref(null)
+
 vi.mock(
   '@/platform/cloud/subscription/composables/useStripePricingTableLoader',
   () => ({
     useStripePricingTableLoader: () => ({
-      loadScript: mockLoadScript,
-      isLoaded: { value: false },
-      isLoading: { value: false },
-      error: { value: null }
+      loadScript: mockLoadStripeScript,
+      isLoaded: mockIsLoaded,
+      isLoading: mockIsLoading,
+      error: mockError
     })
   })
 )
@@ -49,7 +54,10 @@ describe('StripePricingTable', () => {
       pricingTableId: 'prctbl_123'
     }
     hasConfig = true
-    mockLoadScript.mockReset().mockResolvedValue(undefined)
+    mockLoadStripeScript.mockReset().mockResolvedValue(undefined)
+    mockIsLoaded.value = false
+    mockIsLoading.value = false
+    mockError.value = null
   })
 
   it('renders the Stripe pricing table when config is available', async () => {
@@ -57,8 +65,12 @@ describe('StripePricingTable', () => {
 
     await flushPromises()
 
-    expect(mockLoadScript).toHaveBeenCalled()
-    expect(wrapper.find('stripe-pricing-table').exists()).toBe(true)
+    expect(mockLoadStripeScript).toHaveBeenCalled()
+
+    const stripePricingTable = wrapper.find('stripe-pricing-table')
+    expect(stripePricingTable.exists()).toBe(true)
+    expect(stripePricingTable.attributes('publishable-key')).toBe('pk_test_123')
+    expect(stripePricingTable.attributes('pricing-table-id')).toBe('prctbl_123')
   })
 
   it('shows missing config message when credentials are absent', () => {
@@ -70,6 +82,6 @@ describe('StripePricingTable', () => {
     expect(
       wrapper.find('[data-testid="stripe-table-missing-config"]').exists()
     ).toBe(true)
-    expect(mockLoadScript).not.toHaveBeenCalled()
+    expect(mockLoadStripeScript).not.toHaveBeenCalled()
   })
 })

From 7e1bd0222377bef92f8cb95780370ce464721b7b Mon Sep 17 00:00:00 2001
From: bymyself <cbyrne@comfy.org>
Date: Tue, 9 Dec 2025 02:48:47 -0800
Subject: [PATCH 4/6] refactor: Address code quality improvements and
 consistency issues

- Add explicit StripePricingTableConfig interface and return type annotation
- Remove unnecessary optional chaining on import.meta.env
- Fix hasValidConfig to use resolved config values consistently
- Replace featureFlag calls with unified flags object from useFeatureFlags
- Optimize watch in SubscribeButton to avoid object allocation on each run
- Remove duplicate close mechanism in SubscriptionRequiredDialogContent
- Remove unused import in StripePricingTable component
---
 src/config/stripePricingTableConfig.ts        |  9 +++++--
 .../components/StripePricingTable.vue         |  9 +++----
 .../components/SubscribeButton.vue            | 15 +++--------
 .../SubscriptionRequiredDialogContent.vue     |  1 -
 .../settings/composables/useSettingUI.ts      |  9 ++-----
 .../components/StripePricingTable.test.ts     | 26 +++++++++++++++++++
 6 files changed, 42 insertions(+), 27 deletions(-)

diff --git a/src/config/stripePricingTableConfig.ts b/src/config/stripePricingTableConfig.ts
index 99ba454443..81a3915d81 100644
--- a/src/config/stripePricingTableConfig.ts
+++ b/src/config/stripePricingTableConfig.ts
@@ -3,13 +3,18 @@ import { remoteConfig } from '@/platform/remoteConfig/remoteConfig'
 export const STRIPE_PRICING_TABLE_SCRIPT_SRC =
   'https://js.stripe.com/v3/pricing-table.js'
 
+export interface StripePricingTableConfig {
+  publishableKey: string
+  pricingTableId: string
+}
+
 function getEnvValue(
   key: 'VITE_STRIPE_PUBLISHABLE_KEY' | 'VITE_STRIPE_PRICING_TABLE_ID'
 ) {
-  return import.meta.env?.[key]
+  return import.meta.env[key]
 }
 
-export function getStripePricingTableConfig() {
+export function getStripePricingTableConfig(): StripePricingTableConfig {
   const publishableKey =
     remoteConfig.value.stripe_publishable_key ||
     window.__CONFIG__?.stripe_publishable_key ||
diff --git a/src/platform/cloud/subscription/components/StripePricingTable.vue b/src/platform/cloud/subscription/components/StripePricingTable.vue
index b2248648a0..8efa7c21ed 100644
--- a/src/platform/cloud/subscription/components/StripePricingTable.vue
+++ b/src/platform/cloud/subscription/components/StripePricingTable.vue
@@ -30,10 +30,7 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, ref, watch } from 'vue'
 
-import {
-  getStripePricingTableConfig,
-  hasStripePricingTableConfig
-} from '@/config/stripePricingTableConfig'
+import { getStripePricingTableConfig } from '@/config/stripePricingTableConfig'
 import { useStripePricingTableLoader } from '@/platform/cloud/subscription/composables/useStripePricingTableLoader'
 
 const props = defineProps<{
@@ -57,8 +54,8 @@ const resolvedConfig = computed(() => {
 })
 
 const hasValidConfig = computed(() => {
-  if (props.publishableKey && props.pricingTableId) return true
-  return hasStripePricingTableConfig()
+  const { publishableKey, pricingTableId } = resolvedConfig.value
+  return Boolean(publishableKey && pricingTableId)
 })
 
 const { loadScript } = useStripePricingTableLoader()
diff --git a/src/platform/cloud/subscription/components/SubscribeButton.vue b/src/platform/cloud/subscription/components/SubscribeButton.vue
index f2b47d6140..670fb48b0c 100644
--- a/src/platform/cloud/subscription/components/SubscribeButton.vue
+++ b/src/platform/cloud/subscription/components/SubscribeButton.vue
@@ -54,13 +54,9 @@ const emit = defineEmits<{
 
 const { subscribe, isActiveSubscription, fetchStatus, showSubscriptionDialog } =
   useSubscription()
-const { featureFlag } = useFeatureFlags()
-const subscriptionTiersEnabled = featureFlag(
-  'subscription_tiers_enabled',
-  false
-)
+const { flags } = useFeatureFlags()
 const shouldUseStripePricing = computed(
-  () => isCloud && subscriptionTiersEnabled.value
+  () => isCloud && Boolean(flags.subscriptionTiersEnabled)
 )
 const telemetry = useTelemetry()
 
@@ -114,11 +110,8 @@ const stopPolling = () => {
 }
 
 watch(
-  () => ({
-    awaiting: isAwaitingStripeSubscription.value,
-    isActive: isActiveSubscription.value
-  }),
-  ({ awaiting, isActive }) => {
+  [isAwaitingStripeSubscription, isActiveSubscription],
+  ([awaiting, isActive]) => {
     if (shouldUseStripePricing.value && awaiting && isActive) {
       emit('subscribed')
       isAwaitingStripeSubscription.value = false
diff --git a/src/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue b/src/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue
index f85fd19bb9..2dd4ae548c 100644
--- a/src/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue
+++ b/src/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue
@@ -226,7 +226,6 @@ watch(
   (isActive) => {
     if (isActive && showStripePricingTable.value) {
       emit('close', true)
-      handleClose()
     }
   }
 )
diff --git a/src/platform/settings/composables/useSettingUI.ts b/src/platform/settings/composables/useSettingUI.ts
index d057057923..6273a2fec9 100644
--- a/src/platform/settings/composables/useSettingUI.ts
+++ b/src/platform/settings/composables/useSettingUI.ts
@@ -36,11 +36,7 @@ export function useSettingUI(
 
   const { shouldRenderVueNodes } = useVueFeatureFlags()
   const { isActiveSubscription } = useSubscription()
-  const { featureFlag } = useFeatureFlags()
-  const subscriptionTiersEnabled = featureFlag(
-    'subscription_tiers_enabled',
-    false
-  )
+  const { flags } = useFeatureFlags()
 
   const settingRoot = computed<SettingTreeNode>(() => {
     const root = buildTree(
@@ -112,8 +108,7 @@ export function useSettingUI(
 
   const shouldShowPlanCreditsPanel = computed(() => {
     if (!subscriptionPanel) return false
-    if (!isCloud || !window.__CONFIG__?.subscription_required) return false
-    if (!subscriptionTiersEnabled.value) return true
+    if (!flags.subscriptionTiersEnabled) return true
     return isActiveSubscription.value
   })
 
diff --git a/tests-ui/tests/platform/cloud/subscription/components/StripePricingTable.test.ts b/tests-ui/tests/platform/cloud/subscription/components/StripePricingTable.test.ts
index cdc12420af..9a4d9a3524 100644
--- a/tests-ui/tests/platform/cloud/subscription/components/StripePricingTable.test.ts
+++ b/tests-ui/tests/platform/cloud/subscription/components/StripePricingTable.test.ts
@@ -84,4 +84,30 @@ describe('StripePricingTable', () => {
     ).toBe(true)
     expect(mockLoadStripeScript).not.toHaveBeenCalled()
   })
+
+  it('shows loading indicator when script is loading', async () => {
+    // Mock loadScript to never resolve, simulating loading state
+    mockLoadStripeScript.mockImplementation(() => new Promise(() => {}))
+
+    const wrapper = mountComponent()
+    await flushPromises()
+
+    expect(wrapper.find('[data-testid="stripe-table-loading"]').exists()).toBe(
+      true
+    )
+    expect(wrapper.find('stripe-pricing-table').exists()).toBe(false)
+  })
+
+  it('shows error indicator when script fails to load', async () => {
+    // Mock loadScript to reject, simulating error state
+    mockLoadStripeScript.mockRejectedValue(new Error('Script failed to load'))
+
+    const wrapper = mountComponent()
+    await flushPromises()
+
+    expect(wrapper.find('[data-testid="stripe-table-error"]').exists()).toBe(
+      true
+    )
+    expect(wrapper.find('stripe-pricing-table').exists()).toBe(false)
+  })
 })

From 355414f087bee8e4def1f7ff8afdc5f518e8d510 Mon Sep 17 00:00:00 2001
From: bymyself <cbyrne@comfy.org>
Date: Tue, 9 Dec 2025 02:53:50 -0800
Subject: [PATCH 5/6] fix: Address race conditions and duplicate feature flag
 usage

- Fix race condition in useStripePricingTableLoader by setting isLoading=true immediately when finding existing script and checking script state after attaching listeners
- Replace duplicate featureFlag computed in useSubscriptionDialog with existing flags.subscriptionTiersEnabled for consistency
- Add proper check for already-loaded scripts to handle synchronous resolution cases
---
 .../composables/useStripePricingTableLoader.ts   | 16 ++++++++++++----
 .../composables/useSubscriptionDialog.ts         |  8 ++------
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/platform/cloud/subscription/composables/useStripePricingTableLoader.ts b/src/platform/cloud/subscription/composables/useStripePricingTableLoader.ts
index 25d0ba3f83..06776166bc 100644
--- a/src/platform/cloud/subscription/composables/useStripePricingTableLoader.ts
+++ b/src/platform/cloud/subscription/composables/useStripePricingTableLoader.ts
@@ -35,10 +35,7 @@ function useStripePricingTableLoaderInternal() {
     )
 
     if (existingScript) {
-      if (existingScript.dataset.loaded === 'true') {
-        resolveLoaded()
-        return Promise.resolve()
-      }
+      isLoading.value = true
 
       pendingPromise = new Promise<void>((resolve, reject) => {
         existingScript.addEventListener(
@@ -59,6 +56,17 @@ function useStripePricingTableLoaderInternal() {
           },
           { once: true }
         )
+
+        // Check if script already loaded after attaching listeners
+        if (
+          existingScript.dataset.loaded === 'true' ||
+          (existingScript as any).readyState === 'complete' ||
+          (existingScript as any).complete
+        ) {
+          existingScript.dataset.loaded = 'true'
+          resolveLoaded()
+          resolve()
+        }
       })
 
       return pendingPromise
diff --git a/src/platform/cloud/subscription/composables/useSubscriptionDialog.ts b/src/platform/cloud/subscription/composables/useSubscriptionDialog.ts
index e471f7dadc..30dea16dce 100644
--- a/src/platform/cloud/subscription/composables/useSubscriptionDialog.ts
+++ b/src/platform/cloud/subscription/composables/useSubscriptionDialog.ts
@@ -10,15 +10,11 @@ const DIALOG_KEY = 'subscription-required'
 export const useSubscriptionDialog = () => {
   const dialogService = useDialogService()
   const dialogStore = useDialogStore()
-  const { featureFlag } = useFeatureFlags()
-  const subscriptionTiersEnabled = featureFlag(
-    'subscription_tiers_enabled',
-    false
-  )
+  const { flags } = useFeatureFlags()
 
   const showStripeDialog = computed(
     () =>
-      subscriptionTiersEnabled.value &&
+      flags.subscriptionTiersEnabled &&
       isCloud &&
       window.__CONFIG__?.subscription_required
   )

From 926e649671f9473c5a7478041b2737f236645e06 Mon Sep 17 00:00:00 2001
From: bymyself <cbyrne@comfy.org>
Date: Tue, 9 Dec 2025 03:03:04 -0800
Subject: [PATCH 6/6] chore: Remove unused exports to fix knip check

- Remove unused hasStripePricingTableConfig function
- Change StripePricingTableConfig from exported to internal interface
- No breaking changes since these exports weren't being used
---
 src/config/stripePricingTableConfig.ts | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/config/stripePricingTableConfig.ts b/src/config/stripePricingTableConfig.ts
index 81a3915d81..6c1f0e0cf1 100644
--- a/src/config/stripePricingTableConfig.ts
+++ b/src/config/stripePricingTableConfig.ts
@@ -3,7 +3,7 @@ import { remoteConfig } from '@/platform/remoteConfig/remoteConfig'
 export const STRIPE_PRICING_TABLE_SCRIPT_SRC =
   'https://js.stripe.com/v3/pricing-table.js'
 
-export interface StripePricingTableConfig {
+interface StripePricingTableConfig {
   publishableKey: string
   pricingTableId: string
 }
@@ -32,8 +32,3 @@ export function getStripePricingTableConfig(): StripePricingTableConfig {
     pricingTableId
   }
 }
-
-export function hasStripePricingTableConfig() {
-  const { publishableKey, pricingTableId } = getStripePricingTableConfig()
-  return Boolean(publishableKey && pricingTableId)
-}