@easypayment/medusa-paypal-ui 1.0.56 → 1.1.1

package/CHANGELOG.md

@@ -0,0 +1,61 @@
+# Changelog
+
+All notable changes to `@easypayment/medusa-paypal-ui` are documented here.
+
+## 1.1.0
+
+### Fixed (re-audit)
+- **Card submit rejections no longer strand the buyer under the processing
+  overlay.** `cardFieldsForm.submit()` returns a promise whose rejection is not
+  routed to the provider's `onError`; it is now caught, the overlay/state reset,
+  and the validation message shown.
+- **A payment can no longer be taken twice after a finalization failure.** Once
+  a capture succeeds, any later failure (order completion, consumer callback)
+  now shows a dedicated "Retry — finish placing my order" action that retries
+  only the finalization; the PayPal button/card form no longer re-appears to
+  invite a second, distinct charge for the same cart.
+- **Back-button (bfcache) restores no longer leave a stuck overlay.** The DOM
+  processing overlay and both components' React overlays reset on `pageshow`
+  with `persisted: true`.
+- **Requests can no longer hang forever.** The 30s HTTP timeout now also applies
+  when a caller passes an `AbortSignal` (hook config fetches), and it covers
+  reading the response body, not just the headers.
+- **Buyers now see the backend's error message.** Error bodies are parsed as
+  JSON and the backend's buyer-facing `message` (unsupported currency,
+  rate-limit, "payment processed but order not finalized", "PayPal is currently
+  disabled") is shown instead of a raw JSON blob or a misleading CORS hint.
+- **Ineligible PayPal buttons no longer spin forever.** If the SDK resolves but
+  never initializes the buttons (ineligible country/currency/funding), a clear
+  "PayPal is not available" message replaces the infinite "Loading PayPal…"
+  spinner after 10s.
+- **Missing `orderID` guard added to the card `onApprove`** (matching the
+  buttons flow) so an empty id fails fast with a clear message.
+- **Next.js 15 `notFound()` is no longer treated as a payment failure**
+  (`NEXT_HTTP_ERROR_FALLBACK` digests are now recognized as router errors).
+- **CJS TypeScript consumers get correct types.** The exports map now serves
+  `dist/*.d.cts` under the `require` condition (fixes TS1479 under
+  `node16`/`nodenext` resolution).
+- **`PayPalSettingsResponse` now matches the actual endpoint response**
+  (`paymentAction`, `advancedCardEnabled`); the old `data` envelope shape is
+  kept as deprecated so existing code compiles.
+
+
+### Added
+- **Transient-failure retry** in the HTTP client (opt-in `retries`, jittered
+  backoff on network errors / timeouts / 429 / 5xx). Wired into the idempotent
+  `markPaymentComplete` and `captureOrder` calls so a network blip right after
+  capture — the classic "captured but cart not completed" gap — is retried
+  instead of stranding a paid-but-unfinalized order.
+- Tests for the retry logic and the capture/complete retry paths.
+
+### Changed
+- Test environment switched from `node` to `jsdom` so component/hook tests can
+  run against a DOM (the client tests continue to pass under it).
+
+## 1.0.56
+
+### Added
+- Unit test suite (vitest) for the framework-agnostic client logic: the HTTP
+  client (base-url/path normalization, publishable-key header, 401/403 handling,
+  HTML-tag stripping, empty-body and non-JSON guards, timeout surfacing) and the
+  Next.js router-error detection helper.

package/dist/index.cjs

@@ -1,8 +1,10 @@
 "use client";
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,6 +18,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -40,6 +50,33 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/client/http.ts
+var HttpError = class extends Error {
+  constructor(message, status) {
+    super(message);
+    this.name = "HttpError";
+    this.status = status;
+  }
+};
+var RETRY_BASE_DELAY_MS = 400;
+function isRetryableStatus(status) {
+  return status === 429 || status >= 500;
+}
+function isRetryableError(err) {
+  return err instanceof Error && !(err instanceof HttpError);
+}
+var wait = (ms) => new Promise((r) => setTimeout(r, ms));
+function extractJsonMessage(text) {
+  if (!text) return null;
+  try {
+    const parsed = JSON.parse(text);
+    const message = parsed?.message;
+    if (typeof message === "string" && message.trim()) {
+      return message.trim().slice(0, 500);
+    }
+  } catch {
+  }
+  return null;
+}
 function toHeaderRecord(headers) {
   if (!headers) {
     return {};
@@ -54,7 +91,7 @@ function toHeaderRecord(headers) {
 }
 function createHttpClient(opts) {
   const base = opts.baseUrl.replace(/\/+$/, "");
-  async function request(path, init) {
+  async function attempt(path, init) {
     const url = `${base}${path.startsWith("/") ? "" : "/"}${path}`;
     const headers = {
       Accept: "application/json",
@@ -64,41 +101,54 @@ function createHttpClient(opts) {
       headers["x-publishable-api-key"] = opts.publishableApiKey;
     }
     const timeoutMs = 3e4;
-    let timeoutId;
     const controller = new AbortController();
-    if (!init?.signal) {
-      timeoutId = setTimeout(() => controller.abort(), timeoutMs);
+    const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
+    const callerSignal = init?.signal ?? null;
+    const onCallerAbort = () => controller.abort();
+    if (callerSignal) {
+      if (callerSignal.aborted) controller.abort();
+      else callerSignal.addEventListener("abort", onCallerAbort);
     }
-    const effectiveSignal = init?.signal || controller.signal;
     let res;
+    let text;
     try {
-      res = await fetch(url, { ...init, headers, credentials: "include", signal: effectiveSignal });
+      res = await fetch(url, {
+        ...init,
+        headers,
+        credentials: "include",
+        signal: controller.signal
+      });
+      text = await res.text().catch(() => "");
     } catch (err) {
-      if (err instanceof Error && err.name === "AbortError" && !init?.signal) {
+      if (err instanceof Error && err.name === "AbortError" && !(callerSignal && callerSignal.aborted)) {
         throw new Error(`[PayPal] Request to ${path} timed out after ${timeoutMs / 1e3}s`);
       }
       throw err;
     } finally {
-      if (timeoutId !== void 0) clearTimeout(timeoutId);
+      clearTimeout(timeoutId);
+      if (callerSignal) callerSignal.removeEventListener("abort", onCallerAbort);
     }
-    const text = await res.text().catch(() => "");
     if (!res.ok) {
+      const parsedMessage = extractJsonMessage(text);
       if (res.status === 401) {
-        throw new Error(
-          "[PayPal] Unauthorized (401) \u2014 check that your publishable API key is correct and set in NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY"
+        throw new HttpError(
+          parsedMessage || "[PayPal] Unauthorized (401) \u2014 check that your publishable API key is correct and set in NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY",
+          401
         );
       }
       if (res.status === 403) {
-        throw new Error(
-          "[PayPal] Forbidden (403) \u2014 this request is not allowed. Check your CORS and API key settings."
+        throw new HttpError(
+          parsedMessage || "[PayPal] Forbidden (403) \u2014 this request is not allowed. Check your CORS and API key settings.",
+          403
         );
       }
-      throw new Error(
-        text.slice(0, 500).replace(/<[^>]*>/g, "") || `Request failed (${res.status})`
+      throw new HttpError(
+        parsedMessage || text.slice(0, 500).replace(/<[^>]*>/g, "") || `Request failed (${res.status})`,
+        res.status
       );
     }
     if (!text) {
-      throw new Error(`[PayPal] Empty response body from ${path} (${res.status})`);
+      throw new HttpError(`[PayPal] Empty response body from ${path} (${res.status})`, res.status);
     }
     const contentType = res.headers.get("content-type") || "";
     if (!contentType.includes("application/json")) {
@@ -112,17 +162,39 @@ function createHttpClient(opts) {
       throw new Error(`[PayPal] Failed to parse JSON response from ${path}`);
     }
   }
+  async function request(path, init, reqOpts) {
+    const retries = Math.max(0, reqOpts?.retries ?? 0);
+    let lastError;
+    for (let i = 0; i <= retries; i++) {
+      try {
+        return await attempt(path, init);
+      } catch (err) {
+        lastError = err;
+        const transient = err instanceof HttpError && isRetryableStatus(err.status) || isRetryableError(err);
+        const aborted = err instanceof Error && err.name === "AbortError" && !!init?.signal;
+        if (i >= retries || !transient || aborted) {
+          throw err;
+        }
+        await wait(RETRY_BASE_DELAY_MS * Math.pow(2, i) + Math.random() * RETRY_BASE_DELAY_MS);
+      }
+    }
+    throw lastError;
+  }
   return { request };
 }
 
 // src/client/paypal.ts
 async function markPaymentComplete(baseUrl, cartId, publishableApiKey) {
   const http = createHttpClient({ baseUrl, publishableApiKey });
-  return http.request(`/store/paypal-complete`, {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ cart_id: cartId })
-  });
+  return http.request(
+    `/store/paypal-complete`,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ cart_id: cartId })
+    },
+    { retries: 3 }
+  );
 }
 function createPayPalStoreApi(opts) {
   const http = createHttpClient(opts);
@@ -142,11 +214,15 @@ function createPayPalStoreApi(opts) {
       });
     },
     captureOrder(cartId, orderId) {
-      return http.request(`/store/paypal/capture-order`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ cart_id: cartId, order_id: orderId })
-      });
+      return http.request(
+        `/store/paypal/capture-order`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ cart_id: cartId, order_id: orderId })
+        },
+        { retries: 2 }
+      );
     }
   };
 }
@@ -270,7 +346,9 @@ var import_react_paypal_js2 = require("@paypal/react-paypal-js");
 function isNextRouterError(e) {
   if (typeof e !== "object" || e === null || !("digest" in e)) return false;
   const digest = e.digest;
-  return typeof digest === "string" && (digest.startsWith("NEXT_REDIRECT") || digest.startsWith("NEXT_NOT_FOUND"));
+  return typeof digest === "string" && (digest.startsWith("NEXT_REDIRECT") || digest.startsWith("NEXT_NOT_FOUND") || // Next.js 15: notFound()/forbidden()/unauthorized() throw
+  // HTTPAccessFallbackError with digest "NEXT_HTTP_ERROR_FALLBACK;<status>".
+  digest.startsWith("NEXT_HTTP_ERROR_FALLBACK"));
 }
 
 // src/utils/processing-overlay.ts
@@ -334,8 +412,13 @@ function showProcessingOverlay() {
     origReplace(...args);
     onNav();
   };
+  const onPageShow = (e) => {
+    if (e.persisted) hideProcessingOverlay();
+  };
+  window.addEventListener("pageshow", onPageShow);
   cleanupNavListener = () => {
     window.removeEventListener("popstate", onNav);
+    window.removeEventListener("pageshow", onPageShow);
     history.pushState = origPush;
     history.replaceState = origReplace;
   };
@@ -368,11 +451,48 @@ function PayPalSmartButtons(props) {
   const [error, setError] = (0, import_react3.useState)(null);
   const [processing, setProcessing] = (0, import_react3.useState)(false);
   const [buttonsReady, setButtonsReady] = (0, import_react3.useState)(false);
+  const [loadTimedOut, setLoadTimedOut] = (0, import_react3.useState)(false);
+  const capturedRef = (0, import_react3.useRef)(null);
+  const [completionPending, setCompletionPending] = (0, import_react3.useState)(false);
   const [{ isPending, isResolved, isRejected }] = (0, import_react_paypal_js2.usePayPalScriptReducer)();
   const handleInit = (0, import_react3.useCallback)(() => {
     setButtonsReady(true);
   }, []);
-  const showSpinner = isPending || isResolved && !buttonsReady;
+  (0, import_react3.useEffect)(() => {
+    const onPageShow = (e) => {
+      if (e.persisted) setProcessing(false);
+    };
+    window.addEventListener("pageshow", onPageShow);
+    return () => window.removeEventListener("pageshow", onPageShow);
+  }, []);
+  (0, import_react3.useEffect)(() => {
+    if (!isResolved || buttonsReady) {
+      return;
+    }
+    const t = setTimeout(() => setLoadTimedOut(true), 1e4);
+    return () => clearTimeout(t);
+  }, [isResolved, buttonsReady]);
+  const finalizeCapturedPayment = (0, import_react3.useCallback)(async () => {
+    const captured = capturedRef.current;
+    if (!captured) return;
+    setProcessing(true);
+    showProcessingOverlay();
+    setError(null);
+    try {
+      const completeResult = await markPaymentComplete(baseUrl, cartId, publishableApiKey);
+      await onPaid?.({ ...captured, ...completeResult });
+      setCompletionPending(false);
+    } catch (e) {
+      if (isNextRouterError(e)) return;
+      hideProcessingOverlay();
+      setProcessing(false);
+      setCompletionPending(true);
+      const msg = "Your payment was received, but finalizing your order failed. Please use the Retry button below \u2014 do not pay again.";
+      setError(msg);
+      onError?.(msg);
+    }
+  }, [baseUrl, cartId, publishableApiKey, onPaid, onError]);
+  const showSpinner = (isPending || isResolved && !buttonsReady) && !loadTimedOut;
   if (!config.currency_supported) return null;
   const containerWidth = BUTTON_WIDTH_MAP[config.button_width ?? "responsive"] ?? "100%";
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { width: containerWidth, position: "relative" }, children: [
@@ -511,6 +631,28 @@ function PayPalSmartButtons(props) {
         ]
       }
     ),
+    loadTimedOut && !buttonsReady && !isRejected && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "div",
+      {
+        role: "alert",
+        style: {
+          display: "flex",
+          alignItems: "flex-start",
+          gap: 8,
+          padding: "10px 14px",
+          background: "#fef2f2",
+          border: "1px solid #fecaca",
+          borderRadius: 8,
+          fontSize: 13,
+          color: "#b91c1c",
+          lineHeight: 1.5
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { flexShrink: 0, fontSize: 15 }, children: "\u26A0\uFE0F" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "PayPal is not available for this purchase. Please try a different payment method." })
+        ]
+      }
+    ),
     isRejected && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       "div",
       {
@@ -571,7 +713,7 @@ function PayPalSmartButtons(props) {
         ]
       }
     ),
-    isResolved && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: buttonsReady ? void 0 : { position: "absolute", left: -9999, opacity: 0, pointerEvents: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    isResolved && !completionPending && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: buttonsReady ? void 0 : { position: "absolute", left: -9999, opacity: 0, pointerEvents: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       import_react_paypal_js2.PayPalButtons,
       {
         forceReRender: [config.currency, config.intent, cartId],
@@ -585,6 +727,10 @@ function PayPalSmartButtons(props) {
         },
         createOrder: async () => {
           if (processing) throw new Error("Payment already processing");
+          if (capturedRef.current) {
+            void finalizeCapturedPayment();
+            throw new Error("Your payment was already received \u2014 finalizing your order.");
+          }
           setError(null);
           setProcessing(true);
           try {
@@ -603,8 +749,7 @@ function PayPalSmartButtons(props) {
             const orderId = String(data?.orderID || "");
             if (!orderId) throw new Error("PayPal order ID is missing from approval response");
             const result = await api.captureOrder(cartId, orderId);
-            const completeResult = await markPaymentComplete(baseUrl, cartId, publishableApiKey);
-            await onPaid?.({ ...result, ...completeResult });
+            capturedRef.current = result || {};
           } catch (e) {
             if (isNextRouterError(e)) return;
             hideProcessingOverlay();
@@ -612,7 +757,9 @@ function PayPalSmartButtons(props) {
             const msg = e instanceof Error ? e.message : "Payment capture failed";
             setError(msg);
             onError?.(msg);
+            return;
           }
+          await finalizeCapturedPayment();
         },
         onCancel: () => {
           hideProcessingOverlay();
@@ -627,6 +774,29 @@ function PayPalSmartButtons(props) {
         }
       }
     ) }),
+    completionPending && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: () => void finalizeCapturedPayment(),
+        disabled: processing,
+        "aria-busy": processing,
+        style: {
+          width: "100%",
+          padding: "12px 16px",
+          marginTop: 4,
+          background: "#0070ba",
+          color: "#ffffff",
+          border: "none",
+          borderRadius: 8,
+          fontSize: 14,
+          fontWeight: 600,
+          cursor: processing ? "not-allowed" : "pointer",
+          opacity: processing ? 0.7 : 1
+        },
+        children: "Retry \u2014 finish placing my order"
+      }
+    ),
     error ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       "div",
       {
@@ -654,7 +824,7 @@ function PayPalSmartButtons(props) {
 }
 
 // src/components/PayPalAdvancedCard.tsx
-var import_react4 = require("react");
+var import_react4 = __toESM(require("react"), 1);
 var import_react_paypal_js3 = require("@paypal/react-paypal-js");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var SPIN_STYLE2 = `
@@ -706,7 +876,8 @@ var labelStyle = {
 function SubmitButton({
   disabled,
   label,
-  onSubmit
+  onSubmit,
+  onSubmitError
 }) {
   const { cardFieldsForm } = (0, import_react_paypal_js3.usePayPalCardFields)();
   const isDisabled = disabled || !cardFieldsForm;
@@ -718,10 +889,10 @@ function SubmitButton({
       "aria-busy": disabled,
       onClick: () => {
         onSubmit();
-        try {
-          cardFieldsForm?.submit();
-        } catch {
-        }
+        Promise.resolve(cardFieldsForm?.submit()).catch((e) => {
+          const msg = e instanceof Error && e.message ? e.message : "Card payment could not be submitted. Please check your card details.";
+          onSubmitError(msg);
+        });
       },
       style: {
         width: "100%",
@@ -767,7 +938,45 @@ function PayPalAdvancedCard(props) {
   const [submitting, setSubmitting] = (0, import_react4.useState)(false);
   const submittingRef = (0, import_react4.useRef)(false);
   const creatingOrderRef = (0, import_react4.useRef)(false);
+  const capturedRef = (0, import_react4.useRef)(null);
+  const [completionPending, setCompletionPending] = (0, import_react4.useState)(false);
   const [{ isPending, isResolved, isRejected }] = (0, import_react_paypal_js3.usePayPalScriptReducer)();
+  const resetSubmitState = import_react4.default.useCallback(() => {
+    hideProcessingOverlay();
+    creatingOrderRef.current = false;
+    submittingRef.current = false;
+    setSubmitting(false);
+  }, []);
+  import_react4.default.useEffect(() => {
+    const onPageShow = (e) => {
+      if (e.persisted) {
+        creatingOrderRef.current = false;
+        submittingRef.current = false;
+        setSubmitting(false);
+      }
+    };
+    window.addEventListener("pageshow", onPageShow);
+    return () => window.removeEventListener("pageshow", onPageShow);
+  }, []);
+  const finalizeCapturedPayment = import_react4.default.useCallback(async () => {
+    const captured = capturedRef.current;
+    if (!captured) return;
+    setSubmitting(true);
+    showProcessingOverlay();
+    setError(null);
+    try {
+      const completeResult = await markPaymentComplete(baseUrl, cartId, publishableApiKey);
+      await onPaid?.({ ...captured, ...completeResult });
+      setCompletionPending(false);
+    } catch (e) {
+      if (isNextRouterError(e)) return;
+      resetSubmitState();
+      setCompletionPending(true);
+      const msg = "Your payment was received, but finalizing your order failed. Please use the Retry button below \u2014 do not pay again.";
+      setError(msg);
+      onError?.(msg);
+    }
+  }, [baseUrl, cartId, publishableApiKey, onPaid, onError, resetSubmitState]);
   if (!config.currency_supported) return null;
   if (isRejected) {
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
@@ -956,6 +1165,10 @@ function PayPalAdvancedCard(props) {
         style: cardStyle,
         createOrder: async () => {
           if (creatingOrderRef.current) throw new Error("Payment already processing");
+          if (capturedRef.current) {
+            void finalizeCapturedPayment();
+            throw new Error("Your payment was already received \u2014 finalizing your order.");
+          }
           creatingOrderRef.current = true;
           try {
             setError(null);
@@ -971,19 +1184,18 @@ function PayPalAdvancedCard(props) {
             setError(null);
             showProcessingOverlay();
             const orderId = String(data?.orderID || "");
+            if (!orderId) throw new Error("PayPal order ID is missing from approval response");
             const result = await api.captureOrder(cartId, orderId);
-            const completeResult = await markPaymentComplete(baseUrl, cartId, publishableApiKey);
-            await onPaid?.({ ...result, ...completeResult });
+            capturedRef.current = result || {};
           } catch (e) {
             if (isNextRouterError(e)) return;
-            hideProcessingOverlay();
-            creatingOrderRef.current = false;
-            submittingRef.current = false;
-            setSubmitting(false);
+            resetSubmitState();
             const msg = e instanceof Error ? e.message : "Card payment failed";
             setError(msg);
             onError?.(msg);
+            return;
           }
+          await finalizeCapturedPayment();
         },
         onCancel: () => {
           hideProcessingOverlay();
@@ -1090,7 +1302,29 @@ function PayPalAdvancedCard(props) {
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              completionPending ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => void finalizeCapturedPayment(),
+                  disabled: submitting,
+                  "aria-busy": submitting,
+                  style: {
+                    width: "100%",
+                    height: 48,
+                    padding: "0 20px",
+                    borderRadius: 8,
+                    border: "none",
+                    background: "#0070ba",
+                    color: "#ffffff",
+                    fontSize: 15,
+                    fontWeight: 600,
+                    cursor: submitting ? "not-allowed" : "pointer",
+                    opacity: submitting ? 0.7 : 1
+                  },
+                  children: "Retry \u2014 finish placing my order"
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 SubmitButton,
                 {
                   disabled: submitting,
@@ -1101,6 +1335,11 @@ function PayPalAdvancedCard(props) {
                     setError(null);
                     setSubmitting(true);
                     showProcessingOverlay();
+                  },
+                  onSubmitError: (msg) => {
+                    resetSubmitState();
+                    setError(msg);
+                    onError?.(msg);
                   }
                 }
               ),