@easypayment/medusa-paypal-ui 1.2.7 → 1.3.0

package/dist/index.mjs

@@ -51,7 +51,7 @@ function createHttpClient(opts) {
     if (opts.publishableApiKey) {
       headers["x-publishable-api-key"] = opts.publishableApiKey;
     }
-    const timeoutMs = 3e4;
+    const timeoutMs = opts.timeoutMs ?? 3e4;
     const controller = new AbortController();
     const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
     const callerSignal = init?.signal ?? null;
@@ -108,14 +108,18 @@ function createHttpClient(opts) {
     }
     const contentType = res.headers.get("content-type") || "";
     if (!contentType.includes("application/json")) {
-      throw new Error(
-        `[PayPal] Unexpected non-JSON response (${contentType}) from ${path}`
+      throw new HttpError(
+        `[PayPal] Unexpected non-JSON response (${contentType}) from ${path}`,
+        res.status
       );
     }
     try {
       return JSON.parse(text);
     } catch {
-      throw new Error(`[PayPal] Failed to parse JSON response from ${path}`);
+      throw new HttpError(
+        `[PayPal] Failed to parse JSON response from ${path}`,
+        res.status
+      );
     }
   }
   async function request(path, init, reqOpts) {
@@ -150,14 +154,21 @@ function generateIdempotencyKey() {
   }
   return `pp-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 12)}`;
 }
-async function markPaymentComplete(baseUrl, cartId, publishableApiKey) {
-  const http = createHttpClient({ baseUrl, publishableApiKey });
+async function markPaymentComplete(baseUrl, cartId, options) {
+  const opts = typeof options === "string" ? { publishableApiKey: options } : options ?? {};
+  const http = createHttpClient({
+    baseUrl,
+    publishableApiKey: opts.publishableApiKey,
+    credentials: opts.credentials,
+    timeoutMs: opts.timeoutMs
+  });
   return http.request(
     `/store/paypal-complete`,
     {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ cart_id: cartId })
+      body: JSON.stringify({ cart_id: cartId }),
+      signal: opts.signal
     },
     { retries: 3 }
   );
@@ -169,10 +180,12 @@ function createPayPalStoreApi(opts) {
       const q = cartId ? `?cart_id=${encodeURIComponent(cartId)}` : "";
       return http.request(`/store/paypal/config${q}`, { signal });
     },
-    getSettings() {
-      return http.request(`/store/paypal/settings`);
+    getSettings(signal) {
+      return http.request(`/store/paypal/settings`, {
+        signal
+      });
     },
-    createOrder(cartId, isCardPayment = false) {
+    createOrder(cartId, isCardPayment = false, signal) {
       return http.request(`/store/paypal/create-order`, {
         method: "POST",
         headers: {
@@ -185,16 +198,18 @@ function createPayPalStoreApi(opts) {
         body: JSON.stringify({
           cart_id: cartId,
           is_card_payment: isCardPayment
-        })
+        }),
+        signal
       });
     },
-    captureOrder(cartId, orderId) {
+    captureOrder(cartId, orderId, signal) {
       return http.request(
         `/store/paypal/capture-order`,
         {
           method: "POST",
           headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ cart_id: cartId, order_id: orderId })
+          body: JSON.stringify({ cart_id: cartId, order_id: orderId }),
+          signal
         },
         { retries: 2 }
       );
@@ -202,39 +217,97 @@ function createPayPalStoreApi(opts) {
   };
 }
 
-// src/hooks/usePayPalConfig.ts
-import { useEffect, useMemo, useRef, useState } from "react";
+// src/client/config-cache.ts
 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);
+var CACHE_TTL_MS = 5 * 60 * 1e3;
+var SEP = "
";
+var cache = /* @__PURE__ */ new Map();
+var inflight = /* @__PURE__ */ new Map();
+function configCacheKey(args) {
+  return [
+    args.baseUrl,
+    args.publishableApiKey ?? "",
+    args.cartId ?? "",
+    (args.currencyCode ?? "").toLowerCase()
+  ].join(SEP);
+}
+function getCachedPayPalConfig(key) {
+  const hit = cache.get(key);
+  if (!hit) return null;
+  if (Date.now() - hit.at >= CACHE_TTL_MS) {
+    cache.delete(key);
+    return null;
+  }
+  return hit.config;
+}
+function invalidatePayPalConfigCache(cartId) {
+  if (cartId === void 0) {
+    cache.clear();
+    return;
+  }
+  for (const key of [...cache.keys()]) {
+    if (key.split(SEP)[2] === cartId) cache.delete(key);
   }
-  _cache.set(key, value);
 }
-function cacheKey(baseUrl, cartId) {
-  return `${baseUrl}::${cartId ?? ""}`;
+function fetchPayPalConfigShared(key, fetcher) {
+  const existing = inflight.get(key);
+  if (existing) return existing;
+  const p = (async () => {
+    try {
+      const config = await fetcher();
+      if (cache.size >= MAX_CACHE_ENTRIES && !cache.has(key)) {
+        const oldest = cache.keys().next().value;
+        if (oldest !== void 0) cache.delete(oldest);
+      }
+      cache.set(key, { config, at: Date.now() });
+      return config;
+    } finally {
+      inflight.delete(key);
+    }
+  })();
+  inflight.set(key, p);
+  return p;
+}
+
+// src/constants.ts
+var PAYPAL_WALLET_PROVIDER_ID = "pp_paypal_paypal";
+var PAYPAL_CARD_PROVIDER_ID = "pp_paypal_card_paypal_card";
+var PAYPAL_PROVIDER_IDS = [
+  PAYPAL_WALLET_PROVIDER_ID,
+  PAYPAL_CARD_PROVIDER_ID
+];
+function isPayPalProviderId(providerId) {
+  if (!providerId) return false;
+  return PAYPAL_PROVIDER_IDS.includes(providerId);
 }
+
+// src/hooks/usePayPalConfig.ts
+import { useEffect, useMemo, useRef, useState } from "react";
 function usePayPalConfig({
   baseUrl,
   publishableApiKey,
   cartId,
+  currencyCode,
+  credentials,
   enabled = true
 }) {
   const api = useMemo(
-    () => createPayPalStoreApi({ baseUrl, publishableApiKey }),
-    [baseUrl, publishableApiKey]
+    () => createPayPalStoreApi({ baseUrl, publishableApiKey, credentials }),
+    [baseUrl, publishableApiKey, credentials]
   );
-  const key = cacheKey(baseUrl, cartId);
-  const hit = _cache.get(key);
-  const seedConfig = hit && Date.now() - hit.at < CACHE_TTL ? hit.config : null;
+  const key = configCacheKey({
+    baseUrl,
+    publishableApiKey,
+    cartId,
+    currencyCode
+  });
+  const seedConfig = getCachedPayPalConfig(key);
   const [config, setConfig] = useState(seedConfig);
   const [loading, setLoading] = useState(
     seedConfig === null && enabled
   );
   const [error, setError] = useState(null);
+  const [retryToken, setRetryToken] = useState(0);
   const fetchIdRef = useRef(0);
   useEffect(() => {
     if (!enabled) {
@@ -242,27 +315,26 @@ function usePayPalConfig({
       setError(null);
       return;
     }
-    const k = cacheKey(baseUrl, cartId);
-    const cached = _cache.get(k);
-    if (cached && Date.now() - cached.at < CACHE_TTL) {
-      setConfig(cached.config);
+    const cached = getCachedPayPalConfig(key);
+    if (cached) {
+      setConfig(cached);
       setLoading(false);
       setError(null);
       return;
     }
     const id = ++fetchIdRef.current;
     let mounted = true;
-    const controller = new AbortController();
     setLoading(true);
     setError(null);
     (async () => {
       try {
-        const cfg = await api.getConfig(cartId, controller.signal);
+        const cfg = await fetchPayPalConfigShared(
+          key,
+          () => api.getConfig(cartId)
+        );
         if (!mounted || id !== fetchIdRef.current) return;
-        cacheSet(k, { config: cfg, at: Date.now() });
         setConfig(cfg);
       } catch (e) {
-        if (e instanceof Error && e.name === "AbortError") return;
         if (!mounted || id !== fetchIdRef.current) return;
         setError(
           e instanceof Error ? e.message : "Failed to load PayPal config"
@@ -273,17 +345,17 @@ function usePayPalConfig({
     })();
     return () => {
       mounted = false;
-      controller.abort();
     };
-  }, [api, baseUrl, cartId, enabled]);
-  return { config, loading, error };
+  }, [api, key, cartId, enabled, retryToken]);
+  const retry = useMemo(() => () => setRetryToken((t) => t + 1), []);
+  return { config, loading, error, retry };
 }
 
 // src/components/PayPalProvider.tsx
 import { useMemo as useMemo2 } from "react";
 import { PayPalScriptProvider } from "@paypal/react-paypal-js";
 import { jsx } from "react/jsx-runtime";
-var BN_CODE = "MBJTechnolabs_SI_SPB";
+var BN_CODE = "MBJ_Medusa_SI";
 function PayPalProvider(props) {
   const { config, intent = "capture", disableFunding, children } = props;
   const options = useMemo2(() => {
@@ -377,15 +449,19 @@ function showProcessingOverlay() {
   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%) } }
+      @keyframes _pp_ov_spin { to { transform: rotate(360deg) } }
+      @keyframes _pp_ov_progress { 0% { transform: translateX(-100%) } 100% { transform: translateX(350%) } }
+      ._pp-ov-spin { animation: _pp_ov_spin .8s linear infinite }
+      ._pp-ov-progress { animation: _pp_ov_progress 1.5s ease-in-out infinite }
+      @media (prefers-reduced-motion: reduce) {
+        ._pp-ov-spin, ._pp-ov-progress { animation: none }
+      }
     </style>
-    <div style="position:relative;width:56px;height:56px">
+    <div style="position:relative;width:56px;height:56px" aria-hidden="true">
       <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>
+      <div class="_pp-ov-spin" style="position:absolute;inset:0;border-radius:50%;border:3px solid transparent;border-top-color:#0070ba"></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"/>
@@ -397,8 +473,8 @@ function showProcessingOverlay() {
         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 style="width:200px;height:3px;background:#e5e7eb;border-radius:3px;overflow:hidden;margin-top:4px" aria-hidden="true">
+      <div class="_pp-ov-progress" style="width:40%;height:100%;background:linear-gradient(90deg,#0070ba,#003087);border-radius:3px"></div>
     </div>
   `;
   Object.assign(overlay.style, {
@@ -419,16 +495,7 @@ function showProcessingOverlay() {
     if (location.href !== startUrl) hideProcessingOverlay();
   };
   window.addEventListener("popstate", onNav);
-  const origPush = history.pushState.bind(history);
-  const origReplace = history.replaceState.bind(history);
-  history.pushState = function(...args) {
-    origPush(...args);
-    onNav();
-  };
-  history.replaceState = function(...args) {
-    origReplace(...args);
-    onNav();
-  };
+  const urlWatcher = window.setInterval(onNav, 250);
   const onPageShow = (e) => {
     if (e.persisted) hideProcessingOverlay();
   };
@@ -436,8 +503,7 @@ function showProcessingOverlay() {
   cleanupNavListener = () => {
     window.removeEventListener("popstate", onNav);
     window.removeEventListener("pageshow", onPageShow);
-    history.pushState = origPush;
-    history.replaceState = origReplace;
+    window.clearInterval(urlWatcher);
   };
 }
 function hideProcessingOverlay() {
@@ -447,12 +513,224 @@ function hideProcessingOverlay() {
   document.getElementById(OVERLAY_ID)?.remove();
 }
 
-// src/components/PayPalSmartButtons.tsx
+// src/components/internal/ui.tsx
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var SPIN_STYLE = `
+var ANIMATION_CSS = `
 @keyframes _pp_spin { to { transform: rotate(360deg) } }
 @keyframes _pp_progress { 0% { transform: translateX(-100%) } 100% { transform: translateX(350%) } }
+._pp-spin { animation: _pp_spin .8s linear infinite }
+._pp-spin-sm { animation: _pp_spin .7s linear infinite }
+._pp-progress { animation: _pp_progress 1.5s ease-in-out infinite }
+@media (prefers-reduced-motion: reduce) {
+  ._pp-spin, ._pp-spin-sm, ._pp-progress { animation: none }
+}
 `;
+function AnimationStyles() {
+  return /* @__PURE__ */ jsx3("style", { children: ANIMATION_CSS });
+}
+function ShieldIcon({
+  color,
+  size = 24,
+  style
+}) {
+  return /* @__PURE__ */ jsx3(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth: "1.8",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      style: { width: size, height: size, ...style },
+      children: /* @__PURE__ */ jsx3("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" })
+    }
+  );
+}
+function ProcessingOverlayView({ accent }) {
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      role: "status",
+      style: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 9999,
+        background: "rgba(255,255,255,0.96)",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        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",
+            {
+              className: "_pp-spin",
+              style: {
+                position: "absolute",
+                inset: 0,
+                borderRadius: "50%",
+                border: "3px solid transparent",
+                borderTopColor: accent
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx3(
+            ShieldIcon,
+            {
+              color: accent,
+              style: {
+                position: "absolute",
+                top: "50%",
+                left: "50%",
+                transform: "translate(-50%, -50%)"
+              }
+            }
+          )
+        ] }),
+        /* @__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: 200,
+              height: 3,
+              background: "#e5e7eb",
+              borderRadius: 3,
+              overflow: "hidden",
+              marginTop: 4
+            },
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx3(
+              "div",
+              {
+                className: "_pp-progress",
+                style: {
+                  width: "40%",
+                  height: "100%",
+                  background: `linear-gradient(90deg, ${accent}, #003087)`,
+                  borderRadius: 3
+                }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function LoadingCard({ label }) {
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      role: "status",
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 10,
+        padding: "18px 16px",
+        background: "#f9fafb",
+        border: "1px solid #e5e7eb",
+        borderRadius: 8,
+        minHeight: 55
+      },
+      children: [
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            className: "_pp-spin-sm",
+            "aria-hidden": "true",
+            style: {
+              width: 22,
+              height: 22,
+              borderRadius: "50%",
+              border: "2.5px solid #e5e7eb",
+              borderTopColor: "#0070ba",
+              flexShrink: 0
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx3("div", { style: { fontSize: 13, fontWeight: 500, color: "#6b7280" }, children: label })
+      ]
+    }
+  );
+}
+function ErrorBanner({
+  children,
+  style
+}) {
+  return /* @__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,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", style: { flexShrink: 0, fontSize: 15 }, children: "\u26A0\uFE0F" }),
+        /* @__PURE__ */ jsx3("span", { children })
+      ]
+    }
+  );
+}
+
+// src/components/PayPalSmartButtons.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var BUTTON_WIDTH_MAP = {
   small: "300px",
   medium: "400px",
@@ -460,24 +738,52 @@ var BUTTON_WIDTH_MAP = {
   responsive: "100%"
 };
 function PayPalSmartButtons(props) {
-  const { baseUrl, publishableApiKey, cartId, config, onPaid, onError } = props;
+  const {
+    baseUrl,
+    publishableApiKey,
+    credentials,
+    cartId,
+    config,
+    onPaid,
+    onError
+  } = props;
   const api = useMemo3(
-    () => createPayPalStoreApi({ baseUrl, publishableApiKey }),
-    [baseUrl, publishableApiKey]
+    () => createPayPalStoreApi({ baseUrl, publishableApiKey, credentials }),
+    [baseUrl, publishableApiKey, credentials]
   );
   const [error, setError] = useState2(null);
   const [processing, setProcessing] = useState2(false);
+  const processingRef = useRef2(false);
+  const [domOverlayUp, setDomOverlayUp] = 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 startProcessing = useCallback(() => {
+    processingRef.current = true;
+    setProcessing(true);
+  }, []);
+  const stopProcessing = useCallback(() => {
+    hideProcessingOverlay();
+    setDomOverlayUp(false);
+    processingRef.current = false;
+    setProcessing(false);
+  }, []);
+  const showOverlay = useCallback(() => {
+    showProcessingOverlay();
+    setDomOverlayUp(true);
+  }, []);
   const handleInit = useCallback(() => {
     setButtonsReady(true);
   }, []);
   useEffect2(() => {
     const onPageShow = (e) => {
-      if (e.persisted) setProcessing(false);
+      if (e.persisted) {
+        processingRef.current = false;
+        setProcessing(false);
+        setDomOverlayUp(false);
+      }
     };
     window.addEventListener("pageshow", onPageShow);
     return () => window.removeEventListener("pageshow", onPageShow);
@@ -499,234 +805,46 @@ function PayPalSmartButtons(props) {
   const finalizeCapturedPayment = useCallback(async () => {
     const captured = capturedRef.current;
     if (!captured) return;
-    setProcessing(true);
-    showProcessingOverlay();
+    startProcessing();
+    showOverlay();
     setError(null);
     try {
-      const completeResult = await markPaymentComplete(
-        baseUrl,
-        cartId,
-        publishableApiKey
-      );
+      const completeResult = await markPaymentComplete(baseUrl, cartId, {
+        publishableApiKey,
+        credentials
+      });
       clearCartCaptured(cartId);
       await onPaid?.({ ...captured, ...completeResult });
       setCompletionPending(false);
     } catch (e) {
       if (isNextRouterError(e)) return;
-      hideProcessingOverlay();
-      setProcessing(false);
+      stopProcessing();
       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]);
+  }, [
+    baseUrl,
+    cartId,
+    publishableApiKey,
+    credentials,
+    onPaid,
+    onError,
+    startProcessing,
+    showOverlay,
+    stopProcessing
+  ]);
   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: [
-    /* @__PURE__ */ jsx3("style", { children: SPIN_STYLE }),
-    processing && /* @__PURE__ */ jsxs2(
-      "div",
-      {
-        role: "status",
-        "aria-label": "Processing payment",
-        style: {
-          position: "fixed",
-          inset: 0,
-          zIndex: 9999,
-          background: "rgba(255,255,255,0.96)",
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "center",
-          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: 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"
-                  }
-                }
-              )
-            }
-          )
-        ]
-      }
-    ),
-    showSpinner && /* @__PURE__ */ jsxs2(
-      "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__ */ jsx3(
-            "div",
-            {
-              style: {
-                width: 22,
-                height: 22,
-                borderRadius: "50%",
-                border: "2.5px solid #e5e7eb",
-                borderTopColor: "#0070ba",
-                animation: "_pp_spin .7s linear infinite",
-                flexShrink: 0
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx3("div", { style: { fontSize: 13, fontWeight: 500, color: "#6b7280" }, children: "Loading PayPal\u2026" })
-        ]
-      }
-    ),
-    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",
-      {
-        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(
+  return /* @__PURE__ */ jsxs3("div", { style: { width: containerWidth, position: "relative" }, children: [
+    /* @__PURE__ */ jsx4(AnimationStyles, {}),
+    processing && !domOverlayUp && /* @__PURE__ */ jsx4(ProcessingOverlayView, { accent: "#0070ba" }),
+    showSpinner && /* @__PURE__ */ jsx4(LoadingCard, { label: "Loading PayPal\u2026" }),
+    loadTimedOut && !buttonsReady && !isRejected && /* @__PURE__ */ jsx4(ErrorBanner, { children: "PayPal is not available for this purchase. Please try a different payment method." }),
+    isRejected && /* @__PURE__ */ jsx4(ErrorBanner, { children: "PayPal failed to load. Please refresh the page or try a different payment method." }),
+    config.environment === "sandbox" && buttonsReady && /* @__PURE__ */ jsxs3(
       "div",
       {
         style: {
@@ -743,7 +861,7 @@ function PayPalSmartButtons(props) {
           marginBottom: 10
         },
         children: [
-          /* @__PURE__ */ jsxs2(
+          /* @__PURE__ */ jsxs3(
             "svg",
             {
               width: "16",
@@ -753,18 +871,19 @@ function PayPalSmartButtons(props) {
               stroke: "#1e40af",
               strokeWidth: "2",
               strokeLinecap: "round",
+              "aria-hidden": "true",
               style: { flexShrink: 0, marginTop: 1 },
               children: [
-                /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "10" }),
-                /* @__PURE__ */ jsx3("path", { d: "M12 8v4M12 16h.01" })
+                /* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "10" }),
+                /* @__PURE__ */ jsx4("path", { d: "M12 8v4M12 16h.01" })
               ]
             }
           ),
-          /* @__PURE__ */ jsx3("span", { children: "Sandbox mode \u2014 you will not be charged. Use your PayPal sandbox account to complete the payment." })
+          /* @__PURE__ */ jsx4("span", { children: "Sandbox mode \u2014 you will not be charged. Use your PayPal sandbox account to complete the payment." })
         ]
       }
     ),
-    isResolved && !completionPending && /* @__PURE__ */ jsx3(
+    isResolved && !completionPending && /* @__PURE__ */ jsx4(
       "div",
       {
         style: buttonsReady ? void 0 : {
@@ -773,7 +892,7 @@ function PayPalSmartButtons(props) {
           opacity: 0,
           pointerEvents: "none"
         },
-        children: /* @__PURE__ */ jsx3(
+        children: /* @__PURE__ */ jsx4(
           PayPalButtons,
           {
             forceReRender: [config.currency, config.intent, cartId],
@@ -786,7 +905,8 @@ function PayPalSmartButtons(props) {
               height: config.button_height
             },
             createOrder: async () => {
-              if (processing) throw new Error("Payment already processing");
+              if (processingRef.current)
+                throw new Error("Payment already processing");
               if (capturedRef.current) {
                 void finalizeCapturedPayment();
                 throw new Error(
@@ -794,19 +914,19 @@ function PayPalSmartButtons(props) {
                 );
               }
               setError(null);
-              setProcessing(true);
+              startProcessing();
               try {
                 const r = await api.createOrder(cartId);
                 return r.id;
               } catch (e) {
-                setProcessing(false);
+                stopProcessing();
                 throw e;
               }
             },
             onApprove: async (data) => {
               try {
-                setProcessing(true);
-                showProcessingOverlay();
+                startProcessing();
+                showOverlay();
                 setError(null);
                 const orderId = String(data?.orderID || "");
                 if (!orderId)
@@ -818,8 +938,7 @@ function PayPalSmartButtons(props) {
                 markCartCaptured(cartId);
               } catch (e) {
                 if (isNextRouterError(e)) return;
-                hideProcessingOverlay();
-                setProcessing(false);
+                stopProcessing();
                 const msg = e instanceof Error ? e.message : "Payment capture failed";
                 setError(msg);
                 onError?.(msg);
@@ -828,12 +947,10 @@ function PayPalSmartButtons(props) {
               await finalizeCapturedPayment();
             },
             onCancel: () => {
-              hideProcessingOverlay();
-              setProcessing(false);
+              stopProcessing();
             },
             onError: (err) => {
-              hideProcessingOverlay();
-              setProcessing(false);
+              stopProcessing();
               const msg = err instanceof Error ? err.message : err?.message || "PayPal error";
               setError(msg);
               onError?.(msg);
@@ -842,7 +959,7 @@ function PayPalSmartButtons(props) {
         )
       }
     ),
-    completionPending && /* @__PURE__ */ jsx3(
+    completionPending && /* @__PURE__ */ jsx4(
       "button",
       {
         type: "button",
@@ -865,29 +982,7 @@ function PayPalSmartButtons(props) {
         children: "Retry \u2014 finish placing my order"
       }
     ),
-    error ? /* @__PURE__ */ jsxs2(
-      "div",
-      {
-        role: "alert",
-        style: {
-          marginTop: 10,
-          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: error })
-        ]
-      }
-    ) : null
+    error ? /* @__PURE__ */ jsx4(ErrorBanner, { style: { marginTop: 10 }, children: error }) : null
   ] });
 }
 
@@ -901,11 +996,7 @@ import {
   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) } }
-@keyframes _pp_progress { 0% { transform: translateX(-100%) } 100% { transform: translateX(350%) } }
-`;
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var cardStyle = {
   input: {
     "font-size": "15px",
@@ -950,18 +1041,19 @@ var labelStyle = {
 };
 function SubmitButton({
   disabled,
+  busy,
   label,
   onSubmit,
   onSubmitError
 }) {
   const { cardFieldsForm } = usePayPalCardFields();
   const isDisabled = disabled || !cardFieldsForm;
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(
     "button",
     {
       type: "button",
       disabled: isDisabled,
-      "aria-busy": disabled,
+      "aria-busy": busy,
       onClick: () => {
         onSubmit();
         Promise.resolve(cardFieldsForm?.submit()).catch((e) => {
@@ -1004,20 +1096,34 @@ function SubmitButton({
   );
 }
 function PayPalAdvancedCard(props) {
-  const { baseUrl, publishableApiKey, cartId, config, onPaid, onError } = props;
+  const {
+    baseUrl,
+    publishableApiKey,
+    credentials,
+    cartId,
+    config,
+    onPaid,
+    onError
+  } = props;
   const api = useMemo4(
-    () => createPayPalStoreApi({ baseUrl, publishableApiKey }),
-    [baseUrl, publishableApiKey]
+    () => createPayPalStoreApi({ baseUrl, publishableApiKey, credentials }),
+    [baseUrl, publishableApiKey, credentials]
   );
   const [error, setError] = useState3(null);
   const [submitting, setSubmitting] = useState3(false);
   const submittingRef = useRef3(false);
   const creatingOrderRef = useRef3(false);
+  const [domOverlayUp, setDomOverlayUp] = useState3(false);
   const capturedRef = useRef3(null);
   const [completionPending, setCompletionPending] = useState3(false);
   const [{ isPending, isResolved, isRejected }] = usePayPalScriptReducer2();
+  const showOverlay = React3.useCallback(() => {
+    showProcessingOverlay();
+    setDomOverlayUp(true);
+  }, []);
   const resetSubmitState = React3.useCallback(() => {
     hideProcessingOverlay();
+    setDomOverlayUp(false);
     creatingOrderRef.current = false;
     submittingRef.current = false;
     setSubmitting(false);
@@ -1028,6 +1134,7 @@ function PayPalAdvancedCard(props) {
         creatingOrderRef.current = false;
         submittingRef.current = false;
         setSubmitting(false);
+        setDomOverlayUp(false);
       }
     };
     window.addEventListener("pageshow", onPageShow);
@@ -1045,14 +1152,13 @@ function PayPalAdvancedCard(props) {
     const captured = capturedRef.current;
     if (!captured) return;
     setSubmitting(true);
-    showProcessingOverlay();
+    showOverlay();
     setError(null);
     try {
-      const completeResult = await markPaymentComplete(
-        baseUrl,
-        cartId,
-        publishableApiKey
-      );
+      const completeResult = await markPaymentComplete(baseUrl, cartId, {
+        publishableApiKey,
+        credentials
+      });
       clearCartCaptured(cartId);
       await onPaid?.({ ...captured, ...completeResult });
       setCompletionPending(false);
@@ -1064,34 +1170,22 @@ function PayPalAdvancedCard(props) {
       setError(msg);
       onError?.(msg);
     }
-  }, [baseUrl, cartId, publishableApiKey, onPaid, onError, resetSubmitState]);
+  }, [
+    baseUrl,
+    cartId,
+    publishableApiKey,
+    credentials,
+    onPaid,
+    onError,
+    showOverlay,
+    resetSubmitState
+  ]);
   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." })
-        ]
-      }
-    );
+    return /* @__PURE__ */ jsx5(ErrorBanner, { children: "PayPal failed to load. Please refresh the page or try a different payment method." });
   }
   if (!config.client_token) {
-    return /* @__PURE__ */ jsx4(
+    return /* @__PURE__ */ jsx5(
       "div",
       {
         style: {
@@ -1108,168 +1202,16 @@ 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" })
-        ]
-      }
-    );
+    return /* @__PURE__ */ jsxs4("div", { children: [
+      /* @__PURE__ */ jsx5(AnimationStyles, {}),
+      /* @__PURE__ */ jsx5(LoadingCard, { label: "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: "fixed",
-          inset: 0,
-          zIndex: 9999,
-          background: "rgba(255,255,255,0.96)",
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "center",
-          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: 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__ */ jsx4(
+  return /* @__PURE__ */ jsxs4("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx5(AnimationStyles, {}),
+    submitting && !domOverlayUp && /* @__PURE__ */ jsx5(ProcessingOverlayView, { accent: "#2563eb" }),
+    /* @__PURE__ */ jsx5(
       PayPalCardFieldsProvider,
       {
         style: cardStyle,
@@ -1295,7 +1237,7 @@ function PayPalAdvancedCard(props) {
         onApprove: async (data) => {
           try {
             setError(null);
-            showProcessingOverlay();
+            showOverlay();
             const orderId = String(data?.orderID || "");
             if (!orderId)
               throw new Error(
@@ -1315,21 +1257,15 @@ function PayPalAdvancedCard(props) {
           await finalizeCapturedPayment();
         },
         onCancel: () => {
-          hideProcessingOverlay();
-          creatingOrderRef.current = false;
-          submittingRef.current = false;
-          setSubmitting(false);
+          resetSubmitState();
         },
         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);
+          resetSubmitState();
         },
-        children: /* @__PURE__ */ jsxs3(
+        children: /* @__PURE__ */ jsxs4(
           "div",
           {
             style: {
@@ -1339,7 +1275,7 @@ function PayPalAdvancedCard(props) {
               width: "100%"
             },
             children: [
-              isSandbox && /* @__PURE__ */ jsxs3(
+              isSandbox && /* @__PURE__ */ jsxs4(
                 "div",
                 {
                   style: {
@@ -1355,11 +1291,18 @@ function PayPalAdvancedCard(props) {
                     lineHeight: 1.55
                   },
                   children: [
-                    /* @__PURE__ */ jsx4("span", { style: { fontSize: 15, flexShrink: 0, marginTop: 1 }, children: "\u{1F9EA}" }),
-                    /* @__PURE__ */ jsxs3("span", { children: [
+                    /* @__PURE__ */ jsx5(
+                      "span",
+                      {
+                        "aria-hidden": "true",
+                        style: { fontSize: 15, flexShrink: 0, marginTop: 1 },
+                        children: "\u{1F9EA}"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs4("span", { children: [
                       "Sandbox mode \u2014 use test card",
                       " ",
-                      /* @__PURE__ */ jsx4(
+                      /* @__PURE__ */ jsx5(
                         "strong",
                         {
                           style: { fontFamily: "monospace", letterSpacing: "0.05em" },
@@ -1372,11 +1315,11 @@ function PayPalAdvancedCard(props) {
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs3("div", { children: [
-                /* @__PURE__ */ jsx4("label", { style: labelStyle, children: "Card number" }),
-                /* @__PURE__ */ jsx4(PayPalNumberField, {})
+              /* @__PURE__ */ jsxs4("div", { children: [
+                /* @__PURE__ */ jsx5("label", { style: labelStyle, id: "_pp-label-card-number", children: "Card number" }),
+                /* @__PURE__ */ jsx5(PayPalNumberField, {})
               ] }),
-              /* @__PURE__ */ jsxs3(
+              /* @__PURE__ */ jsxs4(
                 "div",
                 {
                   style: {
@@ -1385,18 +1328,18 @@ function PayPalAdvancedCard(props) {
                     gap: 16
                   },
                   children: [
-                    /* @__PURE__ */ jsxs3("div", { children: [
-                      /* @__PURE__ */ jsx4("label", { style: labelStyle, children: "Expiration date" }),
-                      /* @__PURE__ */ jsx4(PayPalExpiryField, {})
+                    /* @__PURE__ */ jsxs4("div", { children: [
+                      /* @__PURE__ */ jsx5("label", { style: labelStyle, id: "_pp-label-expiry", children: "Expiration date" }),
+                      /* @__PURE__ */ jsx5(PayPalExpiryField, {})
                     ] }),
-                    /* @__PURE__ */ jsxs3("div", { children: [
-                      /* @__PURE__ */ jsx4("label", { style: labelStyle, children: "Security code" }),
-                      /* @__PURE__ */ jsx4(PayPalCVVField, {})
+                    /* @__PURE__ */ jsxs4("div", { children: [
+                      /* @__PURE__ */ jsx5("label", { style: labelStyle, id: "_pp-label-cvv", children: "Security code" }),
+                      /* @__PURE__ */ jsx5(PayPalCVVField, {})
                     ] })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs3(
+              /* @__PURE__ */ jsxs4(
                 "div",
                 {
                   style: {
@@ -1407,25 +1350,12 @@ function PayPalAdvancedCard(props) {
                     color: "#6b7280"
                   },
                   children: [
-                    /* @__PURE__ */ jsx4(
-                      "svg",
-                      {
-                        width: "14",
-                        height: "14",
-                        viewBox: "0 0 24 24",
-                        fill: "none",
-                        stroke: "#10b981",
-                        strokeWidth: "2.5",
-                        strokeLinecap: "round",
-                        strokeLinejoin: "round",
-                        children: /* @__PURE__ */ jsx4("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" })
-                      }
-                    ),
-                    /* @__PURE__ */ jsx4("span", { children: "Your payment is secured with 256-bit SSL encryption" })
+                    /* @__PURE__ */ jsx5(ShieldIcon, { color: "#10b981", size: 14 }),
+                    /* @__PURE__ */ jsx5("span", { children: "Your payment is secured with 256-bit SSL encryption" })
                   ]
                 }
               ),
-              completionPending ? /* @__PURE__ */ jsx4(
+              completionPending ? /* @__PURE__ */ jsx5(
                 "button",
                 {
                   type: "button",
@@ -1447,17 +1377,18 @@ function PayPalAdvancedCard(props) {
                   },
                   children: "Retry \u2014 finish placing my order"
                 }
-              ) : /* @__PURE__ */ jsx4(
+              ) : /* @__PURE__ */ jsx5(
                 SubmitButton,
                 {
                   disabled: submitting,
+                  busy: submitting,
                   label: submitting ? "Processing\u2026" : "Pay by Card",
                   onSubmit: () => {
                     if (submittingRef.current) return;
                     submittingRef.current = true;
                     setError(null);
                     setSubmitting(true);
-                    showProcessingOverlay();
+                    showOverlay();
                   },
                   onSubmitError: (msg) => {
                     resetSubmitState();
@@ -1466,28 +1397,7 @@ function PayPalAdvancedCard(props) {
                   }
                 }
               ),
-              error && /* @__PURE__ */ jsxs3(
-                "div",
-                {
-                  role: "alert",
-                  style: {
-                    display: "flex",
-                    alignItems: "flex-start",
-                    gap: 10,
-                    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, marginTop: 1 }, children: "\u26A0\uFE0F" }),
-                    /* @__PURE__ */ jsx4("span", { children: error })
-                  ]
-                }
-              )
+              error && /* @__PURE__ */ jsx5(ErrorBanner, { children: error })
             ]
           }
         )
@@ -1498,30 +1408,12 @@ function PayPalAdvancedCard(props) {
 
 // src/adapters/MedusaNextPayPalAdapter.tsx
 import { useCallback as useCallback2 } from "react";
-
-// src/constants.ts
-var PAYPAL_WALLET_PROVIDER_ID = "pp_paypal_paypal";
-var PAYPAL_CARD_PROVIDER_ID = "pp_paypal_card_paypal_card";
-var PAYPAL_PROVIDER_IDS = [
-  PAYPAL_WALLET_PROVIDER_ID,
-  PAYPAL_CARD_PROVIDER_ID
-];
-function isPayPalProviderId(providerId) {
-  if (!providerId) return false;
-  return PAYPAL_PROVIDER_IDS.includes(
-    providerId
-  );
-}
-
-// src/adapters/MedusaNextPayPalAdapter.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-var SPIN_STYLE3 = `@keyframes _pp_spin { to { transform: rotate(360deg) } }`;
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function PayPalLoadingCard() {
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       role: "status",
-      "aria-label": "Connecting to PayPal",
       style: {
         display: "flex",
         alignItems: "center",
@@ -1532,31 +1424,35 @@ function PayPalLoadingCard() {
         borderRadius: 10
       },
       children: [
-        /* @__PURE__ */ jsx5("style", { children: SPIN_STYLE3 }),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6(AnimationStyles, {}),
+        /* @__PURE__ */ jsx6(
           "div",
           {
+            className: "_pp-spin-sm",
+            "aria-hidden": "true",
             style: {
               width: 22,
               height: 22,
               borderRadius: "50%",
               border: "2.5px solid #e5e7eb",
               borderTopColor: "#0070ba",
-              animation: "_pp_spin .7s linear infinite",
               flexShrink: 0
             }
           }
         ),
-        /* @__PURE__ */ jsxs4("div", { children: [
-          /* @__PURE__ */ jsx5("div", { style: { fontSize: 13, fontWeight: 500, color: "#111827" }, children: "Connecting to PayPal\u2026" }),
-          /* @__PURE__ */ jsx5("div", { style: { fontSize: 12, color: "#6b7280", marginTop: 2 }, children: "Setting up secure payment" })
+        /* @__PURE__ */ jsxs5("div", { children: [
+          /* @__PURE__ */ jsx6("div", { style: { fontSize: 13, fontWeight: 500, color: "#111827" }, children: "Connecting to PayPal\u2026" }),
+          /* @__PURE__ */ jsx6("div", { style: { fontSize: 12, color: "#6b7280", marginTop: 2 }, children: "Setting up secure payment" })
         ] })
       ]
     }
   );
 }
-function PayPalErrorCard({ message }) {
-  return /* @__PURE__ */ jsx5(
+function PayPalErrorCard({
+  message,
+  onRetry
+}) {
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       role: "alert",
@@ -1568,12 +1464,34 @@ function PayPalErrorCard({ message }) {
         fontSize: 13,
         color: "#b91c1c"
       },
-      children: message
+      children: [
+        message,
+        onRetry && /* @__PURE__ */ jsx6(
+          "button",
+          {
+            type: "button",
+            onClick: onRetry,
+            style: {
+              display: "block",
+              marginTop: 8,
+              padding: "6px 14px",
+              background: "#ffffff",
+              color: "#b91c1c",
+              border: "1px solid #fecaca",
+              borderRadius: 6,
+              fontSize: 13,
+              fontWeight: 500,
+              cursor: "pointer"
+            },
+            children: "Try again"
+          }
+        )
+      ]
     }
   );
 }
 function PayPalUnavailableCard({ label }) {
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       role: "status",
@@ -1598,6 +1516,8 @@ function MedusaNextPayPalAdapter(props) {
     selectedProviderId,
     baseUrl,
     publishableApiKey,
+    credentials,
+    currencyCode,
     providerIds,
     onSuccess,
     onError,
@@ -1606,10 +1526,12 @@ function MedusaNextPayPalAdapter(props) {
   const paypalProviderId = providerIds?.paypal || PAYPAL_WALLET_PROVIDER_ID;
   const paypalCardProviderId = providerIds?.paypalCard || PAYPAL_CARD_PROVIDER_ID;
   const shouldRender = selectedProviderId === paypalProviderId || selectedProviderId === paypalCardProviderId;
-  const { config, loading, error } = usePayPalConfig({
+  const { config, loading, error, retry } = usePayPalConfig({
     baseUrl,
     publishableApiKey,
+    credentials,
     cartId,
+    currencyCode,
     enabled: shouldRender
   });
   const handlePaid = useCallback2(
@@ -1620,40 +1542,42 @@ function MedusaNextPayPalAdapter(props) {
     [cartId, onPaid, onSuccess]
   );
   if (!shouldRender) return null;
-  if (loading) return /* @__PURE__ */ jsx5(PayPalLoadingCard, {});
-  if (error) return /* @__PURE__ */ jsx5(PayPalErrorCard, { message: error });
+  if (loading) return /* @__PURE__ */ jsx6(PayPalLoadingCard, {});
+  if (error) return /* @__PURE__ */ jsx6(PayPalErrorCard, { message: error, onRetry: retry });
   if (!config) return null;
   const isCardProvider = selectedProviderId === paypalCardProviderId;
   if (config.paypal_enabled === false && !isCardProvider) {
-    return /* @__PURE__ */ jsx5(PayPalUnavailableCard, { label: config.paypal_title || "PayPal" });
+    return /* @__PURE__ */ jsx6(PayPalUnavailableCard, { label: config.paypal_title || "PayPal" });
   }
   if (isCardProvider && config.card_enabled === false) {
-    return /* @__PURE__ */ jsx5(PayPalUnavailableCard, { label: config.card_title || "Card payment" });
+    return /* @__PURE__ */ jsx6(PayPalUnavailableCard, { label: config.card_title || "Card payment" });
   }
   const disableFunding = Array.isArray(config.disable_buttons) ? config.disable_buttons.join(",") : void 0;
-  return /* @__PURE__ */ jsxs4("div", { style: { display: "grid", gap: 12 }, children: [
-    /* @__PURE__ */ jsx5(PayPalCurrencyNotice, { config }),
-    /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsxs5("div", { style: { display: "grid", gap: 12 }, children: [
+    /* @__PURE__ */ jsx6(PayPalCurrencyNotice, { config }),
+    /* @__PURE__ */ jsx6(
       PayPalProvider,
       {
         config,
         intent: config.intent === "authorize" ? "authorize" : "capture",
         disableFunding,
-        children: isCardProvider ? /* @__PURE__ */ jsx5(
+        children: isCardProvider ? /* @__PURE__ */ jsx6(
           PayPalAdvancedCard,
           {
             baseUrl,
             publishableApiKey,
+            credentials,
             cartId,
             config,
             onPaid: handlePaid,
             onError
           }
-        ) : /* @__PURE__ */ jsx5(
+        ) : /* @__PURE__ */ jsx6(
           PayPalSmartButtons,
           {
             baseUrl,
             publishableApiKey,
+            credentials,
             cartId,
             config,
             onPaid: handlePaid,
@@ -1666,14 +1590,12 @@ function MedusaNextPayPalAdapter(props) {
 }
 
 // src/components/PayPalPaymentSection.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
-var SPIN_STYLE4 = `@keyframes _pp_section_spin { to { transform: rotate(360deg) } }`;
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function SessionInitCard() {
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       role: "status",
-      "aria-label": "Setting up payment",
       style: {
         display: "flex",
         alignItems: "center",
@@ -1685,22 +1607,23 @@ function SessionInitCard() {
         borderRadius: 10
       },
       children: [
-        /* @__PURE__ */ jsx6("style", { children: SPIN_STYLE4 }),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7(AnimationStyles, {}),
+        /* @__PURE__ */ jsx7(
           "div",
           {
+            className: "_pp-spin-sm",
+            "aria-hidden": "true",
             style: {
               width: 20,
               height: 20,
               borderRadius: "50%",
               border: "2.5px solid #e5e7eb",
               borderTopColor: "#0070ba",
-              animation: "_pp_section_spin .7s linear infinite",
               flexShrink: 0
             }
           }
         ),
-        /* @__PURE__ */ jsx6("div", { style: { fontSize: 13, fontWeight: 500, color: "#111827" }, children: "Setting up payment\u2026" })
+        /* @__PURE__ */ jsx7("div", { style: { fontSize: 13, fontWeight: 500, color: "#111827" }, children: "Setting up payment\u2026" })
       ]
     }
   );
@@ -1710,20 +1633,24 @@ function PayPalPaymentSection({
   selectedProviderId,
   baseUrl,
   publishableApiKey,
+  credentials,
+  currencyCode,
   sessionLoading = false,
   onSuccess,
   onError,
   onPaid
 }) {
   if (!isPayPalProviderId(selectedProviderId)) return null;
-  if (sessionLoading) return /* @__PURE__ */ jsx6(SessionInitCard, {});
-  return /* @__PURE__ */ jsx6(
+  if (sessionLoading) return /* @__PURE__ */ jsx7(SessionInitCard, {});
+  return /* @__PURE__ */ jsx7(
     MedusaNextPayPalAdapter,
     {
       cartId,
       selectedProviderId,
       baseUrl,
       publishableApiKey,
+      credentials,
+      currencyCode,
       onSuccess,
       onError,
       onPaid
@@ -1733,19 +1660,6 @@ function PayPalPaymentSection({
 
 // src/hooks/usePayPalPaymentMethods.ts
 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;
-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 ?? ""}`;
-}
 var DEFAULT_RESULT = {
   paypalEnabled: true,
   paypalTitle: "PayPal",
@@ -1754,21 +1668,37 @@ var DEFAULT_RESULT = {
   loading: false,
   error: null
 };
+function toResult(cfg) {
+  return {
+    paypalEnabled: cfg.paypal_enabled !== false,
+    paypalTitle: typeof cfg.paypal_title === "string" && cfg.paypal_title ? cfg.paypal_title : "PayPal",
+    cardEnabled: cfg.card_enabled !== false,
+    cardTitle: typeof cfg.card_title === "string" && cfg.card_title ? cfg.card_title : "Credit or Debit Card",
+    loading: false,
+    error: null
+  };
+}
 function usePayPalPaymentMethods({
   baseUrl,
   publishableApiKey,
   cartId,
+  currencyCode,
+  credentials,
   enabled = true
 }) {
   const api = useMemo5(
-    () => createPayPalStoreApi({ baseUrl, publishableApiKey }),
-    [baseUrl, publishableApiKey]
+    () => createPayPalStoreApi({ baseUrl, publishableApiKey, credentials }),
+    [baseUrl, publishableApiKey, credentials]
   );
-  const key = cacheKey2(baseUrl, cartId);
-  const hit = _cache2.get(key);
-  const seed = hit && Date.now() - hit.at < CACHE_TTL2 ? hit.result : null;
+  const key = configCacheKey({
+    baseUrl,
+    publishableApiKey,
+    cartId,
+    currencyCode
+  });
+  const seed = getCachedPayPalConfig(key);
   const [result, setResult] = useState4(
-    seed ?? { ...DEFAULT_RESULT, loading: enabled }
+    seed ? toResult(seed) : { ...DEFAULT_RESULT, loading: enabled }
   );
   const fetchIdRef = useRef4(0);
   useEffect3(() => {
@@ -1776,43 +1706,33 @@ function usePayPalPaymentMethods({
       setResult((prev) => ({ ...prev, loading: false }));
       return;
     }
-    const k = cacheKey2(baseUrl, cartId);
-    const cached = _cache2.get(k);
-    if (cached && Date.now() - cached.at < CACHE_TTL2) {
-      setResult(cached.result);
+    const cached = getCachedPayPalConfig(key);
+    if (cached) {
+      setResult(toResult(cached));
       return;
     }
     const id = ++fetchIdRef.current;
     let mounted = true;
-    const controller = new AbortController();
     setResult((prev) => ({ ...prev, loading: true }));
     (async () => {
       try {
-        const cfg = await api.getConfig(cartId, controller.signal);
+        const cfg = await fetchPayPalConfigShared(
+          key,
+          () => api.getConfig(cartId)
+        );
         if (!mounted || id !== fetchIdRef.current) return;
-        const next = {
-          paypalEnabled: cfg.paypal_enabled !== false,
-          paypalTitle: typeof cfg.paypal_title === "string" && cfg.paypal_title ? cfg.paypal_title : "PayPal",
-          cardEnabled: cfg.card_enabled !== false,
-          cardTitle: typeof cfg.card_title === "string" && cfg.card_title ? cfg.card_title : "Credit or Debit Card",
-          loading: false,
-          error: null
-        };
-        cacheSet2(k, { result: next, at: Date.now() });
-        setResult(next);
+        setResult(toResult(cfg));
       } catch (e) {
-        const msg = e instanceof Error ? e.message : "";
-        if (e instanceof Error && e.name === "AbortError") return;
         if (!mounted || id !== fetchIdRef.current) return;
-        if (msg.includes("403") || msg.includes("Forbidden")) {
-          const disabled = {
+        const msg = e instanceof Error ? e.message : "";
+        if (e instanceof HttpError && e.status === 403) {
+          setResult({
             ...DEFAULT_RESULT,
             paypalEnabled: false,
             cardEnabled: false,
             loading: false,
             error: msg || "PayPal is disabled"
-          };
-          setResult(disabled);
+          });
           return;
         }
         setResult({
@@ -1824,14 +1744,15 @@ function usePayPalPaymentMethods({
     })();
     return () => {
       mounted = false;
-      controller.abort();
     };
-  }, [api, baseUrl, cartId, enabled]);
+  }, [api, key, cartId, enabled]);
   return result;
 }
 export {
+  HttpError,
   MedusaNextPayPalAdapter,
   PAYPAL_CARD_PROVIDER_ID,
+  PAYPAL_PROVIDER_IDS,
   PAYPAL_WALLET_PROVIDER_ID,
   PayPalAdvancedCard,
   PayPalCurrencyNotice,
@@ -1839,9 +1760,11 @@ export {
   PayPalProvider,
   PayPalSmartButtons,
   clearCartCaptured,
+  createHttpClient,
   createPayPalStoreApi,
   generateIdempotencyKey,
   hideProcessingOverlay,
+  invalidatePayPalConfigCache,
   isPayPalProviderId,
   markCartCaptured,
   markPaymentComplete,