@easypayment/medusa-paypal-ui 1.0.51 → 1.0.53

package/dist/index.mjs

@@ -24,7 +24,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) {
@@ -61,22 +78,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);
@@ -107,8 +114,16 @@ function createPayPalStoreApi(opts) {
 
 // src/hooks/usePayPalConfig.ts
 import { useEffect, useMemo, useRef, useState } from "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 ?? ""}`;
 }
@@ -152,12 +167,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);
       }
@@ -187,7 +202,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__ */ jsx(
     PayPalScriptProvider,
     {
@@ -202,17 +217,80 @@ function PayPalProvider(props) {
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function PayPalCurrencyNotice({ config }) {
   if (config.currency_supported) return null;
-  return /* @__PURE__ */ jsxs("div", { style: { padding: 12, border: "1px solid #ddd", borderRadius: 10 }, children: [
+  return /* @__PURE__ */ jsxs("div", { role: "alert", style: { padding: 12, border: "1px solid #ddd", borderRadius: 10 }, children: [
     /* @__PURE__ */ jsx2("div", { style: { fontWeight: 600, marginBottom: 6 }, children: "PayPal currency issue" }),
     /* @__PURE__ */ jsx2("ul", { style: { margin: 0, paddingLeft: 18 }, children: (config.currency_errors || []).map((e) => /* @__PURE__ */ jsx2("li", { children: e }, e)) })
   ] });
 }
 
 // src/components/PayPalSmartButtons.tsx
-import { useMemo as useMemo3, useState as useState2 } from "react";
+import { useCallback, useMemo as useMemo3, 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"));
+}
+
+// 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
 import { jsx as jsx3, jsxs as jsxs2 } from "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",
@@ -227,7 +305,12 @@ function PayPalSmartButtons(props) {
   );
   const [error, setError] = useState2(null);
   const [processing, setProcessing] = useState2(false);
-  const [{ isPending, isResolved }] = usePayPalScriptReducer();
+  const [buttonsReady, setButtonsReady] = useState2(false);
+  const [{ isPending, isResolved, isRejected }] = usePayPalScriptReducer();
+  const handleInit = 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__ */ jsxs2("div", { style: { width: containerWidth, position: "relative" }, children: [
@@ -235,43 +318,107 @@ function PayPalSmartButtons(props) {
     processing && /* @__PURE__ */ jsxs2(
       "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__ */ jsxs2("div", { style: { position: "relative", width: 56, height: 56 }, children: [
+            /* @__PURE__ */ jsx3(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  inset: 0,
+                  borderRadius: "50%",
+                  border: "3px solid #e5e7eb"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx3(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  inset: 0,
+                  borderRadius: "50%",
+                  border: "3px solid transparent",
+                  borderTopColor: "#0070ba",
+                  animation: "_pp_spin .8s linear infinite"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx3(
+              "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__ */ jsx3("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs2("div", { style: { textAlign: "center" }, children: [
+            /* @__PURE__ */ jsx3("div", { style: { fontSize: 18, fontWeight: 600, color: "#111827", letterSpacing: "-0.01em" }, children: "Processing your payment" }),
+            /* @__PURE__ */ jsxs2("div", { style: { fontSize: 14, color: "#6b7280", marginTop: 6, lineHeight: 1.5 }, children: [
+              "This may take a few moments. Please do not close",
+              /* @__PURE__ */ jsx3("br", {}),
+              "or refresh this page."
+            ] })
+          ] }),
           /* @__PURE__ */ jsx3(
             "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__ */ jsx3(
+                "div",
+                {
+                  style: {
+                    width: "40%",
+                    height: "100%",
+                    background: "linear-gradient(90deg, #0070ba, #003087)",
+                    borderRadius: 3,
+                    animation: "_pp_progress 1.5s ease-in-out infinite"
+                  }
+                }
+              )
             }
-          ),
-          /* @__PURE__ */ jsxs2("div", { style: { textAlign: "center" }, children: [
-            /* @__PURE__ */ jsx3("div", { style: { fontSize: 13, color: "#374151", fontWeight: 500 }, children: "Processing your payment\u2026" }),
-            /* @__PURE__ */ jsx3("div", { style: { fontSize: 12, color: "#6b7280", marginTop: 4 }, children: "Please do not close or refresh this page" })
-          ] })
+          )
         ]
       }
     ),
-    isPending && /* @__PURE__ */ jsxs2(
+    showSpinner && /* @__PURE__ */ jsxs2(
       "div",
       {
+        role: "status",
+        "aria-label": "Loading PayPal",
         style: {
           display: "flex",
           alignItems: "center",
@@ -302,7 +449,29 @@ function PayPalSmartButtons(props) {
         ]
       }
     ),
-    config.environment === "sandbox" && isResolved && /* @__PURE__ */ jsxs2(
+    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 failed to load. Please refresh the page or try a different payment method." })
+        ]
+      }
+    ),
+    config.environment === "sandbox" && buttonsReady && /* @__PURE__ */ jsxs2(
       "div",
       {
         style: {
@@ -340,10 +509,11 @@ function PayPalSmartButtons(props) {
         ]
       }
     ),
-    isResolved && /* @__PURE__ */ jsx3(
+    isResolved && /* @__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],
+        onInit: handleInit,
         style: {
           layout: "vertical",
           color: config.button_color,
@@ -352,40 +522,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__ */ jsxs2(
       "div",
       {
+        role: "alert",
         style: {
           marginTop: 10,
           display: "flex",
@@ -409,16 +592,20 @@ function PayPalSmartButtons(props) {
 }
 
 // src/components/PayPalAdvancedCard.tsx
-import { useMemo as useMemo4, useState as useState3 } from "react";
+import { useMemo as useMemo4, useRef as useRef2, useState as useState3 } from "react";
 import {
   PayPalCardFieldsProvider,
   PayPalNumberField,
   PayPalExpiryField,
   PayPalCVVField,
-  usePayPalCardFields
+  usePayPalCardFields,
+  usePayPalScriptReducer as usePayPalScriptReducer2
 } from "@paypal/react-paypal-js";
 import { jsx as jsx4, jsxs as jsxs3 } from "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",
@@ -473,9 +660,13 @@ function SubmitButton({
     {
       type: "button",
       disabled: isDisabled,
+      "aria-busy": disabled,
       onClick: () => {
         onSubmit();
-        cardFieldsForm?.submit();
+        try {
+          cardFieldsForm?.submit();
+        } catch {
+        }
       },
       style: {
         width: "100%",
@@ -519,7 +710,34 @@ function PayPalAdvancedCard(props) {
   );
   const [error, setError] = useState3(null);
   const [submitting, setSubmitting] = useState3(false);
+  const submittingRef = useRef2(false);
+  const creatingOrderRef = useRef2(false);
+  const [{ isPending, isResolved, isRejected }] = usePayPalScriptReducer2();
   if (!config.currency_supported) return null;
+  if (isRejected) {
+    return /* @__PURE__ */ jsxs3(
+      "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__ */ jsx4("span", { style: { flexShrink: 0, fontSize: 15 }, children: "\u26A0\uFE0F" }),
+          /* @__PURE__ */ jsx4("span", { children: "PayPal failed to load. Please refresh the page or try a different payment method." })
+        ]
+      }
+    );
+  }
   if (!config.client_token) {
     return /* @__PURE__ */ jsx4(
       "div",
@@ -537,42 +755,143 @@ function PayPalAdvancedCard(props) {
     );
   }
   const isSandbox = config.environment === "sandbox";
+  if (isPending) {
+    return /* @__PURE__ */ jsxs3(
+      "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__ */ jsx4("style", { children: SPIN_STYLE2 }),
+          /* @__PURE__ */ jsx4(
+            "div",
+            {
+              style: {
+                width: 22,
+                height: 22,
+                borderRadius: "50%",
+                border: "2.5px solid #e5e7eb",
+                borderTopColor: "#0070ba",
+                animation: "_pp_spin .7s linear infinite",
+                flexShrink: 0
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx4("div", { style: { fontSize: 13, fontWeight: 500, color: "#6b7280" }, children: "Loading card fields\u2026" })
+        ]
+      }
+    );
+  }
+  if (!isResolved) return null;
   return /* @__PURE__ */ jsxs3("div", { style: { position: "relative" }, children: [
     /* @__PURE__ */ jsx4("style", { children: SPIN_STYLE2 }),
     submitting && /* @__PURE__ */ jsxs3(
       "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__ */ jsxs3("div", { style: { position: "relative", width: 56, height: 56 }, children: [
+            /* @__PURE__ */ jsx4(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  inset: 0,
+                  borderRadius: "50%",
+                  border: "3px solid #e5e7eb"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx4(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  inset: 0,
+                  borderRadius: "50%",
+                  border: "3px solid transparent",
+                  borderTopColor: "#2563eb",
+                  animation: "_pp_spin .8s linear infinite"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx4(
+              "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__ */ jsx4("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs3("div", { style: { textAlign: "center" }, children: [
+            /* @__PURE__ */ jsx4("div", { style: { fontSize: 18, fontWeight: 600, color: "#111827", letterSpacing: "-0.01em" }, children: "Processing your payment" }),
+            /* @__PURE__ */ jsxs3("div", { style: { fontSize: 14, color: "#6b7280", marginTop: 6, lineHeight: 1.5 }, children: [
+              "This may take a few moments. Please do not close",
+              /* @__PURE__ */ jsx4("br", {}),
+              "or refresh this page."
+            ] })
+          ] }),
           /* @__PURE__ */ jsx4(
             "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__ */ jsx4(
+                "div",
+                {
+                  style: {
+                    width: "40%",
+                    height: "100%",
+                    background: "linear-gradient(90deg, #2563eb, #1d4ed8)",
+                    borderRadius: 3,
+                    animation: "_pp_progress 1.5s ease-in-out infinite"
+                  }
+                }
+              )
             }
-          ),
-          /* @__PURE__ */ jsxs3("div", { style: { textAlign: "center" }, children: [
-            /* @__PURE__ */ jsx4("div", { style: { fontSize: 15, fontWeight: 600, color: "#111827" }, children: "Processing your payment\u2026" }),
-            /* @__PURE__ */ jsx4("div", { style: { fontSize: 13, color: "#6b7280", marginTop: 4 }, children: "Please do not close or refresh this page" })
-          ] })
+          )
         ]
       }
     ),
@@ -581,32 +900,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__ */ jsxs3(
@@ -705,14 +1041,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__ */ jsxs3(
                 "div",
                 {
+                  role: "alert",
                   style: {
                     display: "flex",
                     alignItems: "flex-start",
@@ -740,7 +1080,7 @@ function PayPalAdvancedCard(props) {
 }
 
 // src/adapters/MedusaNextPayPalAdapter.tsx
-import { useCallback } from "react";
+import { useCallback as useCallback2 } from "react";
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var DEFAULT_PAYPAL_PROVIDER_ID = "pp_paypal_paypal";
 var DEFAULT_PAYPAL_CARD_PROVIDER_ID = "pp_paypal_card_paypal_card";
@@ -749,6 +1089,8 @@ function PayPalLoadingCard() {
   return /* @__PURE__ */ jsxs4(
     "div",
     {
+      role: "status",
+      "aria-label": "Connecting to PayPal",
       style: {
         display: "flex",
         alignItems: "center",
@@ -786,6 +1128,7 @@ function PayPalErrorCard({ message }) {
   return /* @__PURE__ */ jsx5(
     "div",
     {
+      role: "alert",
       style: {
         padding: "12px 16px",
         background: "#fef2f2",
@@ -818,10 +1161,10 @@ function MedusaNextPayPalAdapter(props) {
     cartId,
     enabled: shouldRender
   });
-  const handlePaid = useCallback(
-    (captureResult) => {
+  const handlePaid = useCallback2(
+    async (captureResult) => {
       onPaid?.(captureResult);
-      onSuccess?.(cartId);
+      await onSuccess?.(cartId);
     },
     [cartId, onPaid, onSuccess]
   );
@@ -868,7 +1211,7 @@ function MedusaNextPayPalAdapter(props) {
 }
 
 // src/components/PayPalPaymentSection.tsx
-import { useCallback as useCallback2 } from "react";
+import { useCallback as useCallback3 } from "react";
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var PAYPAL_WALLET_PROVIDER_ID = "pp_paypal_paypal";
 var PAYPAL_CARD_PROVIDER_ID = "pp_paypal_card_paypal_card";
@@ -885,6 +1228,8 @@ function SessionInitCard() {
   return /* @__PURE__ */ jsxs5(
     "div",
     {
+      role: "status",
+      "aria-label": "Setting up payment",
       style: {
         display: "flex",
         alignItems: "center",
@@ -920,6 +1265,8 @@ function ConfigLoadingCard() {
   return /* @__PURE__ */ jsxs5(
     "div",
     {
+      role: "status",
+      "aria-label": "Connecting to PayPal",
       style: {
         display: "flex",
         alignItems: "center",
@@ -957,6 +1304,7 @@ function ErrorCard({ message }) {
   return /* @__PURE__ */ jsx6(
     "div",
     {
+      role: "alert",
       style: {
         padding: "12px 16px",
         background: "#fef2f2",
@@ -986,10 +1334,10 @@ function PayPalPaymentSection({
     cartId,
     enabled: shouldRender
   });
-  const handlePaid = useCallback2(
-    (captureResult) => {
+  const handlePaid = useCallback3(
+    async (captureResult) => {
       onPaid?.(captureResult);
-      onSuccess?.(cartId);
+      await onSuccess?.(cartId);
     },
     [cartId, onPaid, onSuccess]
   );
@@ -1039,9 +1387,17 @@ function PayPalPaymentSection({
 }
 
 // src/hooks/usePayPalPaymentMethods.ts
-import { useEffect as useEffect2, useMemo as useMemo5, useRef as useRef2, useState as useState4 } from "react";
+import { useEffect as useEffect2, useMemo as useMemo5, useRef as useRef3, useState as useState4 } from "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 ?? ""}`;
 }
@@ -1066,7 +1422,7 @@ 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 = useRef2(0);
+  const fetchIdRef = useRef3(0);
   useEffect2(() => {
     if (!enabled) {
       setResult((prev) => ({ ...prev, loading: false }));
@@ -1093,12 +1449,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,
@@ -1128,8 +1485,10 @@ export {
   PayPalProvider,
   PayPalSmartButtons,
   createPayPalStoreApi,
+  hideProcessingOverlay,
   isPayPalProviderId,
   markPaymentComplete,
+  showProcessingOverlay,
   usePayPalConfig,
   usePayPalPaymentMethods
 };