@easypayment/medusa-paypal-ui 1.1.1 → 1.2.2

package/dist/index.cjs

@@ -39,13 +39,17 @@ __export(index_exports, {
   PayPalPaymentSection: () => PayPalPaymentSection,
   PayPalProvider: () => PayPalProvider,
   PayPalSmartButtons: () => PayPalSmartButtons,
+  clearCartCaptured: () => clearCartCaptured,
   createPayPalStoreApi: () => createPayPalStoreApi,
+  generateIdempotencyKey: () => generateIdempotencyKey,
   hideProcessingOverlay: () => hideProcessingOverlay,
   isPayPalProviderId: () => isPayPalProviderId,
+  markCartCaptured: () => markCartCaptured,
   markPaymentComplete: () => markPaymentComplete,
   showProcessingOverlay: () => showProcessingOverlay,
   usePayPalConfig: () => usePayPalConfig,
-  usePayPalPaymentMethods: () => usePayPalPaymentMethods
+  usePayPalPaymentMethods: () => usePayPalPaymentMethods,
+  wasCartCaptured: () => wasCartCaptured
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -115,7 +119,7 @@ function createHttpClient(opts) {
       res = await fetch(url, {
         ...init,
         headers,
-        credentials: "include",
+        credentials: opts.credentials ?? "include",
         signal: controller.signal
       });
       text = await res.text().catch(() => "");
@@ -184,6 +188,14 @@ function createHttpClient(opts) {
 }
 
 // src/client/paypal.ts
+function generateIdempotencyKey() {
+  try {
+    const c = globalThis.crypto;
+    if (c?.randomUUID) return c.randomUUID();
+  } catch {
+  }
+  return `pp-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 12)}`;
+}
 async function markPaymentComplete(baseUrl, cartId, publishableApiKey) {
   const http = createHttpClient({ baseUrl, publishableApiKey });
   return http.request(
@@ -209,7 +221,13 @@ function createPayPalStoreApi(opts) {
     createOrder(cartId, isCardPayment = false) {
       return http.request(`/store/paypal/create-order`, {
         method: "POST",
-        headers: { "Content-Type": "application/json" },
+        headers: {
+          "Content-Type": "application/json",
+          // One key per attempt — see generateIdempotencyKey. Deliberately NOT
+          // sent for capture-order: there the server's deterministic
+          // per-order-id fallback is the correct idempotency scope.
+          "Idempotency-Key": generateIdempotencyKey()
+        },
         body: JSON.stringify({ cart_id: cartId, is_card_payment: isCardPayment })
       });
     },
@@ -342,6 +360,31 @@ function PayPalCurrencyNotice({ config }) {
 var import_react3 = require("react");
 var import_react_paypal_js2 = require("@paypal/react-paypal-js");
 
+// src/utils/captured-state.ts
+var KEY_PREFIX = "__pp_captured::";
+function markCartCaptured(cartId) {
+  if (!cartId) return;
+  try {
+    window.sessionStorage.setItem(`${KEY_PREFIX}${cartId}`, String(Date.now()));
+  } catch {
+  }
+}
+function wasCartCaptured(cartId) {
+  if (!cartId) return false;
+  try {
+    return window.sessionStorage.getItem(`${KEY_PREFIX}${cartId}`) !== null;
+  } catch {
+    return false;
+  }
+}
+function clearCartCaptured(cartId) {
+  if (!cartId) return;
+  try {
+    window.sessionStorage.removeItem(`${KEY_PREFIX}${cartId}`);
+  } catch {
+  }
+}
+
 // src/utils/next-errors.ts
 function isNextRouterError(e) {
   if (typeof e !== "object" || e === null || !("digest" in e)) return false;
@@ -465,6 +508,13 @@ function PayPalSmartButtons(props) {
     window.addEventListener("pageshow", onPageShow);
     return () => window.removeEventListener("pageshow", onPageShow);
   }, []);
+  (0, import_react3.useEffect)(() => {
+    if (capturedRef.current || !wasCartCaptured(cartId)) return;
+    capturedRef.current = {};
+    setCompletionPending(true);
+    const msg = "Your payment was already received for this cart. Please use the button below to finish placing your order \u2014 do not pay again.";
+    setError(msg);
+  }, [cartId]);
   (0, import_react3.useEffect)(() => {
     if (!isResolved || buttonsReady) {
       return;
@@ -480,6 +530,7 @@ function PayPalSmartButtons(props) {
     setError(null);
     try {
       const completeResult = await markPaymentComplete(baseUrl, cartId, publishableApiKey);
+      clearCartCaptured(cartId);
       await onPaid?.({ ...captured, ...completeResult });
       setCompletionPending(false);
     } catch (e) {
@@ -750,6 +801,7 @@ function PayPalSmartButtons(props) {
             if (!orderId) throw new Error("PayPal order ID is missing from approval response");
             const result = await api.captureOrder(cartId, orderId);
             capturedRef.current = result || {};
+            markCartCaptured(cartId);
           } catch (e) {
             if (isNextRouterError(e)) return;
             hideProcessingOverlay();
@@ -958,6 +1010,14 @@ function PayPalAdvancedCard(props) {
     window.addEventListener("pageshow", onPageShow);
     return () => window.removeEventListener("pageshow", onPageShow);
   }, []);
+  import_react4.default.useEffect(() => {
+    if (capturedRef.current || !wasCartCaptured(cartId)) return;
+    capturedRef.current = {};
+    setCompletionPending(true);
+    setError(
+      "Your payment was already received for this cart. Please use the button below to finish placing your order \u2014 do not pay again."
+    );
+  }, [cartId]);
   const finalizeCapturedPayment = import_react4.default.useCallback(async () => {
     const captured = capturedRef.current;
     if (!captured) return;
@@ -966,6 +1026,7 @@ function PayPalAdvancedCard(props) {
     setError(null);
     try {
       const completeResult = await markPaymentComplete(baseUrl, cartId, publishableApiKey);
+      clearCartCaptured(cartId);
       await onPaid?.({ ...captured, ...completeResult });
       setCompletionPending(false);
     } catch (e) {
@@ -1187,6 +1248,7 @@ function PayPalAdvancedCard(props) {
             if (!orderId) throw new Error("PayPal order ID is missing from approval response");
             const result = await api.captureOrder(cartId, orderId);
             capturedRef.current = result || {};
+            markCartCaptured(cartId);
           } catch (e) {
             if (isNextRouterError(e)) return;
             resetSubmitState();
@@ -1375,9 +1437,23 @@ function PayPalAdvancedCard(props) {
 
 // src/adapters/MedusaNextPayPalAdapter.tsx
 var import_react5 = require("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
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var DEFAULT_PAYPAL_PROVIDER_ID = "pp_paypal_paypal";
-var DEFAULT_PAYPAL_CARD_PROVIDER_ID = "pp_paypal_card_paypal_card";
 var SPIN_STYLE3 = `@keyframes _pp_spin { to { transform: rotate(360deg) } }`;
 function PayPalLoadingCard() {
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
@@ -1435,6 +1511,26 @@ function PayPalErrorCard({ message }) {
     }
   );
 }
+function PayPalUnavailableCard({ label }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      role: "status",
+      style: {
+        padding: "12px 16px",
+        background: "#f9fafb",
+        border: "1px solid #e5e7eb",
+        borderRadius: 10,
+        fontSize: 13,
+        color: "#6b7280"
+      },
+      children: [
+        label,
+        " is currently unavailable. Please choose a different payment method."
+      ]
+    }
+  );
+}
 function MedusaNextPayPalAdapter(props) {
   const {
     cartId,
@@ -1446,8 +1542,8 @@ function MedusaNextPayPalAdapter(props) {
     onError,
     onPaid
   } = props;
-  const paypalProviderId = providerIds?.paypal || DEFAULT_PAYPAL_PROVIDER_ID;
-  const paypalCardProviderId = providerIds?.paypalCard || DEFAULT_PAYPAL_CARD_PROVIDER_ID;
+  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({
     baseUrl,
@@ -1467,8 +1563,12 @@ function MedusaNextPayPalAdapter(props) {
   if (error) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PayPalErrorCard, { message: error });
   if (!config) return null;
   const isCardProvider = selectedProviderId === paypalCardProviderId;
-  if (config.paypal_enabled === false && !isCardProvider) return null;
-  if (isCardProvider && config.card_enabled === false) return null;
+  if (config.paypal_enabled === false && !isCardProvider) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PayPalUnavailableCard, { label: config.paypal_title || "PayPal" });
+  }
+  if (isCardProvider && config.card_enabled === false) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PayPalUnavailableCard, { label: config.card_title || "Card payment" });
+  }
   const disableFunding = Array.isArray(config.disable_buttons) ? config.disable_buttons.join(",") : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "grid", gap: 12 }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PayPalCurrencyNotice, { config }),
@@ -1505,18 +1605,7 @@ function MedusaNextPayPalAdapter(props) {
 }
 
 // src/components/PayPalPaymentSection.tsx
-var import_react6 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-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(id) {
-  if (!id) return false;
-  return PAYPAL_PROVIDER_IDS.includes(id);
-}
 var SPIN_STYLE4 = `@keyframes _pp_section_spin { to { transform: rotate(360deg) } }`;
 function SessionInitCard() {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
@@ -1555,62 +1644,6 @@ function SessionInitCard() {
     }
   );
 }
-function ConfigLoadingCard() {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-    "div",
-    {
-      role: "status",
-      "aria-label": "Connecting to PayPal",
-      style: {
-        display: "flex",
-        alignItems: "center",
-        gap: 12,
-        padding: "14px 16px",
-        background: "#f9fafb",
-        border: "1px solid #e5e7eb",
-        borderRadius: 10
-      },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("style", { children: SPIN_STYLE4 }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          "div",
-          {
-            style: {
-              width: 22,
-              height: 22,
-              borderRadius: "50%",
-              border: "2.5px solid #e5e7eb",
-              borderTopColor: "#0070ba",
-              animation: "_pp_section_spin .7s linear infinite",
-              flexShrink: 0
-            }
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { fontSize: 13, fontWeight: 500, color: "#111827" }, children: "Connecting to PayPal\u2026" }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { fontSize: 12, color: "#6b7280", marginTop: 2 }, children: "Setting up secure payment" })
-        ] })
-      ]
-    }
-  );
-}
-function ErrorCard({ message }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    "div",
-    {
-      role: "alert",
-      style: {
-        padding: "12px 16px",
-        background: "#fef2f2",
-        border: "1px solid #fecaca",
-        borderRadius: 10,
-        fontSize: 13,
-        color: "#b91c1c"
-      },
-      children: message
-    }
-  );
-}
 function PayPalPaymentSection({
   cartId,
   selectedProviderId,
@@ -1621,67 +1654,24 @@ function PayPalPaymentSection({
   onError,
   onPaid
 }) {
-  const shouldRender = isPayPalProviderId(selectedProviderId);
-  const { config, loading, error } = usePayPalConfig({
-    baseUrl,
-    publishableApiKey,
-    cartId,
-    enabled: shouldRender
-  });
-  const handlePaid = (0, import_react6.useCallback)(
-    async (captureResult) => {
-      onPaid?.(captureResult);
-      await onSuccess?.(cartId);
-    },
-    [cartId, onPaid, onSuccess]
-  );
-  if (!shouldRender) return null;
+  if (!isPayPalProviderId(selectedProviderId)) return null;
   if (sessionLoading) return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SessionInitCard, {});
-  if (loading) return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ConfigLoadingCard, {});
-  if (error) return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ErrorCard, { message: error });
-  if (!config) return null;
-  if (config.paypal_enabled === false && selectedProviderId === PAYPAL_WALLET_PROVIDER_ID) {
-    return null;
-  }
-  const isCardProvider = selectedProviderId === PAYPAL_CARD_PROVIDER_ID;
-  if (isCardProvider && config.card_enabled === false) return null;
-  const disableFunding = Array.isArray(config.disable_buttons) ? config.disable_buttons.join(",") : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "grid", gap: 12 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PayPalCurrencyNotice, { config }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      PayPalProvider,
-      {
-        config,
-        intent: config.intent === "authorize" ? "authorize" : "capture",
-        disableFunding,
-        children: isCardProvider ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          PayPalAdvancedCard,
-          {
-            baseUrl,
-            publishableApiKey,
-            cartId,
-            config,
-            onPaid: handlePaid,
-            onError
-          }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          PayPalSmartButtons,
-          {
-            baseUrl,
-            publishableApiKey,
-            cartId,
-            config,
-            onPaid: handlePaid,
-            onError
-          }
-        )
-      }
-    )
-  ] }, selectedProviderId);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    MedusaNextPayPalAdapter,
+    {
+      cartId,
+      selectedProviderId,
+      baseUrl,
+      publishableApiKey,
+      onSuccess,
+      onError,
+      onPaid
+    }
+  );
 }
 
 // src/hooks/usePayPalPaymentMethods.ts
-var import_react7 = require("react");
+var import_react6 = require("react");
 var MAX_CACHE_ENTRIES2 = 50;
 var _cache2 = /* @__PURE__ */ new Map();
 var CACHE_TTL2 = 5 * 60 * 1e3;
@@ -1700,7 +1690,8 @@ var DEFAULT_RESULT = {
   paypalTitle: "PayPal",
   cardEnabled: true,
   cardTitle: "Credit or Debit Card",
-  loading: false
+  loading: false,
+  error: null
 };
 function usePayPalPaymentMethods({
   baseUrl,
@@ -1708,16 +1699,16 @@ function usePayPalPaymentMethods({
   cartId,
   enabled = true
 }) {
-  const api = (0, import_react7.useMemo)(
+  const api = (0, import_react6.useMemo)(
     () => createPayPalStoreApi({ baseUrl, publishableApiKey }),
     [baseUrl, publishableApiKey]
   );
   const key = cacheKey2(baseUrl, cartId);
   const hit = _cache2.get(key);
   const seed = hit && Date.now() - hit.at < CACHE_TTL2 ? hit.result : null;
-  const [result, setResult] = (0, import_react7.useState)(seed ?? { ...DEFAULT_RESULT, loading: enabled });
-  const fetchIdRef = (0, import_react7.useRef)(0);
-  (0, import_react7.useEffect)(() => {
+  const [result, setResult] = (0, import_react6.useState)(seed ?? { ...DEFAULT_RESULT, loading: enabled });
+  const fetchIdRef = (0, import_react6.useRef)(0);
+  (0, import_react6.useEffect)(() => {
     if (!enabled) {
       setResult((prev) => ({ ...prev, loading: false }));
       return;
@@ -1741,7 +1732,8 @@ function usePayPalPaymentMethods({
           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
+          loading: false,
+          error: null
         };
         cacheSet2(k, { result: next, at: Date.now() });
         setResult(next);
@@ -1754,12 +1746,17 @@ function usePayPalPaymentMethods({
             ...DEFAULT_RESULT,
             paypalEnabled: false,
             cardEnabled: false,
-            loading: false
+            loading: false,
+            error: msg || "PayPal is disabled"
           };
           setResult(disabled);
           return;
         }
-        setResult({ ...DEFAULT_RESULT, loading: false });
+        setResult({
+          ...DEFAULT_RESULT,
+          loading: false,
+          error: msg || "Failed to load PayPal payment methods"
+        });
       }
     })();
     return () => {
@@ -1779,12 +1776,16 @@ function usePayPalPaymentMethods({
   PayPalPaymentSection,
   PayPalProvider,
   PayPalSmartButtons,
+  clearCartCaptured,
   createPayPalStoreApi,
+  generateIdempotencyKey,
   hideProcessingOverlay,
   isPayPalProviderId,
+  markCartCaptured,
   markPaymentComplete,
   showProcessingOverlay,
   usePayPalConfig,
-  usePayPalPaymentMethods
+  usePayPalPaymentMethods,
+  wasCartCaptured
 });
 //# sourceMappingURL=index.cjs.map