create-brainerce-store 1.12.1 → 1.12.3

package/dist/index.js

@@ -31,7 +31,7 @@ var require_package = __commonJS({
   "package.json"(exports2, module2) {
     module2.exports = {
       name: "create-brainerce-store",
-      version: "1.12.1",
+      version: "1.12.2",
       description: "Scaffold a production-ready e-commerce storefront connected to Brainerce",
       bin: {
         "create-brainerce-store": "dist/index.js"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-brainerce-store",
-  "version": "1.12.1",
+  "version": "1.12.3",
   "description": "Scaffold a production-ready e-commerce storefront connected to Brainerce",
   "bin": {
     "create-brainerce-store": "dist/index.js"

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

@@ -82,6 +82,7 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
     onError: (_r: unknown) => {},
     onTimeout: () => {},
     onWalletChange: (_s: string) => {},
+    retryRender: () => {},
   });
 
   const handleSuccess = useCallback(
@@ -115,8 +116,9 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
       ];
       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.info('Payment SDK: transient error, retrying render in 1s:', msg);
+        setTimeout(() => cbRef.current.retryRender(), 1000);
+        return;
       }
       console.error('Payment SDK error:', response);
       setError(msg || t('paymentError'));
@@ -133,6 +135,7 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
       }
       if (state === 'close') setSdkReady(false);
     },
+    retryRender: () => {},
   };
 
   // =========================================================================
@@ -191,6 +194,18 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
         return;
       }
 
+      // Already loading (from a previous call)? Wait for it instead of duplicating
+      if (document.querySelector(`script[src="${sdk.scriptUrl}"]`)) {
+        const waitId = setInterval(() => {
+          if ((window as any)[sdk.globalName!]) {
+            clearInterval(waitId);
+            initSdk(sdk);
+          }
+        }, 100);
+        cleanups.push(() => clearInterval(waitId));
+        return;
+      }
+
       // Load main SDK — insertBefore first <script> as Grow docs show
       const s = document.createElement('script');
       s.type = 'text/javascript';
@@ -208,6 +223,8 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
 
     // --- Init: called in s.onload (as Grow docs require) ---
     function initSdk(sdk: PaymentClientSdk) {
+      if (sdkInitDone) return; // Guard against double init
+
       const global = (window as any)[sdk.globalName!];
       if (!global) {
         setError(t('failedToLoadPaymentSdk'));
@@ -233,37 +250,47 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
       sdkInitDone = true;
     }
 
-    // --- Render: retry until wallet actually opens (onWalletChange) ---
-    // No artificial timeout — the SDK fires onTimeout when the session expires.
-    function renderWhenReady(sdk: PaymentClientSdk, intent: PaymentIntent) {
+    // --- Render: call once, then safety-net retries if wallet doesn't open ---
+    // Grow SDK sometimes silently swallows renderPaymentOptions when its
+    // internal resources (mp.min.js etc.) aren't fully loaded yet.
+    // Strategy: render once, then retry up to 3 times with increasing delays
+    // (2s, 3s, 4s) if onWalletChange("open") hasn't fired.
+    let pendingRender: { sdk: PaymentClientSdk; intent: PaymentIntent } | null = null;
+    let renderAttempts = 0;
+    const MAX_RENDER_ATTEMPTS = 4;
+
+    function renderPayment(sdk: PaymentClientSdk, intent: PaymentIntent) {
       const global = (window as any)[sdk.globalName!];
-      if (!global) return;
+      if (!global || walletOpenRef.current) return;
 
       const renderMethod = sdk.renderMethod || 'renderPaymentOptions';
       const renderArg = sdk.renderArg || intent.clientSecret;
-      let renderCalled = false;
-
-      function attempt() {
-        if (walletOpenRef.current) return;
-        try {
-          global[renderMethod](renderArg);
-          renderCalled = true;
-          console.info('Payment SDK: render call accepted');
-        } catch (err) {
-          console.info('Payment SDK: render not ready yet, retrying...');
-        }
+      renderAttempts++;
+
+      try {
+        global[renderMethod](renderArg);
+        console.info(`Payment SDK: renderPaymentOptions called (attempt ${renderAttempts})`);
+      } catch (err) {
+        console.info('Payment SDK: render threw, will retry in 1s');
       }
 
-      // Try immediately, then keep retrying until onWalletChange('open') fires
-      attempt();
-      const id = setInterval(() => {
-        if (walletOpenRef.current) {
-          clearInterval(id);
-          return;
-        }
-        if (!renderCalled) attempt();
-      }, 500);
-      cleanups.push(() => clearInterval(id));
+      // Safety net: if wallet doesn't open within a delay, retry
+      if (renderAttempts < MAX_RENDER_ATTEMPTS) {
+        const delay = 1000 + renderAttempts * 1000; // 2s, 3s, 4s
+        const retryId = setTimeout(() => {
+          if (!walletOpenRef.current) {
+            console.info(`Payment SDK: wallet not open after ${delay}ms, retrying render...`);
+            renderPayment(sdk, intent);
+          }
+        }, delay);
+        cleanups.push(() => clearTimeout(retryId));
+      }
+    }
+
+    function retryRender() {
+      if (pendingRender && !walletOpenRef.current) {
+        renderPayment(pendingRender.sdk, pendingRender.intent);
+      }
     }
 
     // =============================================
@@ -314,14 +341,18 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
       }
       if (sdk.renderType !== 'sdk-widget' || !sdk.globalName) return;
 
+      // Store for retryRender from onError callback
+      pendingRender = { sdk, intent };
+      cbRef.current.retryRender = retryRender;
+
       // If SDK wasn't loaded from providers, load + init now
       if (!sdkInitDone) {
         loadScript(sdk);
-        // Wait for init to complete, then render
+        // Wait for init to complete, then render once
         const id = setInterval(() => {
           if (sdkInitDone) {
             clearInterval(id);
-            renderWhenReady(sdk, intent);
+            renderPayment(sdk, intent);
           }
         }, 100);
         cleanups.push(() => clearInterval(id));
@@ -346,8 +377,8 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
         }
       }
 
-      // SDK ready — render
-      renderWhenReady(sdk, intent);
+      // SDK ready — render once
+      renderPayment(sdk, intent);
     });
 
     return () => cleanups.forEach((fn) => fn());