@easypayment/medusa-paypal-ui 1.0.51 → 1.0.52

package/src/client/paypal.ts

@@ -5,23 +5,13 @@ export async function markPaymentComplete(
   baseUrl: string,
   cartId: string,
   publishableApiKey?: string
-): Promise<Record<string, any>> {
-  try {
-    const resp = await fetch(`${baseUrl.replace(/\/$/, "")}/store/paypal-complete`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        ...(publishableApiKey ? { "x-publishable-api-key": publishableApiKey } : {}),
-      },
-      body: JSON.stringify({ cart_id: cartId }),
-      credentials: "include",
-    })
-    const data = await resp.json().catch(() => ({}))
-    return data || {}
-  } catch (e) {
-    console.warn("[PayPal] paypal-complete call failed:", e)
-    return {}
-  }
+): Promise<Record<string, unknown>> {
+  const http = createHttpClient({ baseUrl, publishableApiKey })
+  return http.request<Record<string, unknown>>(`/store/paypal-complete`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ cart_id: cartId }),
+  })
 }
 
 export function createPayPalStoreApi(opts: HttpOptions) {

package/src/components/PayPalAdvancedCard.tsx

@@ -1,18 +1,24 @@
 "use client"
 
-import React, { useMemo, useState } from "react"
+import React, { useMemo, useRef, useState } from "react"
 import {
   PayPalCardFieldsProvider,
   PayPalNumberField,
   PayPalExpiryField,
   PayPalCVVField,
   usePayPalCardFields,
+  usePayPalScriptReducer,
 } from "@paypal/react-paypal-js"
 
 import { createPayPalStoreApi, markPaymentComplete } from "../client/paypal"
 import type { PayPalConfig } from "../client/types"
+import { isNextRouterError } from "../utils/next-errors"
+import { showProcessingOverlay, hideProcessingOverlay } from "../utils/processing-overlay"
 
-const SPIN_STYLE = `@keyframes _pp_spin { to { transform: rotate(360deg) } }`
+const SPIN_STYLE = `
+@keyframes _pp_spin { to { transform: rotate(360deg) } }
+@keyframes _pp_progress { 0% { transform: translateX(-100%) } 100% { transform: translateX(350%) } }
+`
 
 const cardStyle = {
   input: {
@@ -74,9 +80,14 @@ function SubmitButton({
     <button
       type="button"
       disabled={isDisabled}
+      aria-busy={disabled}
       onClick={() => {
         onSubmit()
-        cardFieldsForm?.submit()
+        try {
+          cardFieldsForm?.submit()
+        } catch {
+          // submit() error is handled by PayPalCardFieldsProvider onError
+        }
       }}
       style={{
         width: "100%",
@@ -137,9 +148,37 @@ export function PayPalAdvancedCard(props: {
 
   const [error, setError] = useState<string | null>(null)
   const [submitting, setSubmitting] = useState(false)
+  const submittingRef = useRef(false)
+  const [{ isPending, isResolved, isRejected }] = usePayPalScriptReducer()
 
   if (!config.currency_supported) return null
 
+  if (isRejected) {
+    return (
+      <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,
+        }}
+      >
+        <span style={{ flexShrink: 0, fontSize: 15 }}>⚠️</span>
+        <span>
+          PayPal failed to load. Please refresh the page or try a different
+          payment method.
+        </span>
+      </div>
+    )
+  }
+
   if (!config.client_token) {
     return (
       <div
@@ -159,50 +198,138 @@ export function PayPalAdvancedCard(props: {
 
   const isSandbox = config.environment === "sandbox"
 
+  if (isPending) {
+    return (
+      <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,
+        }}
+      >
+        <style>{SPIN_STYLE}</style>
+        <div
+          style={{
+            width: 22,
+            height: 22,
+            borderRadius: "50%",
+            border: "2.5px solid #e5e7eb",
+            borderTopColor: "#0070ba",
+            animation: "_pp_spin .7s linear infinite",
+            flexShrink: 0,
+          }}
+        />
+        <div style={{ fontSize: 13, fontWeight: 500, color: "#6b7280" }}>
+          Loading card fields…
+        </div>
+      </div>
+    )
+  }
+
+  if (!isResolved) return null
+
   return (
     <div style={{ position: "relative" }}>
       <style>{SPIN_STYLE}</style>
 
       {submitting && (
         <div
+          role="status"
+          aria-label="Processing payment"
           style={{
-            position: "absolute",
+            position: "fixed",
             inset: 0,
-            zIndex: 20,
-            background: "rgba(255,255,255,0.92)",
-            borderRadius: 12,
+            zIndex: 9999,
+            background: "rgba(255,255,255,0.96)",
             display: "flex",
             flexDirection: "column",
             alignItems: "center",
             justifyContent: "center",
-            gap: 14,
-            minHeight: 180,
+            gap: 20,
           }}
         >
-          <div
-            style={{
-              width: 36,
-              height: 36,
-              borderRadius: "50%",
-              border: "3px solid #dbeafe",
-              borderTopColor: "#2563eb",
-              animation: "_pp_spin .75s linear infinite",
-            }}
-          />
+          <div style={{ position: "relative", width: 56, height: 56 }}>
+            <div
+              style={{
+                position: "absolute",
+                inset: 0,
+                borderRadius: "50%",
+                border: "3px solid #e5e7eb",
+              }}
+            />
+            <div
+              style={{
+                position: "absolute",
+                inset: 0,
+                borderRadius: "50%",
+                border: "3px solid transparent",
+                borderTopColor: "#2563eb",
+                animation: "_pp_spin .8s linear infinite",
+              }}
+            />
+            <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,
+              }}
+            >
+              <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+            </svg>
+          </div>
           <div style={{ textAlign: "center" }}>
-            <div style={{ fontSize: 15, fontWeight: 600, color: "#111827" }}>
-              Processing your payment…
+            <div style={{ fontSize: 18, fontWeight: 600, color: "#111827", letterSpacing: "-0.01em" }}>
+              Processing your payment
             </div>
-            <div style={{ fontSize: 13, color: "#6b7280", marginTop: 4 }}>
-              Please do not close or refresh this page
+            <div style={{ fontSize: 14, color: "#6b7280", marginTop: 6, lineHeight: 1.5 }}>
+              This may take a few moments. Please do not close<br />
+              or refresh this page.
             </div>
           </div>
+          <div
+            style={{
+              width: 200,
+              height: 3,
+              background: "#e5e7eb",
+              borderRadius: 3,
+              overflow: "hidden",
+              marginTop: 4,
+            }}
+          >
+            <div
+              style={{
+                width: "40%",
+                height: "100%",
+                background: "linear-gradient(90deg, #2563eb, #1d4ed8)",
+                borderRadius: 3,
+                animation: "_pp_progress 1.5s ease-in-out infinite",
+              }}
+            />
+          </div>
         </div>
       )}
 
       <PayPalCardFieldsProvider
         style={cardStyle}
         createOrder={async () => {
+          if (submittingRef.current) throw new Error("Payment already processing")
           setError(null)
           const r = await api.createOrder(cartId, true)
           return r.id
@@ -210,27 +337,34 @@ export function PayPalAdvancedCard(props: {
         onApprove={async (data: { orderID?: string }) => {
           try {
             setError(null)
+            showProcessingOverlay()
             const orderId = String(data?.orderID || "")
             const result = await api.captureOrder(cartId, orderId)
 
             const completeResult = await markPaymentComplete(baseUrl, cartId, publishableApiKey)
 
-            onPaid?.({ ...result, ...completeResult })
+            await onPaid?.({ ...result, ...completeResult })
           } catch (e: unknown) {
+            if (isNextRouterError(e)) throw e
+            hideProcessingOverlay()
+            submittingRef.current = false
+            setSubmitting(false)
             const msg = e instanceof Error ? e.message : "Card payment failed"
             setError(msg)
             onError?.(msg)
-          } finally {
-            setSubmitting(false)
           }
         }}
         onCancel={() => {
+          hideProcessingOverlay()
+          submittingRef.current = false
           setSubmitting(false)
         }}
         onError={(e: Error | { message?: string }) => {
           const msg = e instanceof Error ? e.message : e?.message || "CardFields error"
           setError(msg)
           onError?.(msg)
+          hideProcessingOverlay()
+          submittingRef.current = false
           setSubmitting(false)
         }}
       >
@@ -318,13 +452,17 @@ export function PayPalAdvancedCard(props: {
             disabled={submitting}
             label={submitting ? "Processing…" : "Pay by Card"}
             onSubmit={() => {
+              if (submittingRef.current) return
+              submittingRef.current = true
               setError(null)
               setSubmitting(true)
+              showProcessingOverlay()
             }}
           />
 
           {error && (
             <div
+              role="alert"
               style={{
                 display: "flex",
                 alignItems: "flex-start",

package/src/components/PayPalCurrencyNotice.tsx

@@ -7,7 +7,7 @@ export function PayPalCurrencyNotice({ config }: { config: PayPalConfig }) {
   if (config.currency_supported) return null
 
   return (
-    <div style={{ padding: 12, border: "1px solid #ddd", borderRadius: 10 }}>
+    <div role="alert" style={{ padding: 12, border: "1px solid #ddd", borderRadius: 10 }}>
       <div style={{ fontWeight: 600, marginBottom: 6 }}>PayPal currency issue</div>
       <ul style={{ margin: 0, paddingLeft: 18 }}>
         {(config.currency_errors || []).map((e) => (

package/src/components/PayPalPaymentSection.tsx

@@ -25,6 +25,8 @@ const SPIN_STYLE = `@keyframes _pp_section_spin { to { transform: rotate(360deg)
 function SessionInitCard() {
   return (
     <div
+      role="status"
+      aria-label="Setting up payment"
       style={{
         display: "flex",
         alignItems: "center",
@@ -58,6 +60,8 @@ function SessionInitCard() {
 function ConfigLoadingCard() {
   return (
     <div
+      role="status"
+      aria-label="Connecting to PayPal"
       style={{
         display: "flex",
         alignItems: "center",
@@ -95,6 +99,7 @@ function ConfigLoadingCard() {
 function ErrorCard({ message }: { message: string }) {
   return (
     <div
+      role="alert"
       style={{
         padding: "12px 16px",
         background: "#fef2f2",
@@ -140,9 +145,9 @@ export function PayPalPaymentSection({
   })
 
   const handlePaid = useCallback(
-    (captureResult: unknown) => {
+    async (captureResult: unknown) => {
       onPaid?.(captureResult)
-      onSuccess?.(cartId)
+      await onSuccess?.(cartId)
     },
     [cartId, onPaid, onSuccess]
   )

package/src/components/PayPalProvider.tsx

@@ -25,7 +25,7 @@ export function PayPalProvider(props: {
       "disable-funding": disableFunding,
       "data-partner-attribution-id": BN_CODE,
     }
-  }, [config, intent, disableFunding])
+  }, [config.client_id, config.currency, config.client_token, intent, disableFunding])
 
   return (
     <PayPalScriptProvider

package/src/components/PayPalSmartButtons.tsx

@@ -1,10 +1,15 @@
 "use client"
-import React, { useMemo, useState } from "react"
+import React, { useCallback, useMemo, useState } from "react"
 import { PayPalButtons, usePayPalScriptReducer } from "@paypal/react-paypal-js"
 import { createPayPalStoreApi, markPaymentComplete } from "../client/paypal"
 import type { PayPalConfig } from "../client/types"
+import { isNextRouterError } from "../utils/next-errors"
+import { showProcessingOverlay, hideProcessingOverlay } from "../utils/processing-overlay"
 
-const SPIN_STYLE = `@keyframes _pp_spin { to { transform: rotate(360deg) } }`
+const SPIN_STYLE = `
+@keyframes _pp_spin { to { transform: rotate(360deg) } }
+@keyframes _pp_progress { 0% { transform: translateX(-100%) } 100% { transform: translateX(350%) } }
+`
 
 const BUTTON_WIDTH_MAP: Record<string, string> = {
   small: "300px",
@@ -29,7 +34,14 @@ export function PayPalSmartButtons(props: {
 
   const [error, setError] = useState<string | null>(null)
   const [processing, setProcessing] = useState(false)
-  const [{ isPending, isResolved }] = usePayPalScriptReducer()
+  const [buttonsReady, setButtonsReady] = useState(false)
+  const [{ isPending, isResolved, isRejected }] = usePayPalScriptReducer()
+
+  const handleInit = useCallback(() => {
+    setButtonsReady(true)
+  }, [])
+
+  const showSpinner = isPending || (isResolved && !buttonsReady)
 
   if (!config.currency_supported) return null
 
@@ -41,43 +53,94 @@ export function PayPalSmartButtons(props: {
 
       {processing && (
         <div
+          role="status"
+          aria-label="Processing payment"
           style={{
-            position: "absolute",
+            position: "fixed",
             inset: 0,
-            zIndex: 10,
-            background: "rgba(255,255,255,0.90)",
-            borderRadius: 8,
+            zIndex: 9999,
+            background: "rgba(255,255,255,0.96)",
             display: "flex",
             flexDirection: "column",
             alignItems: "center",
             justifyContent: "center",
-            gap: 10,
-            minHeight: 60,
+            gap: 20,
           }}
         >
-          <div
-            style={{
-              width: 28,
-              height: 28,
-              borderRadius: "50%",
-              border: "2.5px solid #e5e7eb",
-              borderTopColor: "#0070ba",
-              animation: "_pp_spin .7s linear infinite",
-            }}
-          />
+          <div style={{ position: "relative", width: 56, height: 56 }}>
+            <div
+              style={{
+                position: "absolute",
+                inset: 0,
+                borderRadius: "50%",
+                border: "3px solid #e5e7eb",
+              }}
+            />
+            <div
+              style={{
+                position: "absolute",
+                inset: 0,
+                borderRadius: "50%",
+                border: "3px solid transparent",
+                borderTopColor: "#0070ba",
+                animation: "_pp_spin .8s linear infinite",
+              }}
+            />
+            <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,
+              }}
+            >
+              <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+            </svg>
+          </div>
           <div style={{ textAlign: "center" }}>
-            <div style={{ fontSize: 13, color: "#374151", fontWeight: 500 }}>
-              Processing your payment…
+            <div style={{ fontSize: 18, fontWeight: 600, color: "#111827", letterSpacing: "-0.01em" }}>
+              Processing your payment
             </div>
-            <div style={{ fontSize: 12, color: "#6b7280", marginTop: 4 }}>
-              Please do not close or refresh this page
+            <div style={{ fontSize: 14, color: "#6b7280", marginTop: 6, lineHeight: 1.5 }}>
+              This may take a few moments. Please do not close<br />
+              or refresh this page.
             </div>
           </div>
+          <div
+            style={{
+              width: 200,
+              height: 3,
+              background: "#e5e7eb",
+              borderRadius: 3,
+              overflow: "hidden",
+              marginTop: 4,
+            }}
+          >
+            <div
+              style={{
+                width: "40%",
+                height: "100%",
+                background: "linear-gradient(90deg, #0070ba, #003087)",
+                borderRadius: 3,
+                animation: "_pp_progress 1.5s ease-in-out infinite",
+              }}
+            />
+          </div>
         </div>
       )}
 
-      {isPending && (
+      {showSpinner && (
         <div
+          role="status"
+          aria-label="Loading PayPal"
           style={{
             display: "flex",
             alignItems: "center",
@@ -107,7 +170,31 @@ export function PayPalSmartButtons(props: {
         </div>
       )}
 
-      {config.environment === "sandbox" && isResolved && (
+      {isRejected && (
+        <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,
+          }}
+        >
+          <span style={{ flexShrink: 0, fontSize: 15 }}>⚠️</span>
+          <span>
+            PayPal failed to load. Please refresh the page or try a different
+            payment method.
+          </span>
+        </div>
+      )}
+
+      {config.environment === "sandbox" && buttonsReady && (
         <div
           style={{
             display: "flex",
@@ -144,8 +231,10 @@ export function PayPalSmartButtons(props: {
       )}
 
       {isResolved && (
+        <div style={buttonsReady ? undefined : { position: "absolute", left: -9999, opacity: 0, pointerEvents: "none" }}>
         <PayPalButtons
           forceReRender={[config.currency, config.intent, cartId]}
+          onInit={handleInit}
           style={{
             layout: "vertical",
             color: config.button_color,
@@ -154,42 +243,56 @@ export function PayPalSmartButtons(props: {
             height: config.button_height,
           }}
           createOrder={async () => {
+            if (processing) throw new Error("Payment already processing")
             setError(null)
-            const r = await api.createOrder(cartId)
-            return r.id
+            setProcessing(true)
+            try {
+              const r = await api.createOrder(cartId)
+              return r.id
+            } catch (e: unknown) {
+              setProcessing(false)
+              throw e
+            }
           }}
           onApprove={async (data: { orderID?: string }) => {
             try {
               setProcessing(true)
+              showProcessingOverlay()
               setError(null)
               const orderId = String(data?.orderID || "")
+              if (!orderId) throw new Error("PayPal order ID is missing from approval response")
               const result = await api.captureOrder(cartId, orderId)
 
               const completeResult = await markPaymentComplete(baseUrl, cartId, publishableApiKey)
 
-              onPaid?.({ ...result, ...completeResult })
+              await onPaid?.({ ...result, ...completeResult })
             } catch (e: unknown) {
+              if (isNextRouterError(e)) throw e
+              hideProcessingOverlay()
+              setProcessing(false)
               const msg = e instanceof Error ? e.message : "Payment capture failed"
               setError(msg)
               onError?.(msg)
-            } finally {
-              setProcessing(false)
             }
           }}
           onCancel={() => {
+            hideProcessingOverlay()
             setProcessing(false)
           }}
           onError={(err: Error | { message?: string }) => {
+            hideProcessingOverlay()
             setProcessing(false)
             const msg = err instanceof Error ? err.message : err?.message || "PayPal error"
             setError(msg)
             onError?.(msg)
           }}
         />
+        </div>
       )}
 
       {error ? (
         <div
+          role="alert"
           style={{
             marginTop: 10,
             display: "flex",

package/src/hooks/usePayPalConfig.ts

@@ -11,9 +11,18 @@ type Args = {
   enabled?: boolean
 }
 
+const MAX_CACHE_ENTRIES = 50
 const _cache = new Map<string, { config: PayPalConfig; at: number }>()
 const CACHE_TTL = 5 * 60 * 1000
 
+function cacheSet(key: string, value: { config: PayPalConfig; at: number }) {
+  if (_cache.size >= MAX_CACHE_ENTRIES) {
+    const oldest = _cache.keys().next().value
+    if (oldest !== undefined) _cache.delete(oldest)
+  }
+  _cache.set(key, value)
+}
+
 function cacheKey(baseUrl: string, cartId?: string) {
   return `${baseUrl}::${cartId ?? ""}`
 }
@@ -66,12 +75,12 @@ export function usePayPalConfig({
       try {
         const cfg = await api.getConfig(cartId, controller.signal)
         if (!mounted || id !== fetchIdRef.current) return
-        _cache.set(k, { config: cfg, at: Date.now() })
+        cacheSet(k, { config: cfg, at: Date.now() })
         setConfig(cfg)
-      } catch (e: any) {
-        if (e?.name === "AbortError") return
+      } catch (e: unknown) {
+        if (e instanceof Error && e.name === "AbortError") return
         if (!mounted || id !== fetchIdRef.current) return
-        setError(e?.message || "Failed to load PayPal config")
+        setError(e instanceof Error ? e.message : "Failed to load PayPal config")
       } finally {
         if (mounted && id === fetchIdRef.current) setLoading(false)
       }