Feature/v2/stripeorsupabaseNotEnabled (#5006)

Removed current plan section from static plan to match connected version

stripe publishable key not required to show plans or checkout in hosted
version

lazy load plans when needed not on load

frontend/src/proprietary/components/shared/stripeCheckout/StripeCheckout.tsx

@@ -1,8 +1,7 @@
 import React, { useEffect } from 'react';
-import { Modal, Text, Alert, Stack, Button, Group, ActionIcon } from '@mantine/core';
+import { Modal, Text, Group, ActionIcon } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import LocalIcon from '@app/components/shared/LocalIcon';
-import { loadStripe } from '@stripe/stripe-js';
 import licenseService from '@app/services/licenseService';
 import { useIsMobile } from '@app/hooks/useIsMobile';
 import { Z_INDEX_OVER_CONFIG_MODAL } from '@app/styles/zIndex';
@@ -37,8 +36,6 @@ if (STRIPE_KEY && !STRIPE_KEY.startsWith('pk_')) {
   );
 }
 
-const stripePromise = STRIPE_KEY ? loadStripe(STRIPE_KEY) : null;
-
 const StripeCheckout: React.FC<StripeCheckoutProps> = ({
   opened,
   onClose,
@@ -192,25 +189,8 @@ const StripeCheckout: React.FC<StripeCheckoutProps> = ({
 
   // Render stage content
   const renderContent = () => {
-    // Check if Stripe is configured
-    if (!stripePromise) {
-      return (
-        <Alert color="red" title={t('payment.stripeNotConfigured', 'Stripe Not Configured')}>
-          <Stack gap="md">
-            <Text size="sm">
-              {t(
-                'payment.stripeNotConfiguredMessage',
-                'Stripe payment integration is not configured. Please contact your administrator.'
-              )}
-            </Text>
-            <Button variant="outline" onClick={handleClose}>
-              {t('common.close', 'Close')}
-            </Button>
-          </Stack>
-        </Alert>
-      );
-    }
-
+    // Don't block checkout - hosted mode works without publishable key
+    // The checkout will automatically redirect to Stripe hosted page if key is missing
     switch (checkoutState.state.currentStage) {
       case 'email':
         return (

frontend/src/proprietary/components/shared/stripeCheckout/stages/PaymentStage.tsx

@@ -35,10 +35,15 @@ export const PaymentStage: React.FC<PaymentStageProps> = ({
   }
 
   if (!stripePromise) {
+    // This should only happen if embedded mode was attempted without key
+    // Hosted checkout should have redirected before reaching this component
     return (
-      <Text size="sm" c="red">
-        Stripe is not configured properly.
-      </Text>
+      <Stack align="center" gap="md" style={{ padding: '2rem 0' }}>
+        <Loader size="lg" />
+        <Text size="sm" c="dimmed" mt="md">
+          {t('payment.redirecting', 'Redirecting to secure checkout...')}
+        </Text>
+      </Stack>
     );
   }