@easypayment/medusa-paypal-ui 1.2.8 → 1.3.1

package/src/components/PayPalSmartButtons.tsx

@@ -13,11 +13,12 @@ import {
   showProcessingOverlay,
   hideProcessingOverlay,
 } from "../utils/processing-overlay"
-
-const SPIN_STYLE = `
-@keyframes _pp_spin { to { transform: rotate(360deg) } }
-@keyframes _pp_progress { 0% { transform: translateX(-100%) } 100% { transform: translateX(350%) } }
-`
+import {
+  AnimationStyles,
+  ErrorBanner,
+  LoadingCard,
+  ProcessingOverlayView,
+} from "./internal/ui"
 
 const BUTTON_WIDTH_MAP: Record<string, string> = {
   small: "300px",
@@ -29,19 +30,35 @@ const BUTTON_WIDTH_MAP: Record<string, string> = {
 export function PayPalSmartButtons(props: {
   baseUrl: string
   publishableApiKey?: string
+  /** Forwarded to every API call — see `HttpOptions.credentials`. */
+  credentials?: RequestCredentials
   cartId: string
   config: PayPalConfig
-  onPaid?: (result: Record<string, unknown>) => void
+  onPaid?: (result: Record<string, unknown>) => void | Promise<void>
   onError?: (message: string) => void
 }) {
-  const { baseUrl, publishableApiKey, cartId, config, onPaid, onError } = props
+  const {
+    baseUrl,
+    publishableApiKey,
+    credentials,
+    cartId,
+    config,
+    onPaid,
+    onError,
+  } = props
   const api = useMemo(
-    () => createPayPalStoreApi({ baseUrl, publishableApiKey }),
-    [baseUrl, publishableApiKey]
+    () => createPayPalStoreApi({ baseUrl, publishableApiKey, credentials }),
+    [baseUrl, publishableApiKey, credentials]
   )
 
   const [error, setError] = useState<string | null>(null)
   const [processing, setProcessing] = useState(false)
+  // Synchronous mirror of `processing` — React state updates are async, so a
+  // second click in the same tick would slip past a state-based guard.
+  const processingRef = useRef(false)
+  // True while the shared full-page DOM overlay is mounted, so the component
+  // doesn't also render its own copy on top of it.
+  const [domOverlayUp, setDomOverlayUp] = useState(false)
   const [buttonsReady, setButtonsReady] = useState(false)
   const [loadTimedOut, setLoadTimedOut] = useState(false)
   // Once a capture succeeded, the buyer's money is taken — any later failure
@@ -51,6 +68,23 @@ export function PayPalSmartButtons(props: {
   const [completionPending, setCompletionPending] = useState(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)
   }, [])
@@ -60,7 +94,11 @@ export function PayPalSmartButtons(props: {
   // behind the in-component overlay.
   useEffect(() => {
     const onPageShow = (e: PageTransitionEvent) => {
-      if (e.persisted) setProcessing(false)
+      if (e.persisted) {
+        processingRef.current = false
+        setProcessing(false)
+        setDomOverlayUp(false)
+      }
     }
     window.addEventListener("pageshow", onPageShow)
     return () => window.removeEventListener("pageshow", onPageShow)
@@ -93,15 +131,14 @@ export 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,
+      })
       // The order is finalized — the persisted "captured" flag has served its
       // purpose. Clear it before the consumer callback (which may redirect).
       clearCartCaptured(cartId)
@@ -109,15 +146,24 @@ export function PayPalSmartButtons(props: {
       setCompletionPending(false)
     } catch (e: unknown) {
       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 — 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
@@ -129,188 +175,26 @@ export function PayPalSmartButtons(props: {
 
   return (
     <div style={{ width: containerWidth, position: "relative" }}>
-      <style>{SPIN_STYLE}</style>
+      <AnimationStyles />
 
-      {processing && (
-        <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,
-          }}
-        >
-          <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: 18,
-                fontWeight: 600,
-                color: "#111827",
-                letterSpacing: "-0.01em",
-              }}
-            >
-              Processing your payment
-            </div>
-            <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>
+      {processing && !domOverlayUp && (
+        <ProcessingOverlayView accent="#0070ba" />
       )}
 
-      {showSpinner && (
-        <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,
-          }}
-        >
-          <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 PayPal…
-          </div>
-        </div>
-      )}
+      {showSpinner && <LoadingCard label="Loading PayPal…" />}
 
       {loadTimedOut && !buttonsReady && !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 is not available for this purchase. Please try a different
-            payment method.
-          </span>
-        </div>
+        <ErrorBanner>
+          PayPal is not available for this purchase. Please try a different
+          payment method.
+        </ErrorBanner>
       )}
 
       {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>
+        <ErrorBanner>
+          PayPal failed to load. Please refresh the page or try a different
+          payment method.
+        </ErrorBanner>
       )}
 
       {config.environment === "sandbox" && buttonsReady && (
@@ -337,6 +221,7 @@ export function PayPalSmartButtons(props: {
             stroke="#1e40af"
             strokeWidth="2"
             strokeLinecap="round"
+            aria-hidden="true"
             style={{ flexShrink: 0, marginTop: 1 }}
           >
             <circle cx="12" cy="12" r="10" />
@@ -373,7 +258,11 @@ export function PayPalSmartButtons(props: {
               height: config.button_height,
             }}
             createOrder={async () => {
-              if (processing) throw new Error("Payment already processing")
+              // Ref, not state: a double click lands before React applies the
+              // state update, so only the synchronous ref reliably blocks the
+              // second createOrder (and its duplicate PayPal order).
+              if (processingRef.current)
+                throw new Error("Payment already processing")
               if (capturedRef.current) {
                 // Money was already captured for this cart — retry the order
                 // finalization instead of creating (and charging) a new order.
@@ -383,19 +272,19 @@ export function PayPalSmartButtons(props: {
                 )
               }
               setError(null)
-              setProcessing(true)
+              startProcessing()
               try {
                 const r = await api.createOrder(cartId)
                 return r.id
               } catch (e: unknown) {
-                setProcessing(false)
+                stopProcessing()
                 throw e
               }
             }}
             onApprove={async (data: { orderID?: string }) => {
               try {
-                setProcessing(true)
-                showProcessingOverlay()
+                startProcessing()
+                showOverlay()
                 setError(null)
                 const orderId = String(data?.orderID || "")
                 if (!orderId)
@@ -409,8 +298,7 @@ export function PayPalSmartButtons(props: {
                 markCartCaptured(cartId)
               } catch (e: unknown) {
                 if (isNextRouterError(e)) return
-                hideProcessingOverlay()
-                setProcessing(false)
+                stopProcessing()
                 const msg =
                   e instanceof Error ? e.message : "Payment capture failed"
                 setError(msg)
@@ -422,12 +310,10 @@ export function PayPalSmartButtons(props: {
               await finalizeCapturedPayment()
             }}
             onCancel={() => {
-              hideProcessingOverlay()
-              setProcessing(false)
+              stopProcessing()
             }}
             onError={(err: Error | { message?: string }) => {
-              hideProcessingOverlay()
-              setProcessing(false)
+              stopProcessing()
               const msg =
                 err instanceof Error
                   ? err.message
@@ -464,25 +350,7 @@ export function PayPalSmartButtons(props: {
       )}
 
       {error ? (
-        <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,
-          }}
-        >
-          <span style={{ flexShrink: 0, fontSize: 15 }}>⚠️</span>
-          <span>{error}</span>
-        </div>
+        <ErrorBanner style={{ marginTop: 10 }}>{error}</ErrorBanner>
       ) : null}
     </div>
   )

package/src/components/internal/ui.tsx

@@ -0,0 +1,221 @@
+"use client"
+
+import React from "react"
+
+/**
+ * Shared presentational pieces for the payment components. One definition of
+ * the keyframes/animation CSS (previously copied into four files) and the
+ * overlay/spinner/error markup used by both PayPalSmartButtons and
+ * PayPalAdvancedCard.
+ *
+ * Animations are applied through class names so a single
+ * `prefers-reduced-motion` rule can disable them for buyers who ask for less
+ * motion, without a global selector leaking into the host page.
+ */
+export const 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 }
+}
+`
+
+export function AnimationStyles() {
+  return <style>{ANIMATION_CSS}</style>
+}
+
+export function ShieldIcon({
+  color,
+  size = 24,
+  style,
+}: {
+  color: string
+  size?: number
+  style?: React.CSSProperties
+}) {
+  return (
+    <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 }}
+    >
+      <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+    </svg>
+  )
+}
+
+/**
+ * Full-screen "Processing your payment" overlay. role="status" makes screen
+ * readers announce the visible text — deliberately no aria-label, which would
+ * override that text.
+ */
+export function ProcessingOverlayView({ accent }: { accent: string }) {
+  return (
+    <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,
+      }}
+    >
+      <div style={{ position: "relative", width: 56, height: 56 }}>
+        <div
+          style={{
+            position: "absolute",
+            inset: 0,
+            borderRadius: "50%",
+            border: "3px solid #e5e7eb",
+          }}
+        />
+        <div
+          className="_pp-spin"
+          style={{
+            position: "absolute",
+            inset: 0,
+            borderRadius: "50%",
+            border: "3px solid transparent",
+            borderTopColor: accent,
+          }}
+        />
+        <ShieldIcon
+          color={accent}
+          style={{
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+          }}
+        />
+      </div>
+      <div style={{ textAlign: "center" }}>
+        <div
+          style={{
+            fontSize: 18,
+            fontWeight: 600,
+            color: "#111827",
+            letterSpacing: "-0.01em",
+          }}
+        >
+          Processing your payment
+        </div>
+        <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,
+        }}
+        aria-hidden="true"
+      >
+        <div
+          className="_pp-progress"
+          style={{
+            width: "40%",
+            height: "100%",
+            background: `linear-gradient(90deg, ${accent}, #003087)`,
+            borderRadius: 3,
+          }}
+        />
+      </div>
+    </div>
+  )
+}
+
+/** Small inline loading card ("Loading PayPal…", "Loading card fields…"). */
+export function LoadingCard({ label }: { label: string }) {
+  return (
+    <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,
+      }}
+    >
+      <div
+        className="_pp-spin-sm"
+        aria-hidden="true"
+        style={{
+          width: 22,
+          height: 22,
+          borderRadius: "50%",
+          border: "2.5px solid #e5e7eb",
+          borderTopColor: "#0070ba",
+          flexShrink: 0,
+        }}
+      />
+      <div style={{ fontSize: 13, fontWeight: 500, color: "#6b7280" }}>
+        {label}
+      </div>
+    </div>
+  )
+}
+
+/** Red role="alert" banner with a decorative warning icon. */
+export function ErrorBanner({
+  children,
+  style,
+}: {
+  children: React.ReactNode
+  style?: React.CSSProperties
+}) {
+  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,
+        ...style,
+      }}
+    >
+      <span aria-hidden="true" style={{ flexShrink: 0, fontSize: 15 }}>
+        ⚠️
+      </span>
+      <span>{children}</span>
+    </div>
+  )
+}