create-brainerce-store 1.11.1 → 1.11.2

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

@@ -1,379 +1,534 @@
-'use client';
-
-import { useEffect, useState, useRef, useCallback } from 'react';
-import type { PaymentIntent } from 'brainerce';
-import { getClient } from '@/lib/brainerce';
-import { useTranslations } from '@/lib/translations';
-import { LoadingSpinner } from '@/components/shared/loading-spinner';
-import { cn } from '@/lib/utils';
-
-// SDK-specific globals injected by external payment scripts
-declare global {
-  interface Window {
-    growPayment?: {
-      init: (config: {
-        environment: string;
-        version: number;
-        events: {
-          onSuccess?: (response: unknown) => void;
-          onFailure?: (response: unknown) => void;
-          onError?: (response: unknown) => void;
-          onTimeout?: (response: unknown) => void;
-          onWalletChange?: (state: string) => void;
-          onPaymentStart?: (response: unknown) => void;
-          onPaymentCancel?: (response: unknown) => void;
-        };
-      }) => void;
-      renderPaymentOptions: (authCode: string) => void;
-    };
-  }
-}
-
-// Payment SDK script URLs — resolved per provider
-// SRI hashes must be regenerated when the provider updates their SDK
-const PAYMENT_SDK_URL = 'https://cdn.meshulam.co.il/sdk/gs.min.js';
-const PAYMENT_SDK_SRI = 'sha384-e1OYzZERZLgbR8Zw1I4Ww/J7qXGyEsZb7LF0z5W/sbnTsFwtxop7sKZsLGNp6CB1';
-const APPLE_PAY_SDK_URL = 'https://meshulam.co.il/_media/js/apple_pay_sdk/sdk.min.js';
-const APPLE_PAY_SDK_SRI = 'sha384-CG67HXmWBeyuRR/jqFsYr6dGEMFyuZw3/hRmcyACJRYHGb/1ebEkQZyzdJXDc9/u';
-
-interface PaymentStepProps {
-  checkoutId: string;
-  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);
-  });
-}
-
-/**
- * Wait for the payment SDK global to become available (set by the SDK script).
- */
-function waitForPaymentSdkGlobal(timeoutMs = 5000): Promise<boolean> {
-  return new Promise((resolve) => {
-    if (window.growPayment) {
-      resolve(true);
-      return;
-    }
-    const start = Date.now();
-    const check = setInterval(() => {
-      if (window.growPayment) {
-        clearInterval(check);
-        resolve(true);
-      } else if (Date.now() - start > timeoutMs) {
-        clearInterval(check);
-        resolve(false);
-      }
-    }, 50);
-  });
-}
-
-export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
-  const t = useTranslations('checkout');
-  const [paymentIntent, setPaymentIntent] = useState<PaymentIntent | null>(null);
-  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 handleSdkPaymentSuccess = useCallback(
-    async (response: unknown) => {
-      console.info('Payment SDK success:', JSON.stringify(response));
-      try {
-        const client = getClient();
-        // Try response.data first, fall back to response itself
-        const resp = response as Record<string, unknown>;
-        const data = (resp?.data && typeof resp.data === 'object' ? resp.data : resp) as
-          | Record<string, unknown>
-          | undefined;
-        await client.confirmSdkPayment(checkoutId, data || undefined);
-      } catch (err) {
-        console.warn('Failed to confirm payment with backend:', err);
-      }
-      window.location.href = `/order-confirmation?checkout_id=${checkoutId}`;
-    },
-    [checkoutId]
-  );
-
-  const handleSdkPaymentFailure = useCallback((response: unknown) => {
-    console.error('Payment SDK failure:', response);
-    const msg = (response as { message?: string })?.message || 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 = (response as { message?: string })?.message || '';
-    // Grow SDK fires transient errors during startup before its internal
-    // state is ready. The polling mechanism in Step 3 retries
-    // renderPaymentOptions() until the SDK is fully initialized.
-    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'));
-  }, []);
-
-  // Step 1: Load SDK scripts — just load, don't init yet
-  useEffect(() => {
-    let cancelled = false;
-
-    async function loadSdkScripts() {
-      // Load Apple Pay SDK (optional)
-      await loadScript(APPLE_PAY_SDK_URL, true, APPLE_PAY_SDK_SRI);
-
-      // Load payment SDK script
-      await loadScript(PAYMENT_SDK_URL, false, PAYMENT_SDK_SRI);
-
-      // Wait for SDK global to be set by the script
-      const available = await waitForPaymentSdkGlobal();
-
-      if (cancelled) return;
-
-      if (!available) {
-        setError(t('failedToLoadPaymentSdk'));
-        return;
-      }
-
-      setSdkScriptLoaded(true);
-    }
-
-    loadSdkScripts();
-
-    return () => {
-      cancelled = true;
-    };
-  }, []);
-
-  // Step 2: Create payment intent (API call)
-  // Use ref to prevent double-creation in React StrictMode
-  const intentCreated = useRef(false);
-  useEffect(() => {
-    if (intentCreated.current) return;
-    intentCreated.current = true;
-
-    async function createIntent() {
-      try {
-        setLoading(true);
-        setError(null);
-        const client = getClient();
-
-        const successUrl = `${window.location.origin}/order-confirmation?checkout_id=${checkoutId}`;
-        const cancelUrl = `${window.location.origin}/checkout?checkout_id=${checkoutId}&canceled=true`;
-
-        const intent = await client.createPaymentIntent(checkoutId, {
-          successUrl,
-          cancelUrl,
-        });
-
-        setPaymentIntent(intent);
-
-        // Auto-redirect for Stripe
-        if (intent.provider === 'stripe') {
-          window.location.href = intent.clientSecret;
-        }
-      } catch (err) {
-        const message = err instanceof Error ? err.message : t('paymentError');
-        setError(message);
-      } finally {
-        setLoading(false);
-      }
-    }
-
-    createIntent();
-  }, [checkoutId]);
-
-  // Step 3: When BOTH SDK script is loaded AND payment intent is ready:
-  //   - init() with the CORRECT environment from the payment intent
-  //   - wait for onWalletChange signal before calling renderPaymentOptions()
-  useEffect(() => {
-    if (!sdkScriptLoaded) return;
-    if (!paymentIntent || paymentIntent.provider !== 'grow') return;
-    if (!window.growPayment) return;
-    if (renderAttempted.current) return;
-
-    renderAttempted.current = true;
-
-    // Parse environment and authCode from clientSecret (format: "ENV|authCode")
-    const pipeIndex = paymentIntent.clientSecret.indexOf('|');
-    const env = pipeIndex !== -1 ? paymentIntent.clientSecret.substring(0, pipeIndex) : 'DEV';
-    const authCode =
-      pipeIndex !== -1
-        ? paymentIntent.clientSecret.substring(pipeIndex + 1)
-        : paymentIntent.clientSecret;
-
-    let rendered = false;
-    let walletReady = false;
-    let pollId: ReturnType<typeof setInterval>;
-
-    function tryRenderPaymentOptions() {
-      if (rendered) return;
-      try {
-        window.growPayment?.renderPaymentOptions(authCode);
-        rendered = true;
-        clearInterval(pollId);
-        setSdkReady(true);
-        console.info('Payment SDK: renderPaymentOptions succeeded');
-      } catch (err) {
-        console.info('Payment SDK: renderPaymentOptions not ready yet', err);
-      }
-    }
-
-    console.info('Payment SDK: init with environment:', env);
-    window.growPayment.init({
-      environment: env,
-      version: 1,
-      events: {
-        onSuccess: handleSdkPaymentSuccess,
-        onFailure: handleSdkPaymentFailure,
-        onError: handleSdkPaymentError,
-        onWalletChange: (state: string) => {
-          console.info('Payment SDK wallet state:', state);
-          walletReady = true;
-          tryRenderPaymentOptions();
-        },
-      },
-    });
-
-    // Poll as fallback — but respect the SDK's readiness signal:
-    //  - First 4s: only render if onWalletChange has fired (SDK says it's ready)
-    //  - After 4s: force-attempt even without wallet signal (onWalletChange may not fire)
-    const WALLET_GRACE_PERIOD = 4000;
-    const initTime = Date.now();
-
-    const timeoutId = setTimeout(() => {
-      if (walletReady) tryRenderPaymentOptions();
-      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) {
-            tryRenderPaymentOptions();
-          }
-          if (!rendered && attempts >= maxAttempts) {
-            clearInterval(pollId);
-            console.error('Payment SDK: renderPaymentOptions failed after max attempts');
-            setError(t('paymentError'));
-          }
-        }, 500);
-      }
-    }, 1000);
-
-    return () => {
-      clearTimeout(timeoutId);
-      clearInterval(pollId);
-    };
-  }, [
-    sdkScriptLoaded,
-    paymentIntent,
-    handleSdkPaymentSuccess,
-    handleSdkPaymentFailure,
-    handleSdkPaymentError,
-  ]);
-
-  if (loading) {
-    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('preparingPayment')}</p>
-      </div>
-    );
-  }
-
-  if (error) {
-    const isNotConfigured =
-      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>
-        <h3 className="text-foreground mb-2 text-lg font-semibold">
-          {isNotConfigured ? t('paymentNotConfigured') : t('paymentError')}
-        </h3>
-        <p className="text-muted-foreground mx-auto max-w-md text-sm">
-          {isNotConfigured ? t('paymentNotConfiguredDesc') : error}
-        </p>
-      </div>
-    );
-  }
-
-  // SDK-based provider: render the payment widget container
-  if (paymentIntent?.provider === 'grow') {
-    return (
-      <div className={cn('py-4', className)}>
-        {!sdkReady && (
-          <div className="flex flex-col items-center justify-center py-8">
-            <LoadingSpinner size="lg" />
-            <p className="text-muted-foreground mt-4 text-sm">{t('loadingPaymentOptions')}</p>
-          </div>
-        )}
-        <div id="grow-payment-container" />
-      </div>
-    );
-  }
-
-  // Stripe/other redirect-based: show redirecting state
-  if (paymentIntent) {
-    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>
-          .
-        </p>
-      </div>
-    );
-  }
-
-  return null;
-}
+'use client';
+
+import { useEffect, useState, useRef, useCallback } from 'react';
+import type { PaymentIntent, PaymentClientSdk } from 'brainerce';
+import { getClient } from '@/lib/brainerce';
+import { useTranslations } from '@/lib/translations';
+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.
+ */
+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 },
+  additionalScripts: [
+    {
+      url: 'https://meshulam.co.il/_media/js/apple_pay_sdk/sdk.min.js',
+      integrity:
+        'sha384-CG67HXmWBeyuRR/jqFsYr6dGEMFyuZw3/hRmcyACJRYHGb/1ebEkQZyzdJXDc9/u',
+      optional: true,
+    },
+  ],
+  bodyStyles:
+    '[id*="Gr0W8-"],[id*="Gr0W8-"] *,[class*="Gr0W8-"],[class*="Gr0W8-"] *{direction:ltr !important;text-align:left}',
+};
+
+interface PaymentStepProps {
+  checkoutId: string;
+  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)
+  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);
+  const [preloadedSdk, setPreloadedSdk] = useState<PaymentClientSdk | null>(null);
+  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(
+    async (response: unknown) => {
+      console.info('Payment SDK success:', JSON.stringify(response));
+      try {
+        const client = getClient();
+        const resp = response as Record<string, unknown>;
+        const data = (resp?.data && typeof resp.data === 'object' ? resp.data : resp) as
+          | Record<string, unknown>
+          | undefined;
+        await client.confirmSdkPayment(checkoutId, data || undefined);
+      } catch (err) {
+        console.warn('Failed to confirm payment with backend:', err);
+      }
+      window.location.href = `/order-confirmation?checkout_id=${checkoutId}`;
+    },
+    [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).
+  useEffect(() => {
+    if (initialized.current) return;
+    initialized.current = true;
+
+    const client = getClient();
+    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
+    const providerPromise = client
+      .getPaymentProviders()
+      .then((config) => {
+        const sdk = config.defaultProvider?.clientSdk;
+        if (sdk) setPreloadedSdk(sdk);
+        return sdk || null;
+      })
+      .catch((err) => {
+        console.warn('Failed to preload payment providers:', err);
+        return null;
+      });
+
+    const intentPromise = client
+      .createPaymentIntent(checkoutId, { successUrl, cancelUrl })
+      .then((intent) => {
+        setPaymentIntent(intent);
+        return intent;
+      })
+      .catch((err) => {
+        const message = err instanceof Error ? err.message : t('paymentError');
+        setError(message);
+        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;
+
+      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);
+    });
+
+    // 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') {
+        window.location.href = intent.clientSecret;
+      }
+    });
+  }, [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'));
+        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);
+      }
+    }
+
+    // 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();
+
+    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 () => {
+      clearTimeout(timeoutId);
+      clearInterval(pollId);
+    };
+  }, [
+    sdkScriptLoaded,
+    paymentIntent,
+    preloadedSdk,
+    handleSdkPaymentSuccess,
+    handleSdkPaymentFailure,
+    handleSdkPaymentError,
+    handleSdkPaymentTimeout,
+  ]);
+
+  // --- Render ---
+
+  if (loading) {
+    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('preparingPayment')}</p>
+      </div>
+    );
+  }
+
+  if (error) {
+    const isNotConfigured =
+      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>
+        <h3 className="text-foreground mb-2 text-lg font-semibold">
+          {isNotConfigured ? t('paymentNotConfigured') : t('paymentError')}
+        </h3>
+        <p className="text-muted-foreground mx-auto max-w-md text-sm">
+          {isNotConfigured ? t('paymentNotConfiguredDesc') : error}
+        </p>
+      </div>
+    );
+  }
+
+  if (!paymentIntent) return null;
+
+  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`;
+    return (
+      <div className={cn('py-4', className)}>
+        {!sdkReady && (
+          <div className="flex flex-col items-center justify-center py-8">
+            <LoadingSpinner size="lg" />
+            <p className="text-muted-foreground mt-4 text-sm">{t('loadingPaymentOptions')}</p>
+          </div>
+        )}
+        <div id={containerId} />
+      </div>
+    );
+  }
+
+  // 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"
+        />
+      </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>
+        .
+      </p>
+    </div>
+  );
+}