create-brainerce-store 1.3.2 → 1.3.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.2.1",
+      version: "1.3.3",
       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.3.2",
+  "version": "1.3.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

@@ -18,6 +18,8 @@ declare global {
           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;
@@ -33,14 +35,60 @@ 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): 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;
+    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 window.growPayment to become available (set by the SDK script).
+ */
+function waitForGrowGlobal(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 [paymentIntent, setPaymentIntent] = useState<PaymentIntent | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [growReady, setGrowReady] = useState(false);
-  const [growSdkInitialized, setGrowSdkInitialized] = useState(false);
-  const growInitCalled = useRef(false);
-  const growRenderCalled = useRef(false);
+  const [sdkScriptLoaded, setSdkScriptLoaded] = useState(false);
+  const renderAttempted = useRef(false);
 
   const handleGrowSuccess = useCallback(
     async (response: unknown) => {
@@ -71,90 +119,36 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
     setError(msg);
   }, []);
 
-  // Step 1: Load Grow SDK script and call init() — runs on mount
-  // This matches the documented flow where init() is called on script.onload
+  // Step 1: Load SDK scripts (Apple Pay + Grow) — just load, don't init yet
   useEffect(() => {
-    if (growInitCalled.current) return;
-    growInitCalled.current = true;
-
-    // Load Apple Pay SDK (required for Apple Pay in Grow wallet)
-    function loadApplePaySdk(): Promise<void> {
-      return new Promise((resolve) => {
-        if (document.querySelector(`script[src="${APPLE_PAY_SDK_URL}"]`)) {
-          resolve();
-          return;
-        }
-        const script = document.createElement('script');
-        script.src = APPLE_PAY_SDK_URL;
-        script.async = true;
-        script.onload = () => resolve();
-        script.onerror = () => {
-          console.warn('Apple Pay SDK failed to load — Apple Pay will be unavailable');
-          resolve(); // Non-blocking: other payment methods still work
-        };
-        document.head.appendChild(script);
-      });
-    }
+    let cancelled = false;
 
-    function loadAndInitGrowSdk() {
-      if (window.growPayment) {
-        initSdk('DEV'); // Default, will be overridden if needed
-        return;
-      }
+    async function loadSdkScripts() {
+      // Load Apple Pay SDK first (optional — needed for Apple Pay in Grow wallet)
+      await loadScript(APPLE_PAY_SDK_URL, true);
+
+      // Load Grow SDK script
+      await loadScript(GROW_SDK_URL);
+
+      // Wait for growPayment global to be set by the script
+      const available = await waitForGrowGlobal();
+
+      if (cancelled) return;
 
-      const existing = document.querySelector(`script[src="${GROW_SDK_URL}"]`);
-      if (existing) {
-        const check = setInterval(() => {
-          if (window.growPayment) {
-            clearInterval(check);
-            initSdk('DEV');
-          }
-        }, 100);
+      if (!available) {
+        setError('Failed to load payment SDK');
         return;
       }
 
-      const script = document.createElement('script');
-      script.type = 'text/javascript';
-      script.async = true;
-      script.src = GROW_SDK_URL;
-      script.onload = () => {
-        // Wait for growPayment global to be set
-        const check = setInterval(() => {
-          if (window.growPayment) {
-            clearInterval(check);
-            initSdk('DEV');
-          }
-        }, 50);
-        // Timeout after 5s
-        setTimeout(() => clearInterval(check), 5000);
-      };
-      script.onerror = () => {
-        setError('Failed to load payment SDK');
-      };
-      document.head.appendChild(script);
+      setSdkScriptLoaded(true);
     }
 
-    function initSdk(env: string) {
-      if (!window.growPayment) return;
-      console.info('Grow SDK: calling init with environment:', env);
-      window.growPayment.init({
-        environment: env,
-        version: 1,
-        events: {
-          onSuccess: handleGrowSuccess,
-          onFailure: handleGrowFailure,
-          onError: handleGrowError,
-          onWalletChange: (state: string) => {
-            console.info('Grow wallet state:', state);
-          },
-        },
-      });
-      setGrowSdkInitialized(true);
-    }
+    loadSdkScripts();
 
-    // Load Apple Pay SDK first, then Grow SDK
-    loadApplePaySdk().then(() => loadAndInitGrowSdk());
-  }, [handleGrowSuccess, handleGrowFailure, handleGrowError]);
+    return () => {
+      cancelled = true;
+    };
+  }, []);
 
   // Step 2: Create payment intent (API call)
   useEffect(() => {
@@ -189,30 +183,47 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
     createIntent();
   }, [checkoutId]);
 
-  // Step 3: When BOTH SDK is initialized AND payment intent is ready, render payment options
+  // Step 3: When BOTH SDK script is loaded AND payment intent is ready:
+  //   - init() with the CORRECT environment from the payment intent
+  //   - then renderPaymentOptions() with the authCode
   useEffect(() => {
-    if (!growSdkInitialized) return;
+    if (!sdkScriptLoaded) return;
     if (!paymentIntent || paymentIntent.provider !== 'grow') return;
-    if (growRenderCalled.current) return;
     if (!window.growPayment) return;
+    if (renderAttempted.current) return;
 
-    growRenderCalled.current = true;
+    renderAttempted.current = true;
 
-    // Parse authCode from clientSecret (format: "ENV|authCode")
+    // 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;
 
-    console.info('Grow SDK: calling renderPaymentOptions');
+    // Init SDK with the correct environment (must match the authCode's origin)
+    console.info('Grow SDK: init with environment:', env);
+    window.growPayment.init({
+      environment: env,
+      version: 1,
+      events: {
+        onSuccess: handleGrowSuccess,
+        onFailure: handleGrowFailure,
+        onError: handleGrowError,
+        onWalletChange: (state: string) => {
+          console.info('Grow wallet state:', state);
+        },
+      },
+    });
 
-    // Small delay to ensure SDK internal state is ready after init()
+    // Render payment options — small delay to allow init() to complete internal setup
+    console.info('Grow SDK: calling renderPaymentOptions');
     setTimeout(() => {
       window.growPayment?.renderPaymentOptions(authCode);
       setGrowReady(true);
-    }, 500);
-  }, [growSdkInitialized, paymentIntent]);
+    }, 300);
+  }, [sdkScriptLoaded, paymentIntent, handleGrowSuccess, handleGrowFailure, handleGrowError]);
 
   if (loading) {
     return (