create-brainerce-store 1.11.2 → 1.12.0

package/templates/nextjs/base/src/components/checkout/payment-step.tsx

@@ -8,27 +8,18 @@ import { LoadingSpinner } from '@/components/shared/loading-spinner';
 import { cn } from '@/lib/utils';
 
 /**
- * Backward-compat defaults for stores running an older backend that doesn't
- * return `clientSdk` in the PaymentIntent response.
- * Remove once all backends are updated.
+ * Backward-compat defaults when backend doesn't return clientSdk.
  */
 const LEGACY_GROW_SDK: PaymentClientSdk = {
   renderType: 'sdk-widget',
   scriptUrl: 'https://cdn.meshulam.co.il/sdk/gs.min.js',
-  scriptIntegrity:
-    'sha384-e1OYzZERZLgbR8Zw1I4Ww/J7qXGyEsZb7LF0z5W/sbnTsFwtxop7sKZsLGNp6CB1',
   globalName: 'growPayment',
   initMethod: 'init',
   renderMethod: 'renderPaymentOptions',
   containerId: 'grow-payment-container',
-  initConfig: { version: 1 },
+  initConfig: { version: 1, environment: 'DEV' },
   additionalScripts: [
-    {
-      url: 'https://meshulam.co.il/_media/js/apple_pay_sdk/sdk.min.js',
-      integrity:
-        'sha384-CG67HXmWBeyuRR/jqFsYr6dGEMFyuZw3/hRmcyACJRYHGb/1ebEkQZyzdJXDc9/u',
-      optional: true,
-    },
+    { url: 'https://meshulam.co.il/_media/js/apple_pay_sdk/sdk.min.js', optional: true },
   ],
   bodyStyles:
     '[id*="Gr0W8-"],[id*="Gr0W8-"] *,[class*="Gr0W8-"],[class*="Gr0W8-"] *{direction:ltr !important;text-align:left}',
@@ -39,154 +30,41 @@ interface PaymentStepProps {
   className?: string;
 }
 
-/**
- * Load a script tag if not already present in the DOM.
- * Resolves when the script loads (or immediately if already present).
- */
-function loadScript(src: string, optional = false, integrity?: string): Promise<void> {
-  return new Promise((resolve) => {
-    if (document.querySelector(`script[src="${src}"]`)) {
-      resolve();
-      return;
-    }
-    const script = document.createElement('script');
-    script.src = src;
-    script.async = true;
-    if (integrity) {
-      script.integrity = integrity;
-      script.crossOrigin = 'anonymous';
-    }
-    script.onload = () => resolve();
-    script.onerror = () => {
-      if (optional) {
-        resolve(); // Non-blocking for optional SDKs
-      } else {
-        resolve(); // Still resolve — caller handles missing global
-      }
-    };
-    document.head.appendChild(script);
-  });
-}
-
-/**
- * Load a stylesheet if not already present in the DOM.
- */
-function loadStylesheet(href: string): void {
-  if (document.querySelector(`link[href="${href}"]`)) return;
-  const link = document.createElement('link');
-  link.rel = 'stylesheet';
-  link.href = href;
-  document.head.appendChild(link);
-}
-
-/**
- * After the SDK runtime script loads, ensure its CSS is also loaded.
- * Some SDKs load CSS dynamically but may fail silently if the CDN path
- * doesn't match. Detect the runtime version from loaded scripts and
- * force-load the CSS if missing.
- */
-function ensureSdkCss(sdkScriptUrl: string): void {
-  const scripts = document.querySelectorAll('script[src]');
-  const cdnBase = new URL(sdkScriptUrl).origin;
-
-  for (const el of scripts) {
-    const src = (el as HTMLScriptElement).src;
-    const match = src.match(
-      new RegExp(`${cdnBase.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}/sdk/([\\d.]+)/js/`)
-    );
-    if (match) {
-      const version = match[1];
-      const cssUrl = `${cdnBase}/sdk/${version}/css/w.css`;
-      if (!document.querySelector(`link[href*="/sdk/${version}/css/"]`)) {
-        console.info(`Payment SDK: force-loading CSS from ${cssUrl}`);
-        loadStylesheet(cssUrl);
-      }
-      return;
-    }
-  }
-}
-
-/**
- * Wait for a global variable to become available on `window`.
- */
-function waitForGlobal(globalName: string, timeoutMs = 5000): Promise<boolean> {
-  return new Promise((resolve) => {
-    if ((window as any)[globalName]) {
-      resolve(true);
-      return;
-    }
-    const start = Date.now();
-    const check = setInterval(() => {
-      if ((window as any)[globalName]) {
-        clearInterval(check);
-        resolve(true);
-      } else if (Date.now() - start > timeoutMs) {
-        clearInterval(check);
-        resolve(false);
-      }
-    }, 50);
-  });
-}
-
-/**
- * Resolve the clientSdk config from multiple sources (in priority order):
- *   1. Preloaded provider config (from getPaymentProviders)
- *   2. Intent's clientSdk (returned by createPaymentIntent)
- *   3. Legacy hardcoded defaults (backward compat)
- */
 function resolveClientSdk(
   intent: PaymentIntent | null,
   preloadedSdk?: PaymentClientSdk | null
 ): PaymentClientSdk {
-  if (preloadedSdk) return preloadedSdk;
-  if (intent?.clientSdk) return intent.clientSdk;
-
-  // Legacy fallback for older backends that don't return clientSdk
-  if (intent?.provider === 'grow') return LEGACY_GROW_SDK;
-
-  // Default: treat as redirect (Stripe, PayPal, unknown)
+  const fullSdk = [preloadedSdk, intent?.clientSdk].find((s) => s?.renderType);
+  const runtimeSdk = intent?.clientSdk;
+  if (fullSdk) {
+    if (!runtimeSdk || runtimeSdk === fullSdk) return fullSdk;
+    return {
+      ...fullSdk,
+      ...(runtimeSdk.renderArg ? { renderArg: runtimeSdk.renderArg } : {}),
+      ...(runtimeSdk.initConfig
+        ? { initConfig: { ...fullSdk.initConfig, ...runtimeSdk.initConfig } }
+        : {}),
+    };
+  }
+  const legacy = intent?.provider === 'grow' ? LEGACY_GROW_SDK : null;
+  if (legacy && runtimeSdk) {
+    return {
+      ...legacy,
+      ...(runtimeSdk.renderArg ? { renderArg: runtimeSdk.renderArg } : {}),
+      ...(runtimeSdk.initConfig
+        ? { initConfig: { ...legacy.initConfig, ...runtimeSdk.initConfig } }
+        : {}),
+    };
+  }
+  if (legacy) return legacy;
   return { renderType: 'redirect' };
 }
 
-/**
- * Extract message string from an SDK callback response.
- * Handles both string responses and object responses with a `message` field.
- */
 function extractMessage(response: unknown): string {
   if (typeof response === 'string') return response;
   return (response as { message?: string })?.message || '';
 }
 
-/**
- * Load all SDK scripts for a given clientSdk config.
- * Returns true if the global became available, false otherwise.
- */
-async function loadSdkScripts(sdkConfig: PaymentClientSdk): Promise<boolean> {
-  if (!sdkConfig.scriptUrl || !sdkConfig.globalName) return false;
-
-  // Load additional scripts first (e.g., Apple Pay SDK)
-  if (sdkConfig.additionalScripts) {
-    await Promise.all(
-      sdkConfig.additionalScripts.map((s) =>
-        loadScript(s.url, s.optional ?? true, s.integrity)
-      )
-    );
-  }
-
-  // Load main SDK script
-  await loadScript(sdkConfig.scriptUrl, false, sdkConfig.scriptIntegrity);
-
-  // Wait for the global to be set by the script
-  const available = await waitForGlobal(sdkConfig.globalName);
-
-  // Ensure CSS is loaded
-  if (available) {
-    ensureSdkCss(sdkConfig.scriptUrl);
-  }
-
-  return available;
-}
-
 export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
   const t = useTranslations('checkout');
   const [paymentIntent, setPaymentIntent] = useState<PaymentIntent | null>(null);
@@ -194,11 +72,18 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [sdkReady, setSdkReady] = useState(false);
-  const [sdkScriptLoaded, setSdkScriptLoaded] = useState(false);
-  const renderAttempted = useRef(false);
   const initialized = useRef(false);
 
-  const handleSdkPaymentSuccess = useCallback(
+  // Stable refs for SDK event callbacks (avoids stale closures in onload)
+  const cbRef = useRef({
+    onSuccess: (_r: unknown) => {},
+    onFailure: (_r: unknown) => {},
+    onError: (_r: unknown) => {},
+    onTimeout: () => {},
+    onWalletChange: (_s: string) => {},
+  });
+
+  const handleSuccess = useCallback(
     async (response: unknown) => {
       console.info('Payment SDK success:', JSON.stringify(response));
       try {
@@ -216,35 +101,47 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
     [checkoutId]
   );
 
-  const handleSdkPaymentFailure = useCallback((response: unknown) => {
-    console.error('Payment SDK failure:', response);
-    const msg = extractMessage(response) || t('paymentError');
-    setError(msg);
-  }, []);
-
-  const handleSdkPaymentError = useCallback((response: unknown) => {
-    const TRANSIENT_SDK_ERRORS = [
-      'Wallet not initialized',
-      "SDK was not loaded as needed and therefore can't run",
-    ];
-
-    const msg = extractMessage(response);
-    if (TRANSIENT_SDK_ERRORS.some((e) => msg.includes(e))) {
-      console.info('Payment SDK: transient startup error, waiting for retry...', msg);
-      return;
-    }
-    console.error('Payment SDK error:', response);
-    setError(msg || t('paymentError'));
-  }, []);
-
-  const handleSdkPaymentTimeout = useCallback(() => {
-    console.warn('Payment SDK: wallet timed out');
-    setError(t('paymentTimedOut'));
-  }, []);
-
-  // Step 0+1: On mount, fire BOTH getPaymentProviders() and createPaymentIntent() in parallel.
-  // getPaymentProviders() resolves the clientSdk config so we can start loading scripts
-  // immediately, without waiting for createPaymentIntent() (which triggers the wallet timer).
+  cbRef.current = {
+    onSuccess: handleSuccess,
+    onFailure: (response: unknown) => {
+      console.error('Payment SDK failure:', response);
+      setError(extractMessage(response) || t('paymentError'));
+    },
+    onError: (response: unknown) => {
+      const TRANSIENT = [
+        'Wallet not initialized',
+        "SDK was not loaded as needed and therefore can't run",
+      ];
+      const msg = extractMessage(response);
+      if (TRANSIENT.some((e) => msg.includes(e))) {
+        console.info('Payment SDK: transient startup error (will retry):', msg);
+        return; // Don't show error — renderWhenReady will retry
+      }
+      console.error('Payment SDK error:', response);
+      setError(msg || t('paymentError'));
+    },
+    onTimeout: () => {
+      console.warn('Payment SDK: wallet timed out');
+      setError(t('paymentTimedOut'));
+    },
+    onWalletChange: (state: string) => {
+      console.info('Payment SDK wallet state:', state);
+      if (state === 'open') setSdkReady(true);
+      if (state === 'close') setSdkReady(false);
+    },
+  };
+
+  // =========================================================================
+  // MAIN EFFECT — Follows Grow SDK docs exactly:
+  //
+  // Step 1: Load gs.min.js (insertBefore, as docs show)
+  // Step 2: s.onload → growPayment.init({ environment, version, events })
+  //         This triggers the SDK to load mp.min.js → CSS, HTML, params, services
+  // Step 3: createPaymentIntent (starts wallet timer — should be AFTER init)
+  // Step 4: growPayment.renderPaymentOptions(authCode)
+  //
+  // "call createPaymentProcess right before you need to render the wallet"
+  // =========================================================================
   useEffect(() => {
     if (initialized.current) return;
     initialized.current = true;
@@ -253,19 +150,147 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
     const successUrl = `${window.location.origin}/order-confirmation?checkout_id=${checkoutId}`;
     const cancelUrl = `${window.location.origin}/checkout?checkout_id=${checkoutId}&canceled=true`;
 
-    // Fire both requests in parallel
+    let sdkInitDone = false;
+    let currentSdk: PaymentClientSdk | null = null;
+    const cleanups: (() => void)[] = [];
+
+    // --- Load SDK script exactly as Grow docs show ---
+    function loadScript(sdk: PaymentClientSdk) {
+      if (!sdk.scriptUrl || !sdk.globalName) return;
+
+      // Inject bodyStyles
+      if (sdk.bodyStyles && !document.querySelector('style[data-payment-sdk]')) {
+        const style = document.createElement('style');
+        style.setAttribute('data-payment-sdk', 'true');
+        style.textContent = sdk.bodyStyles;
+        document.head.appendChild(style);
+        cleanups.push(() => style.remove());
+      }
+
+      // Additional scripts (Apple Pay etc.) — fire and forget
+      if (sdk.additionalScripts) {
+        for (const extra of sdk.additionalScripts) {
+          if (document.querySelector(`script[src="${extra.url}"]`)) continue;
+          const s = document.createElement('script');
+          s.type = 'text/javascript';
+          s.async = true;
+          s.src = extra.url;
+          const ref = document.getElementsByTagName('script')[0];
+          if (ref?.parentNode) ref.parentNode.insertBefore(s, ref);
+          else document.head.appendChild(s);
+        }
+      }
+
+      // Already loaded? Init immediately
+      if ((window as any)[sdk.globalName]) {
+        initSdk(sdk);
+        return;
+      }
+
+      // Load main SDK — insertBefore first <script> as Grow docs show
+      const s = document.createElement('script');
+      s.type = 'text/javascript';
+      s.async = true;
+      s.src = sdk.scriptUrl;
+      s.onload = () => initSdk(sdk); // init DIRECTLY in onload
+      s.onerror = () => {
+        console.error('Payment SDK: script load failed');
+        setError(t('failedToLoadPaymentSdk'));
+      };
+      const ref = document.getElementsByTagName('script')[0];
+      if (ref?.parentNode) ref.parentNode.insertBefore(s, ref);
+      else document.head.appendChild(s);
+    }
+
+    // --- Init: called in s.onload (as Grow docs require) ---
+    function initSdk(sdk: PaymentClientSdk) {
+      const global = (window as any)[sdk.globalName!];
+      if (!global) {
+        setError(t('failedToLoadPaymentSdk'));
+        return;
+      }
+
+      const method = sdk.initMethod || 'init';
+      const config = {
+        ...(sdk.initConfig || {}),
+        events: {
+          onSuccess: (r: unknown) => cbRef.current.onSuccess(r),
+          onFailure: (r: unknown) => cbRef.current.onFailure(r),
+          onError: (r: unknown) => cbRef.current.onError(r),
+          onTimeout: () => cbRef.current.onTimeout(),
+          onWalletChange: (s: string) => cbRef.current.onWalletChange(s),
+        },
+      };
+
+      console.info(`Payment SDK: ${method}({ environment: "${config.environment}", version: ${config.version} })`);
+      global[method](config);
+      sdkInitDone = true;
+    }
+
+    // --- Render: retry until SDK resources are ready ---
+    function renderWhenReady(sdk: PaymentClientSdk, intent: PaymentIntent) {
+      const global = (window as any)[sdk.globalName!];
+      if (!global) return;
+
+      const renderMethod = sdk.renderMethod || 'renderPaymentOptions';
+      const renderArg = sdk.renderArg || intent.clientSecret;
+      let rendered = false;
+      let attempts = 0;
+      const maxAttempts = 40; // 40 × 500ms = 20s
+
+      function attempt() {
+        if (rendered) return;
+        attempts++;
+        try {
+          console.info(`Payment SDK: ${renderMethod}() attempt ${attempts}`);
+          global[renderMethod](renderArg);
+          rendered = true;
+          console.info('Payment SDK: render succeeded');
+        } catch (err) {
+          if (attempts >= maxAttempts) {
+            console.error('Payment SDK: render failed after max attempts');
+            setError(t('paymentError'));
+          }
+        }
+      }
+
+      // Try immediately, then retry every 500ms
+      attempt();
+      if (!rendered) {
+        const id = setInterval(() => {
+          if (rendered || attempts >= maxAttempts) {
+            clearInterval(id);
+            return;
+          }
+          attempt();
+        }, 500);
+        cleanups.push(() => clearInterval(id));
+      }
+    }
+
+    // =============================================
+    // Execution flow
+    // =============================================
+
+    // A) Get SDK config from providers (fast, no wallet timer)
     const providerPromise = client
       .getPaymentProviders()
-      .then((config) => {
-        const sdk = config.defaultProvider?.clientSdk;
+      .then((res) => {
+        const sdk = res.defaultProvider?.clientSdk;
         if (sdk) setPreloadedSdk(sdk);
         return sdk || null;
       })
-      .catch((err) => {
-        console.warn('Failed to preload payment providers:', err);
-        return null;
-      });
+      .catch(() => null);
 
+    // B) Load + init SDK as early as possible
+    providerPromise.then((providerSdk) => {
+      if (providerSdk?.renderType === 'sdk-widget' && providerSdk.scriptUrl) {
+        currentSdk = providerSdk;
+        loadScript(providerSdk);
+      }
+    });
+
+    // C) Create payment intent (starts wallet timer)
     const intentPromise = client
       .createPaymentIntent(checkoutId, { successUrl, cancelUrl })
       .then((intent) => {
@@ -273,173 +298,64 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
         return intent;
       })
       .catch((err) => {
-        const message = err instanceof Error ? err.message : t('paymentError');
-        setError(message);
+        setError(err instanceof Error ? err.message : t('paymentError'));
         return null;
       })
       .finally(() => setLoading(false));
 
-    // Start loading SDK scripts as soon as we know the provider config
-    providerPromise.then(async (sdk) => {
-      if (!sdk || sdk.renderType !== 'sdk-widget' || !sdk.scriptUrl) return;
+    // D) When both ready: resolve final SDK config and render
+    Promise.all([providerPromise, intentPromise]).then(([providerSdk, intent]) => {
+      if (!intent) return;
 
-      const available = await loadSdkScripts(sdk);
-      if (!available) {
-        // Don't error yet — wait for the intent to confirm provider type
-        console.warn('Payment SDK: preload failed, will retry from intent');
-        return;
-      }
-      setSdkScriptLoaded(true);
-    });
+      const sdk = resolveClientSdk(intent, providerSdk);
+      currentSdk = sdk;
 
-    // Handle redirect providers — need to wait for the intent
-    intentPromise.then((intent) => {
-      if (!intent) return;
-      // We don't have preloaded SDK yet — check intent
-      const sdk = intent.clientSdk || (intent.provider === 'grow' ? LEGACY_GROW_SDK : null);
-      if (!sdk || sdk.renderType === 'redirect') {
+      if (sdk.renderType === 'redirect') {
         window.location.href = intent.clientSecret;
+        return;
       }
-    });
-  }, [checkoutId]);
-
-  // Step 2: Fallback — if preloading didn't work (no providers endpoint, or different provider
-  // than expected), load scripts from the intent's clientSdk.
-  useEffect(() => {
-    if (sdkScriptLoaded || !paymentIntent) return;
-
-    const sdk = resolveClientSdk(paymentIntent, preloadedSdk);
-    if (sdk.renderType !== 'sdk-widget' || !sdk.scriptUrl) return;
-
-    let cancelled = false;
-
-    loadSdkScripts(sdk).then((available) => {
-      if (cancelled) return;
-      if (!available) {
-        setError(t('failedToLoadPaymentSdk'));
+      if (sdk.renderType !== 'sdk-widget' || !sdk.globalName) return;
+
+      // If SDK wasn't loaded from providers, load + init now
+      if (!sdkInitDone) {
+        loadScript(sdk);
+        // Wait for init to complete, then render
+        const id = setInterval(() => {
+          if (sdkInitDone) {
+            clearInterval(id);
+            renderWhenReady(sdk, intent);
+          }
+        }, 100);
+        cleanups.push(() => clearInterval(id));
         return;
       }
-      setSdkScriptLoaded(true);
-    });
-
-    return () => {
-      cancelled = true;
-    };
-  }, [paymentIntent, sdkScriptLoaded, preloadedSdk]);
-
-  // Step 3: Inject bodyStyles CSS when SDK is active (for RTL overlay fixes)
-  useEffect(() => {
-    const sdk = resolveClientSdk(paymentIntent, preloadedSdk);
-    if (!sdk.bodyStyles) return;
-
-    const style = document.createElement('style');
-    style.setAttribute('data-payment-sdk', 'true');
-    style.textContent = sdk.bodyStyles;
-    document.head.appendChild(style);
-
-    return () => {
-      style.remove();
-    };
-  }, [paymentIntent, preloadedSdk]);
-
-  // Step 4: When BOTH SDK script is loaded AND payment intent is ready:
-  //   - call initMethod with events + initConfig
-  //   - poll/wait then call renderMethod
-  useEffect(() => {
-    if (!sdkScriptLoaded || !paymentIntent) return;
-
-    const sdk = resolveClientSdk(paymentIntent, preloadedSdk);
-    if (sdk.renderType !== 'sdk-widget') return;
-    if (!sdk.globalName) return;
-    if (renderAttempted.current) return;
-
-    const sdkGlobal = (window as any)[sdk.globalName];
-    if (!sdkGlobal) return;
-
-    renderAttempted.current = true;
-
-    const initMethod = sdk.initMethod || 'init';
-    const renderMethod = sdk.renderMethod || 'renderPaymentOptions';
-    const renderArg = sdk.renderArg || paymentIntent.clientSecret;
-
-    let rendered = false;
-    let walletReady = false;
-    let pollId: ReturnType<typeof setInterval>;
 
-    function tryRender() {
-      if (rendered) return;
-      try {
-        sdkGlobal[renderMethod](renderArg);
-        rendered = true;
-        clearInterval(pollId);
-        setSdkReady(true);
-        console.info(`Payment SDK: ${renderMethod} succeeded`);
-      } catch (err) {
-        console.info(`Payment SDK: ${renderMethod} not ready yet`, err);
+      // Re-init with final config if environment changed
+      if (sdk.initConfig?.environment && currentSdk) {
+        const global = (window as any)[sdk.globalName];
+        if (global) {
+          const method = sdk.initMethod || 'init';
+          global[method]({
+            ...(sdk.initConfig || {}),
+            events: {
+              onSuccess: (r: unknown) => cbRef.current.onSuccess(r),
+              onFailure: (r: unknown) => cbRef.current.onFailure(r),
+              onError: (r: unknown) => cbRef.current.onError(r),
+              onTimeout: () => cbRef.current.onTimeout(),
+              onWalletChange: (s: string) => cbRef.current.onWalletChange(s),
+            },
+          });
+        }
       }
-    }
 
-    // Build init config: merge static manifest config with runtime events
-    // Environment is already in sdk.initConfig (merged by backend from provider's runtime override)
-    const initConfig: Record<string, unknown> = {
-      ...(sdk.initConfig || {}),
-      events: {
-        onSuccess: handleSdkPaymentSuccess,
-        onFailure: handleSdkPaymentFailure,
-        onError: handleSdkPaymentError,
-        onTimeout: handleSdkPaymentTimeout,
-        onWalletChange: (state: string) => {
-          console.info('Payment SDK wallet state:', state);
-          walletReady = true;
-          tryRender();
-        },
-      },
-    };
-
-    console.info(`Payment SDK: ${initMethod} with config:`, initConfig);
-    sdkGlobal[initMethod](initConfig);
-
-    // Poll as fallback — respect SDK's readiness signal:
-    //  - First 4s: only render if onWalletChange has fired
-    //  - After 4s: force-attempt even without wallet signal
-    const WALLET_GRACE_PERIOD = 4000;
-    const initTime = Date.now();
+      // SDK ready — render
+      renderWhenReady(sdk, intent);
+    });
 
-    const timeoutId = setTimeout(() => {
-      if (walletReady) tryRender();
-      if (!rendered) {
-        let attempts = 0;
-        const maxAttempts = 16; // 16 * 500ms = 8s after initial 1s delay
-        pollId = setInterval(() => {
-          attempts++;
-          const elapsed = Date.now() - initTime;
-          if (walletReady || elapsed > WALLET_GRACE_PERIOD) {
-            tryRender();
-          }
-          if (!rendered && attempts >= maxAttempts) {
-            clearInterval(pollId);
-            console.error(`Payment SDK: ${renderMethod} failed after max attempts`);
-            setError(t('paymentError'));
-          }
-        }, 500);
-      }
-    }, 1000);
+    return () => cleanups.forEach((fn) => fn());
+  }, [checkoutId]);
 
-    return () => {
-      clearTimeout(timeoutId);
-      clearInterval(pollId);
-    };
-  }, [
-    sdkScriptLoaded,
-    paymentIntent,
-    preloadedSdk,
-    handleSdkPaymentSuccess,
-    handleSdkPaymentFailure,
-    handleSdkPaymentError,
-    handleSdkPaymentTimeout,
-  ]);
-
-  // --- Render ---
+  // --- UI ---
 
   if (loading) {
     return (
@@ -455,21 +371,10 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
       error.toLowerCase().includes('not configured') ||
       error.toLowerCase().includes('no payment') ||
       error.toLowerCase().includes('provider');
-
     return (
       <div className={cn('py-12 text-center', className)}>
-        <svg
-          className="text-muted-foreground mx-auto mb-4 h-12 w-12"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={1.5}
-            d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
-          />
+        <svg className="text-muted-foreground mx-auto mb-4 h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
         </svg>
         <h3 className="text-foreground mb-2 text-lg font-semibold">
           {isNotConfigured ? t('paymentNotConfigured') : t('paymentError')}
@@ -485,10 +390,8 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
 
   const sdk = resolveClientSdk(paymentIntent, preloadedSdk);
 
-  // SDK-widget provider: render the payment widget container
   if (sdk.renderType === 'sdk-widget') {
-    const containerId =
-      sdk.containerId || `${paymentIntent.provider || 'payment'}-payment-container`;
+    const containerId = sdk.containerId || `${paymentIntent.provider || 'payment'}-payment-container`;
     return (
       <div className={cn('py-4', className)}>
         {!sdkReady && (
@@ -502,32 +405,21 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
     );
   }
 
-  // Iframe provider: embed the payment URL
   if (sdk.renderType === 'iframe') {
     return (
       <div className={cn('py-4', className)}>
-        <iframe
-          src={paymentIntent.clientSecret}
-          className="w-full border-0"
-          style={{ minHeight: '500px' }}
-          title={t('payment')}
-          allow="payment"
-        />
+        <iframe src={paymentIntent.clientSecret} className="w-full border-0" style={{ minHeight: '500px' }} title={t('payment')} allow="payment" />
       </div>
     );
   }
 
-  // Redirect provider: show redirecting state (auto-redirect already triggered in Step 0+1)
   return (
     <div className={cn('flex flex-col items-center justify-center py-12', className)}>
       <LoadingSpinner size="lg" />
       <p className="text-muted-foreground mt-4 text-sm">{t('redirectingToPayment')}</p>
       <p className="text-muted-foreground mt-2 text-xs">
         {t('redirectingHint')}
-        <a href={paymentIntent.clientSecret} className="text-primary hover:underline">
-          {t('clickHere')}
-        </a>
-        .
+        <a href={paymentIntent.clientSecret} className="text-primary hover:underline">{t('clickHere')}</a>.
       </p>
     </div>
   );