@easypayment/medusa-paypal-ui 1.0.51 → 1.0.53

package/dist/index.cjs

@@ -30,8 +30,10 @@ __export(index_exports, {
   PayPalProvider: () => PayPalProvider,
   PayPalSmartButtons: () => PayPalSmartButtons,
   createPayPalStoreApi: () => createPayPalStoreApi,
+  hideProcessingOverlay: () => hideProcessingOverlay,
   isPayPalProviderId: () => isPayPalProviderId,
   markPaymentComplete: () => markPaymentComplete,
+  showProcessingOverlay: () => showProcessingOverlay,
   usePayPalConfig: () => usePayPalConfig,
   usePayPalPaymentMethods: () => usePayPalPaymentMethods
 });
@@ -61,7 +63,24 @@ function createHttpClient(opts) {
     if (opts.publishableApiKey) {
       headers["x-publishable-api-key"] = opts.publishableApiKey;
     }
-    const res = await fetch(url, { ...init, headers, credentials: "include" });
+    const timeoutMs = 3e4;
+    let timeoutId;
+    const controller = new AbortController();
+    if (!init?.signal) {
+      timeoutId = setTimeout(() => controller.abort(), timeoutMs);
+    }
+    const effectiveSignal = init?.signal || controller.signal;
+    let res;
+    try {
+      res = await fetch(url, { ...init, headers, credentials: "include", signal: effectiveSignal });
+    } catch (err) {
+      if (err instanceof Error && err.name === "AbortError" && !init?.signal) {
+        throw new Error(`[PayPal] Request to ${path} timed out after ${timeoutMs / 1e3}s`);
+      }
+      throw err;
+    } finally {
+      if (timeoutId !== void 0) clearTimeout(timeoutId);
+    }
     const text = await res.text().catch(() => "");
     if (!res.ok) {
       if (res.status === 401) {
@@ -98,22 +117,12 @@ function createHttpClient(opts) {
 
 // src/client/paypal.ts
 async function markPaymentComplete(baseUrl, cartId, publishableApiKey) {
-  try {
-    const resp = await fetch(`${baseUrl.replace(/\/$/, "")}/store/paypal-complete`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        ...publishableApiKey ? { "x-publishable-api-key": publishableApiKey } : {}
-      },
-      body: JSON.stringify({ cart_id: cartId }),
-      credentials: "include"
-    });
-    const data = await resp.json().catch(() => ({}));
-    return data || {};
-  } catch (e) {
-    console.warn("[PayPal] paypal-complete call failed:", e);
-    return {};
-  }
+  const http = createHttpClient({ baseUrl, publishableApiKey });
+  return http.request(`/store/paypal-complete`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ cart_id: cartId })
+  });
 }
 function createPayPalStoreApi(opts) {
   const http = createHttpClient(opts);
@@ -144,8 +153,16 @@ function createPayPalStoreApi(opts) {
 
 // src/hooks/usePayPalConfig.ts
 var import_react = require("react");
+var MAX_CACHE_ENTRIES = 50;
 var _cache = /* @__PURE__ */ new Map();
 var CACHE_TTL = 5 * 60 * 1e3;
+function cacheSet(key, value) {
+  if (_cache.size >= MAX_CACHE_ENTRIES) {
+    const oldest = _cache.keys().next().value;
+    if (oldest !== void 0) _cache.delete(oldest);
+  }
+  _cache.set(key, value);
+}
 function cacheKey(baseUrl, cartId) {
   return `${baseUrl}::${cartId ?? ""}`;
 }
@@ -189,12 +206,12 @@ function usePayPalConfig({
       try {
         const cfg = await api.getConfig(cartId, controller.signal);
         if (!mounted || id !== fetchIdRef.current) return;
-        _cache.set(k, { config: cfg, at: Date.now() });
+        cacheSet(k, { config: cfg, at: Date.now() });
         setConfig(cfg);
       } catch (e) {
-        if (e?.name === "AbortError") return;
+        if (e instanceof Error && e.name === "AbortError") return;
         if (!mounted || id !== fetchIdRef.current) return;
-        setError(e?.message || "Failed to load PayPal config");
+        setError(e instanceof Error ? e.message : "Failed to load PayPal config");
       } finally {
         if (mounted && id === fetchIdRef.current) setLoading(false);
       }
@@ -224,7 +241,7 @@ function PayPalProvider(props) {
       "disable-funding": disableFunding,
       "data-partner-attribution-id": BN_CODE
     };
-  }, [config, intent, disableFunding]);
+  }, [config.client_id, config.currency, config.client_token, intent, disableFunding]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_react_paypal_js.PayPalScriptProvider,
     {
@@ -239,7 +256,7 @@ function PayPalProvider(props) {
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function PayPalCurrencyNotice({ config }) {
   if (config.currency_supported) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { padding: 12, border: "1px solid #ddd", borderRadius: 10 }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { role: "alert", style: { padding: 12, border: "1px solid #ddd", borderRadius: 10 }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontWeight: 600, marginBottom: 6 }, children: "PayPal currency issue" }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ul", { style: { margin: 0, paddingLeft: 18 }, children: (config.currency_errors || []).map((e) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("li", { children: e }, e)) })
   ] });
@@ -248,8 +265,71 @@ function PayPalCurrencyNotice({ config }) {
 // src/components/PayPalSmartButtons.tsx
 var import_react3 = require("react");
 var import_react_paypal_js2 = require("@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"));
+}
+
+// src/utils/processing-overlay.ts
+var OVERLAY_ID = "__pp_processing_overlay";
+function showProcessingOverlay() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(OVERLAY_ID)) return;
+  const overlay = document.createElement("div");
+  overlay.id = OVERLAY_ID;
+  overlay.setAttribute("role", "status");
+  overlay.setAttribute("aria-label", "Processing payment");
+  overlay.innerHTML = `
+    <style>
+      @keyframes _pp_spin { to { transform: rotate(360deg) } }
+      @keyframes _pp_progress { 0% { transform: translateX(-100%) } 100% { transform: translateX(350%) } }
+    </style>
+    <div style="position:relative;width:56px;height:56px">
+      <div style="position:absolute;inset:0;border-radius:50%;border:3px solid #e5e7eb"></div>
+      <div style="position:absolute;inset:0;border-radius:50%;border:3px solid transparent;border-top-color:#0070ba;animation:_pp_spin .8s linear infinite"></div>
+      <svg viewBox="0 0 24 24" fill="none" stroke="#0070ba" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"
+        style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:24px;height:24px">
+        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
+      </svg>
+    </div>
+    <div style="text-align:center">
+      <div style="font-size:18px;font-weight:600;color:#111827;letter-spacing:-0.01em">Processing your payment</div>
+      <div style="font-size:14px;color:#6b7280;margin-top:6px;line-height:1.5">
+        This may take a few moments. Please do not close<br>or refresh this page.
+      </div>
+    </div>
+    <div style="width:200px;height:3px;background:#e5e7eb;border-radius:3px;overflow:hidden;margin-top:4px">
+      <div style="width:40%;height:100%;background:linear-gradient(90deg,#0070ba,#003087);border-radius:3px;animation:_pp_progress 1.5s ease-in-out infinite"></div>
+    </div>
+  `;
+  Object.assign(overlay.style, {
+    position: "fixed",
+    inset: "0",
+    zIndex: "99999",
+    background: "rgba(255,255,255,0.96)",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "20px",
+    fontFamily: "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif"
+  });
+  document.body.appendChild(overlay);
+}
+function hideProcessingOverlay() {
+  if (typeof document === "undefined") return;
+  document.getElementById(OVERLAY_ID)?.remove();
+}
+
+// src/components/PayPalSmartButtons.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var SPIN_STYLE = `@keyframes _pp_spin { to { transform: rotate(360deg) } }`;
+var SPIN_STYLE = `
+@keyframes _pp_spin { to { transform: rotate(360deg) } }
+@keyframes _pp_progress { 0% { transform: translateX(-100%) } 100% { transform: translateX(350%) } }
+`;
 var BUTTON_WIDTH_MAP = {
   small: "300px",
   medium: "400px",
@@ -264,7 +344,12 @@ function PayPalSmartButtons(props) {
   );
   const [error, setError] = (0, import_react3.useState)(null);
   const [processing, setProcessing] = (0, import_react3.useState)(false);
-  const [{ isPending, isResolved }] = (0, import_react_paypal_js2.usePayPalScriptReducer)();
+  const [buttonsReady, setButtonsReady] = (0, import_react3.useState)(false);
+  const [{ isPending, isResolved, isRejected }] = (0, import_react_paypal_js2.usePayPalScriptReducer)();
+  const handleInit = (0, import_react3.useCallback)(() => {
+    setButtonsReady(true);
+  }, []);
+  const showSpinner = isPending || isResolved && !buttonsReady;
   if (!config.currency_supported) return null;
   const containerWidth = BUTTON_WIDTH_MAP[config.button_width ?? "responsive"] ?? "100%";
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { width: containerWidth, position: "relative" }, children: [
@@ -272,43 +357,107 @@ function PayPalSmartButtons(props) {
     processing && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       "div",
       {
+        role: "status",
+        "aria-label": "Processing payment",
         style: {
-          position: "absolute",
+          position: "fixed",
           inset: 0,
-          zIndex: 10,
-          background: "rgba(255,255,255,0.90)",
-          borderRadius: 8,
+          zIndex: 9999,
+          background: "rgba(255,255,255,0.96)",
           display: "flex",
           flexDirection: "column",
           alignItems: "center",
           justifyContent: "center",
-          gap: 10,
-          minHeight: 60
+          gap: 20
         },
         children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { position: "relative", width: 56, height: 56 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  inset: 0,
+                  borderRadius: "50%",
+                  border: "3px solid #e5e7eb"
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  inset: 0,
+                  borderRadius: "50%",
+                  border: "3px solid transparent",
+                  borderTopColor: "#0070ba",
+                  animation: "_pp_spin .8s linear infinite"
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "svg",
+              {
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "#0070ba",
+                strokeWidth: "1.8",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                style: {
+                  position: "absolute",
+                  top: "50%",
+                  left: "50%",
+                  transform: "translate(-50%, -50%)",
+                  width: 24,
+                  height: 24
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { textAlign: "center" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontSize: 18, fontWeight: 600, color: "#111827", letterSpacing: "-0.01em" }, children: "Processing your payment" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { fontSize: 14, color: "#6b7280", marginTop: 6, lineHeight: 1.5 }, children: [
+              "This may take a few moments. Please do not close",
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("br", {}),
+              "or refresh this page."
+            ] })
+          ] }),
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             "div",
             {
               style: {
-                width: 28,
-                height: 28,
-                borderRadius: "50%",
-                border: "2.5px solid #e5e7eb",
-                borderTopColor: "#0070ba",
-                animation: "_pp_spin .7s linear infinite"
-              }
+                width: 200,
+                height: 3,
+                background: "#e5e7eb",
+                borderRadius: 3,
+                overflow: "hidden",
+                marginTop: 4
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "div",
+                {
+                  style: {
+                    width: "40%",
+                    height: "100%",
+                    background: "linear-gradient(90deg, #0070ba, #003087)",
+                    borderRadius: 3,
+                    animation: "_pp_progress 1.5s ease-in-out infinite"
+                  }
+                }
+              )
             }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { textAlign: "center" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontSize: 13, color: "#374151", fontWeight: 500 }, children: "Processing your payment\u2026" }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontSize: 12, color: "#6b7280", marginTop: 4 }, children: "Please do not close or refresh this page" })
-          ] })
+          )
         ]
       }
     ),
-    isPending && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    showSpinner && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       "div",
       {
+        role: "status",
+        "aria-label": "Loading PayPal",
         style: {
           display: "flex",
           alignItems: "center",
@@ -339,7 +488,29 @@ function PayPalSmartButtons(props) {
         ]
       }
     ),
-    config.environment === "sandbox" && isResolved && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    isRejected && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "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__ */ (0, import_jsx_runtime3.jsx)("span", { style: { flexShrink: 0, fontSize: 15 }, children: "\u26A0\uFE0F" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "PayPal failed to load. Please refresh the page or try a different payment method." })
+        ]
+      }
+    ),
+    config.environment === "sandbox" && buttonsReady && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       "div",
       {
         style: {
@@ -377,10 +548,11 @@ function PayPalSmartButtons(props) {
         ]
       }
     ),
-    isResolved && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    isResolved && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: buttonsReady ? void 0 : { position: "absolute", left: -9999, opacity: 0, pointerEvents: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       import_react_paypal_js2.PayPalButtons,
       {
         forceReRender: [config.currency, config.intent, cartId],
+        onInit: handleInit,
         style: {
           layout: "vertical",
           color: config.button_color,
@@ -389,40 +561,53 @@ function PayPalSmartButtons(props) {
           height: config.button_height
         },
         createOrder: async () => {
+          if (processing) throw new Error("Payment already processing");
           setError(null);
-          const r = await api.createOrder(cartId);
-          return r.id;
+          setProcessing(true);
+          try {
+            const r = await api.createOrder(cartId);
+            return r.id;
+          } catch (e) {
+            setProcessing(false);
+            throw e;
+          }
         },
         onApprove: async (data) => {
           try {
             setProcessing(true);
+            showProcessingOverlay();
             setError(null);
             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);
-            onPaid?.({ ...result, ...completeResult });
+            await onPaid?.({ ...result, ...completeResult });
           } catch (e) {
+            if (isNextRouterError(e)) throw e;
+            hideProcessingOverlay();
+            setProcessing(false);
             const msg = e instanceof Error ? e.message : "Payment capture failed";
             setError(msg);
             onError?.(msg);
-          } finally {
-            setProcessing(false);
           }
         },
         onCancel: () => {
+          hideProcessingOverlay();
           setProcessing(false);
         },
         onError: (err) => {
+          hideProcessingOverlay();
           setProcessing(false);
           const msg = err instanceof Error ? err.message : err?.message || "PayPal error";
           setError(msg);
           onError?.(msg);
         }
       }
-    ),
+    ) }),
     error ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       "div",
       {
+        role: "alert",
         style: {
           marginTop: 10,
           display: "flex",
@@ -449,7 +634,10 @@ function PayPalSmartButtons(props) {
 var import_react4 = require("react");
 var import_react_paypal_js3 = require("@paypal/react-paypal-js");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var SPIN_STYLE2 = `@keyframes _pp_spin { to { transform: rotate(360deg) } }`;
+var SPIN_STYLE2 = `
+@keyframes _pp_spin { to { transform: rotate(360deg) } }
+@keyframes _pp_progress { 0% { transform: translateX(-100%) } 100% { transform: translateX(350%) } }
+`;
 var cardStyle = {
   input: {
     "font-size": "15px",
@@ -504,9 +692,13 @@ function SubmitButton({
     {
       type: "button",
       disabled: isDisabled,
+      "aria-busy": disabled,
       onClick: () => {
         onSubmit();
-        cardFieldsForm?.submit();
+        try {
+          cardFieldsForm?.submit();
+        } catch {
+        }
       },
       style: {
         width: "100%",
@@ -550,7 +742,34 @@ function PayPalAdvancedCard(props) {
   );
   const [error, setError] = (0, import_react4.useState)(null);
   const [submitting, setSubmitting] = (0, import_react4.useState)(false);
+  const submittingRef = (0, import_react4.useRef)(false);
+  const creatingOrderRef = (0, import_react4.useRef)(false);
+  const [{ isPending, isResolved, isRejected }] = (0, import_react_paypal_js3.usePayPalScriptReducer)();
   if (!config.currency_supported) return null;
+  if (isRejected) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "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__ */ (0, import_jsx_runtime4.jsx)("span", { style: { flexShrink: 0, fontSize: 15 }, children: "\u26A0\uFE0F" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "PayPal failed to load. Please refresh the page or try a different payment method." })
+        ]
+      }
+    );
+  }
   if (!config.client_token) {
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "div",
@@ -568,42 +787,143 @@ function PayPalAdvancedCard(props) {
     );
   }
   const isSandbox = config.environment === "sandbox";
+  if (isPending) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "div",
+      {
+        role: "status",
+        "aria-label": "Loading PayPal",
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: 10,
+          padding: "18px 16px",
+          background: "#f9fafb",
+          border: "1px solid #e5e7eb",
+          borderRadius: 8,
+          minHeight: 55
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: SPIN_STYLE2 }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "div",
+            {
+              style: {
+                width: 22,
+                height: 22,
+                borderRadius: "50%",
+                border: "2.5px solid #e5e7eb",
+                borderTopColor: "#0070ba",
+                animation: "_pp_spin .7s linear infinite",
+                flexShrink: 0
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: 13, fontWeight: 500, color: "#6b7280" }, children: "Loading card fields\u2026" })
+        ]
+      }
+    );
+  }
+  if (!isResolved) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { position: "relative" }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: SPIN_STYLE2 }),
     submitting && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       "div",
       {
+        role: "status",
+        "aria-label": "Processing payment",
         style: {
-          position: "absolute",
+          position: "fixed",
           inset: 0,
-          zIndex: 20,
-          background: "rgba(255,255,255,0.92)",
-          borderRadius: 12,
+          zIndex: 9999,
+          background: "rgba(255,255,255,0.96)",
           display: "flex",
           flexDirection: "column",
           alignItems: "center",
           justifyContent: "center",
-          gap: 14,
-          minHeight: 180
+          gap: 20
         },
         children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { position: "relative", width: 56, height: 56 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  inset: 0,
+                  borderRadius: "50%",
+                  border: "3px solid #e5e7eb"
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  inset: 0,
+                  borderRadius: "50%",
+                  border: "3px solid transparent",
+                  borderTopColor: "#2563eb",
+                  animation: "_pp_spin .8s linear infinite"
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "svg",
+              {
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "#2563eb",
+                strokeWidth: "1.8",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                style: {
+                  position: "absolute",
+                  top: "50%",
+                  left: "50%",
+                  transform: "translate(-50%, -50%)",
+                  width: 24,
+                  height: 24
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { textAlign: "center" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: 18, fontWeight: 600, color: "#111827", letterSpacing: "-0.01em" }, children: "Processing your payment" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { fontSize: 14, color: "#6b7280", marginTop: 6, lineHeight: 1.5 }, children: [
+              "This may take a few moments. Please do not close",
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("br", {}),
+              "or refresh this page."
+            ] })
+          ] }),
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "div",
             {
               style: {
-                width: 36,
-                height: 36,
-                borderRadius: "50%",
-                border: "3px solid #dbeafe",
-                borderTopColor: "#2563eb",
-                animation: "_pp_spin .75s linear infinite"
-              }
+                width: 200,
+                height: 3,
+                background: "#e5e7eb",
+                borderRadius: 3,
+                overflow: "hidden",
+                marginTop: 4
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "div",
+                {
+                  style: {
+                    width: "40%",
+                    height: "100%",
+                    background: "linear-gradient(90deg, #2563eb, #1d4ed8)",
+                    borderRadius: 3,
+                    animation: "_pp_progress 1.5s ease-in-out infinite"
+                  }
+                }
+              )
             }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { textAlign: "center" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: 15, fontWeight: 600, color: "#111827" }, children: "Processing your payment\u2026" }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: 13, color: "#6b7280", marginTop: 4 }, children: "Please do not close or refresh this page" })
-          ] })
+          )
         ]
       }
     ),
@@ -612,32 +932,49 @@ function PayPalAdvancedCard(props) {
       {
         style: cardStyle,
         createOrder: async () => {
-          setError(null);
-          const r = await api.createOrder(cartId, true);
-          return r.id;
+          if (creatingOrderRef.current) throw new Error("Payment already processing");
+          creatingOrderRef.current = true;
+          try {
+            setError(null);
+            const r = await api.createOrder(cartId, true);
+            return r.id;
+          } catch (e) {
+            creatingOrderRef.current = false;
+            throw e;
+          }
         },
         onApprove: async (data) => {
           try {
             setError(null);
+            showProcessingOverlay();
             const orderId = String(data?.orderID || "");
             const result = await api.captureOrder(cartId, orderId);
             const completeResult = await markPaymentComplete(baseUrl, cartId, publishableApiKey);
-            onPaid?.({ ...result, ...completeResult });
+            await onPaid?.({ ...result, ...completeResult });
           } catch (e) {
+            if (isNextRouterError(e)) throw e;
+            hideProcessingOverlay();
+            creatingOrderRef.current = false;
+            submittingRef.current = false;
+            setSubmitting(false);
             const msg = e instanceof Error ? e.message : "Card payment failed";
             setError(msg);
             onError?.(msg);
-          } finally {
-            setSubmitting(false);
           }
         },
         onCancel: () => {
+          hideProcessingOverlay();
+          creatingOrderRef.current = false;
+          submittingRef.current = false;
           setSubmitting(false);
         },
         onError: (e) => {
           const msg = e instanceof Error ? e.message : e?.message || "CardFields error";
           setError(msg);
           onError?.(msg);
+          hideProcessingOverlay();
+          creatingOrderRef.current = false;
+          submittingRef.current = false;
           setSubmitting(false);
         },
         children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
@@ -736,14 +1073,18 @@ function PayPalAdvancedCard(props) {
                   disabled: submitting,
                   label: submitting ? "Processing\u2026" : "Pay by Card",
                   onSubmit: () => {
+                    if (submittingRef.current) return;
+                    submittingRef.current = true;
                     setError(null);
                     setSubmitting(true);
+                    showProcessingOverlay();
                   }
                 }
               ),
               error && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                 "div",
                 {
+                  role: "alert",
                   style: {
                     display: "flex",
                     alignItems: "flex-start",
@@ -780,6 +1121,8 @@ function PayPalLoadingCard() {
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "div",
     {
+      role: "status",
+      "aria-label": "Connecting to PayPal",
       style: {
         display: "flex",
         alignItems: "center",
@@ -817,6 +1160,7 @@ function PayPalErrorCard({ message }) {
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "div",
     {
+      role: "alert",
       style: {
         padding: "12px 16px",
         background: "#fef2f2",
@@ -850,9 +1194,9 @@ function MedusaNextPayPalAdapter(props) {
     enabled: shouldRender
   });
   const handlePaid = (0, import_react5.useCallback)(
-    (captureResult) => {
+    async (captureResult) => {
       onPaid?.(captureResult);
-      onSuccess?.(cartId);
+      await onSuccess?.(cartId);
     },
     [cartId, onPaid, onSuccess]
   );
@@ -916,6 +1260,8 @@ function SessionInitCard() {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
+      role: "status",
+      "aria-label": "Setting up payment",
       style: {
         display: "flex",
         alignItems: "center",
@@ -951,6 +1297,8 @@ function ConfigLoadingCard() {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
+      role: "status",
+      "aria-label": "Connecting to PayPal",
       style: {
         display: "flex",
         alignItems: "center",
@@ -988,6 +1336,7 @@ function ErrorCard({ message }) {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
     {
+      role: "alert",
       style: {
         padding: "12px 16px",
         background: "#fef2f2",
@@ -1018,9 +1367,9 @@ function PayPalPaymentSection({
     enabled: shouldRender
   });
   const handlePaid = (0, import_react6.useCallback)(
-    (captureResult) => {
+    async (captureResult) => {
       onPaid?.(captureResult);
-      onSuccess?.(cartId);
+      await onSuccess?.(cartId);
     },
     [cartId, onPaid, onSuccess]
   );
@@ -1071,8 +1420,16 @@ function PayPalPaymentSection({
 
 // src/hooks/usePayPalPaymentMethods.ts
 var import_react7 = require("react");
+var MAX_CACHE_ENTRIES2 = 50;
 var _cache2 = /* @__PURE__ */ new Map();
 var CACHE_TTL2 = 5 * 60 * 1e3;
+function cacheSet2(key, value) {
+  if (_cache2.size >= MAX_CACHE_ENTRIES2) {
+    const oldest = _cache2.keys().next().value;
+    if (oldest !== void 0) _cache2.delete(oldest);
+  }
+  _cache2.set(key, value);
+}
 function cacheKey2(baseUrl, cartId) {
   return `ppm::${baseUrl}::${cartId ?? ""}`;
 }
@@ -1124,12 +1481,13 @@ function usePayPalPaymentMethods({
           cardTitle: typeof cfg.card_title === "string" && cfg.card_title ? cfg.card_title : "Credit or Debit Card",
           loading: false
         };
-        _cache2.set(k, { result: next, at: Date.now() });
+        cacheSet2(k, { result: next, at: Date.now() });
         setResult(next);
       } catch (e) {
-        if (e?.name === "AbortError") return;
+        const msg = e instanceof Error ? e.message : "";
+        if (e instanceof Error && e.name === "AbortError") return;
         if (!mounted || id !== fetchIdRef.current) return;
-        if (e?.message?.includes("403") || e?.message?.includes("Forbidden")) {
+        if (msg.includes("403") || msg.includes("Forbidden")) {
           const disabled = {
             ...DEFAULT_RESULT,
             paypalEnabled: false,
@@ -1160,8 +1518,10 @@ function usePayPalPaymentMethods({
   PayPalProvider,
   PayPalSmartButtons,
   createPayPalStoreApi,
+  hideProcessingOverlay,
   isPayPalProviderId,
   markPaymentComplete,
+  showProcessingOverlay,
   usePayPalConfig,
   usePayPalPaymentMethods
 });