@easypayment/medusa-paypal-ui 1.0.56 → 1.1.1

package/dist/index.mjs

@@ -1,6 +1,33 @@
 "use client";
 
 // src/client/http.ts
+var HttpError = class extends Error {
+  constructor(message, status) {
+    super(message);
+    this.name = "HttpError";
+    this.status = status;
+  }
+};
+var RETRY_BASE_DELAY_MS = 400;
+function isRetryableStatus(status) {
+  return status === 429 || status >= 500;
+}
+function isRetryableError(err) {
+  return err instanceof Error && !(err instanceof HttpError);
+}
+var wait = (ms) => new Promise((r) => setTimeout(r, ms));
+function extractJsonMessage(text) {
+  if (!text) return null;
+  try {
+    const parsed = JSON.parse(text);
+    const message = parsed?.message;
+    if (typeof message === "string" && message.trim()) {
+      return message.trim().slice(0, 500);
+    }
+  } catch {
+  }
+  return null;
+}
 function toHeaderRecord(headers) {
   if (!headers) {
     return {};
@@ -15,7 +42,7 @@ function toHeaderRecord(headers) {
 }
 function createHttpClient(opts) {
   const base = opts.baseUrl.replace(/\/+$/, "");
-  async function request(path, init) {
+  async function attempt(path, init) {
     const url = `${base}${path.startsWith("/") ? "" : "/"}${path}`;
     const headers = {
       Accept: "application/json",
@@ -25,41 +52,54 @@ function createHttpClient(opts) {
       headers["x-publishable-api-key"] = opts.publishableApiKey;
     }
     const timeoutMs = 3e4;
-    let timeoutId;
     const controller = new AbortController();
-    if (!init?.signal) {
-      timeoutId = setTimeout(() => controller.abort(), timeoutMs);
+    const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
+    const callerSignal = init?.signal ?? null;
+    const onCallerAbort = () => controller.abort();
+    if (callerSignal) {
+      if (callerSignal.aborted) controller.abort();
+      else callerSignal.addEventListener("abort", onCallerAbort);
     }
-    const effectiveSignal = init?.signal || controller.signal;
     let res;
+    let text;
     try {
-      res = await fetch(url, { ...init, headers, credentials: "include", signal: effectiveSignal });
+      res = await fetch(url, {
+        ...init,
+        headers,
+        credentials: "include",
+        signal: controller.signal
+      });
+      text = await res.text().catch(() => "");
     } catch (err) {
-      if (err instanceof Error && err.name === "AbortError" && !init?.signal) {
+      if (err instanceof Error && err.name === "AbortError" && !(callerSignal && callerSignal.aborted)) {
         throw new Error(`[PayPal] Request to ${path} timed out after ${timeoutMs / 1e3}s`);
       }
       throw err;
     } finally {
-      if (timeoutId !== void 0) clearTimeout(timeoutId);
+      clearTimeout(timeoutId);
+      if (callerSignal) callerSignal.removeEventListener("abort", onCallerAbort);
     }
-    const text = await res.text().catch(() => "");
     if (!res.ok) {
+      const parsedMessage = extractJsonMessage(text);
       if (res.status === 401) {
-        throw new Error(
-          "[PayPal] Unauthorized (401) \u2014 check that your publishable API key is correct and set in NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY"
+        throw new HttpError(
+          parsedMessage || "[PayPal] Unauthorized (401) \u2014 check that your publishable API key is correct and set in NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY",
+          401
         );
       }
       if (res.status === 403) {
-        throw new Error(
-          "[PayPal] Forbidden (403) \u2014 this request is not allowed. Check your CORS and API key settings."
+        throw new HttpError(
+          parsedMessage || "[PayPal] Forbidden (403) \u2014 this request is not allowed. Check your CORS and API key settings.",
+          403
         );
       }
-      throw new Error(
-        text.slice(0, 500).replace(/<[^>]*>/g, "") || `Request failed (${res.status})`
+      throw new HttpError(
+        parsedMessage || text.slice(0, 500).replace(/<[^>]*>/g, "") || `Request failed (${res.status})`,
+        res.status
       );
     }
     if (!text) {
-      throw new Error(`[PayPal] Empty response body from ${path} (${res.status})`);
+      throw new HttpError(`[PayPal] Empty response body from ${path} (${res.status})`, res.status);
     }
     const contentType = res.headers.get("content-type") || "";
     if (!contentType.includes("application/json")) {
@@ -73,17 +113,39 @@ function createHttpClient(opts) {
       throw new Error(`[PayPal] Failed to parse JSON response from ${path}`);
     }
   }
+  async function request(path, init, reqOpts) {
+    const retries = Math.max(0, reqOpts?.retries ?? 0);
+    let lastError;
+    for (let i = 0; i <= retries; i++) {
+      try {
+        return await attempt(path, init);
+      } catch (err) {
+        lastError = err;
+        const transient = err instanceof HttpError && isRetryableStatus(err.status) || isRetryableError(err);
+        const aborted = err instanceof Error && err.name === "AbortError" && !!init?.signal;
+        if (i >= retries || !transient || aborted) {
+          throw err;
+        }
+        await wait(RETRY_BASE_DELAY_MS * Math.pow(2, i) + Math.random() * RETRY_BASE_DELAY_MS);
+      }
+    }
+    throw lastError;
+  }
   return { request };
 }
 
 // src/client/paypal.ts
 async function markPaymentComplete(baseUrl, cartId, publishableApiKey) {
   const http = createHttpClient({ baseUrl, publishableApiKey });
-  return http.request(`/store/paypal-complete`, {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ cart_id: cartId })
-  });
+  return http.request(
+    `/store/paypal-complete`,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ cart_id: cartId })
+    },
+    { retries: 3 }
+  );
 }
 function createPayPalStoreApi(opts) {
   const http = createHttpClient(opts);
@@ -103,11 +165,15 @@ function createPayPalStoreApi(opts) {
       });
     },
     captureOrder(cartId, orderId) {
-      return http.request(`/store/paypal/capture-order`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ cart_id: cartId, order_id: orderId })
-      });
+      return http.request(
+        `/store/paypal/capture-order`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ cart_id: cartId, order_id: orderId })
+        },
+        { retries: 2 }
+      );
     }
   };
 }
@@ -224,14 +290,16 @@ function PayPalCurrencyNotice({ config }) {
 }
 
 // src/components/PayPalSmartButtons.tsx
-import { useCallback, useMemo as useMemo3, useState as useState2 } from "react";
+import { useCallback, useEffect as useEffect2, useMemo as useMemo3, useRef as useRef2, useState as useState2 } from "react";
 import { PayPalButtons, usePayPalScriptReducer } from "@paypal/react-paypal-js";
 
 // src/utils/next-errors.ts
 function isNextRouterError(e) {
   if (typeof e !== "object" || e === null || !("digest" in e)) return false;
   const digest = e.digest;
-  return typeof digest === "string" && (digest.startsWith("NEXT_REDIRECT") || digest.startsWith("NEXT_NOT_FOUND"));
+  return typeof digest === "string" && (digest.startsWith("NEXT_REDIRECT") || digest.startsWith("NEXT_NOT_FOUND") || // Next.js 15: notFound()/forbidden()/unauthorized() throw
+  // HTTPAccessFallbackError with digest "NEXT_HTTP_ERROR_FALLBACK;<status>".
+  digest.startsWith("NEXT_HTTP_ERROR_FALLBACK"));
 }
 
 // src/utils/processing-overlay.ts
@@ -295,8 +363,13 @@ function showProcessingOverlay() {
     origReplace(...args);
     onNav();
   };
+  const onPageShow = (e) => {
+    if (e.persisted) hideProcessingOverlay();
+  };
+  window.addEventListener("pageshow", onPageShow);
   cleanupNavListener = () => {
     window.removeEventListener("popstate", onNav);
+    window.removeEventListener("pageshow", onPageShow);
     history.pushState = origPush;
     history.replaceState = origReplace;
   };
@@ -329,11 +402,48 @@ function PayPalSmartButtons(props) {
   const [error, setError] = useState2(null);
   const [processing, setProcessing] = useState2(false);
   const [buttonsReady, setButtonsReady] = useState2(false);
+  const [loadTimedOut, setLoadTimedOut] = useState2(false);
+  const capturedRef = useRef2(null);
+  const [completionPending, setCompletionPending] = useState2(false);
   const [{ isPending, isResolved, isRejected }] = usePayPalScriptReducer();
   const handleInit = useCallback(() => {
     setButtonsReady(true);
   }, []);
-  const showSpinner = isPending || isResolved && !buttonsReady;
+  useEffect2(() => {
+    const onPageShow = (e) => {
+      if (e.persisted) setProcessing(false);
+    };
+    window.addEventListener("pageshow", onPageShow);
+    return () => window.removeEventListener("pageshow", onPageShow);
+  }, []);
+  useEffect2(() => {
+    if (!isResolved || buttonsReady) {
+      return;
+    }
+    const t = setTimeout(() => setLoadTimedOut(true), 1e4);
+    return () => clearTimeout(t);
+  }, [isResolved, buttonsReady]);
+  const finalizeCapturedPayment = useCallback(async () => {
+    const captured = capturedRef.current;
+    if (!captured) return;
+    setProcessing(true);
+    showProcessingOverlay();
+    setError(null);
+    try {
+      const completeResult = await markPaymentComplete(baseUrl, cartId, publishableApiKey);
+      await onPaid?.({ ...captured, ...completeResult });
+      setCompletionPending(false);
+    } catch (e) {
+      if (isNextRouterError(e)) return;
+      hideProcessingOverlay();
+      setProcessing(false);
+      setCompletionPending(true);
+      const msg = "Your payment was received, but finalizing your order failed. Please use the Retry button below \u2014 do not pay again.";
+      setError(msg);
+      onError?.(msg);
+    }
+  }, [baseUrl, cartId, publishableApiKey, onPaid, onError]);
+  const showSpinner = (isPending || isResolved && !buttonsReady) && !loadTimedOut;
   if (!config.currency_supported) return null;
   const containerWidth = BUTTON_WIDTH_MAP[config.button_width ?? "responsive"] ?? "100%";
   return /* @__PURE__ */ jsxs2("div", { style: { width: containerWidth, position: "relative" }, children: [
@@ -472,6 +582,28 @@ function PayPalSmartButtons(props) {
         ]
       }
     ),
+    loadTimedOut && !buttonsReady && !isRejected && /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        role: "alert",
+        style: {
+          display: "flex",
+          alignItems: "flex-start",
+          gap: 8,
+          padding: "10px 14px",
+          background: "#fef2f2",
+          border: "1px solid #fecaca",
+          borderRadius: 8,
+          fontSize: 13,
+          color: "#b91c1c",
+          lineHeight: 1.5
+        },
+        children: [
+          /* @__PURE__ */ jsx3("span", { style: { flexShrink: 0, fontSize: 15 }, children: "\u26A0\uFE0F" }),
+          /* @__PURE__ */ jsx3("span", { children: "PayPal is not available for this purchase. Please try a different payment method." })
+        ]
+      }
+    ),
     isRejected && /* @__PURE__ */ jsxs2(
       "div",
       {
@@ -532,7 +664,7 @@ function PayPalSmartButtons(props) {
         ]
       }
     ),
-    isResolved && /* @__PURE__ */ jsx3("div", { style: buttonsReady ? void 0 : { position: "absolute", left: -9999, opacity: 0, pointerEvents: "none" }, children: /* @__PURE__ */ jsx3(
+    isResolved && !completionPending && /* @__PURE__ */ jsx3("div", { style: buttonsReady ? void 0 : { position: "absolute", left: -9999, opacity: 0, pointerEvents: "none" }, children: /* @__PURE__ */ jsx3(
       PayPalButtons,
       {
         forceReRender: [config.currency, config.intent, cartId],
@@ -546,6 +678,10 @@ function PayPalSmartButtons(props) {
         },
         createOrder: async () => {
           if (processing) throw new Error("Payment already processing");
+          if (capturedRef.current) {
+            void finalizeCapturedPayment();
+            throw new Error("Your payment was already received \u2014 finalizing your order.");
+          }
           setError(null);
           setProcessing(true);
           try {
@@ -564,8 +700,7 @@ function PayPalSmartButtons(props) {
             const orderId = String(data?.orderID || "");
             if (!orderId) throw new Error("PayPal order ID is missing from approval response");
             const result = await api.captureOrder(cartId, orderId);
-            const completeResult = await markPaymentComplete(baseUrl, cartId, publishableApiKey);
-            await onPaid?.({ ...result, ...completeResult });
+            capturedRef.current = result || {};
           } catch (e) {
             if (isNextRouterError(e)) return;
             hideProcessingOverlay();
@@ -573,7 +708,9 @@ function PayPalSmartButtons(props) {
             const msg = e instanceof Error ? e.message : "Payment capture failed";
             setError(msg);
             onError?.(msg);
+            return;
           }
+          await finalizeCapturedPayment();
         },
         onCancel: () => {
           hideProcessingOverlay();
@@ -588,6 +725,29 @@ function PayPalSmartButtons(props) {
         }
       }
     ) }),
+    completionPending && /* @__PURE__ */ jsx3(
+      "button",
+      {
+        type: "button",
+        onClick: () => void finalizeCapturedPayment(),
+        disabled: processing,
+        "aria-busy": processing,
+        style: {
+          width: "100%",
+          padding: "12px 16px",
+          marginTop: 4,
+          background: "#0070ba",
+          color: "#ffffff",
+          border: "none",
+          borderRadius: 8,
+          fontSize: 14,
+          fontWeight: 600,
+          cursor: processing ? "not-allowed" : "pointer",
+          opacity: processing ? 0.7 : 1
+        },
+        children: "Retry \u2014 finish placing my order"
+      }
+    ),
     error ? /* @__PURE__ */ jsxs2(
       "div",
       {
@@ -615,7 +775,7 @@ function PayPalSmartButtons(props) {
 }
 
 // src/components/PayPalAdvancedCard.tsx
-import { useMemo as useMemo4, useRef as useRef2, useState as useState3 } from "react";
+import React3, { useMemo as useMemo4, useRef as useRef3, useState as useState3 } from "react";
 import {
   PayPalCardFieldsProvider,
   PayPalNumberField,
@@ -674,7 +834,8 @@ var labelStyle = {
 function SubmitButton({
   disabled,
   label,
-  onSubmit
+  onSubmit,
+  onSubmitError
 }) {
   const { cardFieldsForm } = usePayPalCardFields();
   const isDisabled = disabled || !cardFieldsForm;
@@ -686,10 +847,10 @@ function SubmitButton({
       "aria-busy": disabled,
       onClick: () => {
         onSubmit();
-        try {
-          cardFieldsForm?.submit();
-        } catch {
-        }
+        Promise.resolve(cardFieldsForm?.submit()).catch((e) => {
+          const msg = e instanceof Error && e.message ? e.message : "Card payment could not be submitted. Please check your card details.";
+          onSubmitError(msg);
+        });
       },
       style: {
         width: "100%",
@@ -733,9 +894,47 @@ function PayPalAdvancedCard(props) {
   );
   const [error, setError] = useState3(null);
   const [submitting, setSubmitting] = useState3(false);
-  const submittingRef = useRef2(false);
-  const creatingOrderRef = useRef2(false);
+  const submittingRef = useRef3(false);
+  const creatingOrderRef = useRef3(false);
+  const capturedRef = useRef3(null);
+  const [completionPending, setCompletionPending] = useState3(false);
   const [{ isPending, isResolved, isRejected }] = usePayPalScriptReducer2();
+  const resetSubmitState = React3.useCallback(() => {
+    hideProcessingOverlay();
+    creatingOrderRef.current = false;
+    submittingRef.current = false;
+    setSubmitting(false);
+  }, []);
+  React3.useEffect(() => {
+    const onPageShow = (e) => {
+      if (e.persisted) {
+        creatingOrderRef.current = false;
+        submittingRef.current = false;
+        setSubmitting(false);
+      }
+    };
+    window.addEventListener("pageshow", onPageShow);
+    return () => window.removeEventListener("pageshow", onPageShow);
+  }, []);
+  const finalizeCapturedPayment = React3.useCallback(async () => {
+    const captured = capturedRef.current;
+    if (!captured) return;
+    setSubmitting(true);
+    showProcessingOverlay();
+    setError(null);
+    try {
+      const completeResult = await markPaymentComplete(baseUrl, cartId, publishableApiKey);
+      await onPaid?.({ ...captured, ...completeResult });
+      setCompletionPending(false);
+    } catch (e) {
+      if (isNextRouterError(e)) return;
+      resetSubmitState();
+      setCompletionPending(true);
+      const msg = "Your payment was received, but finalizing your order failed. Please use the Retry button below \u2014 do not pay again.";
+      setError(msg);
+      onError?.(msg);
+    }
+  }, [baseUrl, cartId, publishableApiKey, onPaid, onError, resetSubmitState]);
   if (!config.currency_supported) return null;
   if (isRejected) {
     return /* @__PURE__ */ jsxs3(
@@ -924,6 +1123,10 @@ function PayPalAdvancedCard(props) {
         style: cardStyle,
         createOrder: async () => {
           if (creatingOrderRef.current) throw new Error("Payment already processing");
+          if (capturedRef.current) {
+            void finalizeCapturedPayment();
+            throw new Error("Your payment was already received \u2014 finalizing your order.");
+          }
           creatingOrderRef.current = true;
           try {
             setError(null);
@@ -939,19 +1142,18 @@ function PayPalAdvancedCard(props) {
             setError(null);
             showProcessingOverlay();
             const orderId = String(data?.orderID || "");
+            if (!orderId) throw new Error("PayPal order ID is missing from approval response");
             const result = await api.captureOrder(cartId, orderId);
-            const completeResult = await markPaymentComplete(baseUrl, cartId, publishableApiKey);
-            await onPaid?.({ ...result, ...completeResult });
+            capturedRef.current = result || {};
           } catch (e) {
             if (isNextRouterError(e)) return;
-            hideProcessingOverlay();
-            creatingOrderRef.current = false;
-            submittingRef.current = false;
-            setSubmitting(false);
+            resetSubmitState();
             const msg = e instanceof Error ? e.message : "Card payment failed";
             setError(msg);
             onError?.(msg);
+            return;
           }
+          await finalizeCapturedPayment();
         },
         onCancel: () => {
           hideProcessingOverlay();
@@ -1058,7 +1260,29 @@ function PayPalAdvancedCard(props) {
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx4(
+              completionPending ? /* @__PURE__ */ jsx4(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => void finalizeCapturedPayment(),
+                  disabled: submitting,
+                  "aria-busy": submitting,
+                  style: {
+                    width: "100%",
+                    height: 48,
+                    padding: "0 20px",
+                    borderRadius: 8,
+                    border: "none",
+                    background: "#0070ba",
+                    color: "#ffffff",
+                    fontSize: 15,
+                    fontWeight: 600,
+                    cursor: submitting ? "not-allowed" : "pointer",
+                    opacity: submitting ? 0.7 : 1
+                  },
+                  children: "Retry \u2014 finish placing my order"
+                }
+              ) : /* @__PURE__ */ jsx4(
                 SubmitButton,
                 {
                   disabled: submitting,
@@ -1069,6 +1293,11 @@ function PayPalAdvancedCard(props) {
                     setError(null);
                     setSubmitting(true);
                     showProcessingOverlay();
+                  },
+                  onSubmitError: (msg) => {
+                    resetSubmitState();
+                    setError(msg);
+                    onError?.(msg);
                   }
                 }
               ),
@@ -1410,7 +1639,7 @@ function PayPalPaymentSection({
 }
 
 // src/hooks/usePayPalPaymentMethods.ts
-import { useEffect as useEffect2, useMemo as useMemo5, useRef as useRef3, useState as useState4 } from "react";
+import { useEffect as useEffect3, useMemo as useMemo5, useRef as useRef4, useState as useState4 } from "react";
 var MAX_CACHE_ENTRIES2 = 50;
 var _cache2 = /* @__PURE__ */ new Map();
 var CACHE_TTL2 = 5 * 60 * 1e3;
@@ -1445,8 +1674,8 @@ function usePayPalPaymentMethods({
   const hit = _cache2.get(key);
   const seed = hit && Date.now() - hit.at < CACHE_TTL2 ? hit.result : null;
   const [result, setResult] = useState4(seed ?? { ...DEFAULT_RESULT, loading: enabled });
-  const fetchIdRef = useRef3(0);
-  useEffect2(() => {
+  const fetchIdRef = useRef4(0);
+  useEffect3(() => {
     if (!enabled) {
       setResult((prev) => ({ ...prev, loading: false }));
       return;