@easypayment/medusa-paypal-ui 1.2.2 → 1.2.3

package/src/components/PayPalAdvancedCard.tsx

@@ -1,611 +1,646 @@
-"use client"
-
-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 {
-  clearCartCaptured,
-  markCartCaptured,
-  wasCartCaptured,
-} from "../utils/captured-state"
-import { isNextRouterError } from "../utils/next-errors"
-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%) } }
-`
-
-const cardStyle = {
-  input: {
-    "font-size": "15px",
-    "font-family": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
-    "font-weight": "400",
-    color: "#111827",
-    padding: "0 14px",
-    height: "42px",
-    "border-radius": "8px",
-    border: "1px solid #d1d5db",
-    background: "#ffffff",
-    "box-shadow": "none",
-    transition: "border-color 0.15s ease",
-  },
-  "::placeholder": {
-    color: "#9ca3af",
-  },
-  ".invalid": {
-    color: "#dc2626",
-    border: "1px solid #fca5a5",
-    background: "#fff7f7",
-    "box-shadow": "none",
-  },
-  ".valid": {
-    color: "#111827",
-    border: "1px solid #d1d5db",
-    "box-shadow": "none",
-  },
-  "input:focus": {
-    outline: "none",
-    border: "1px solid #2563eb",
-    "box-shadow": "0 0 0 3px rgba(37,99,235,0.12)",
-  },
-}
-
-const labelStyle: React.CSSProperties = {
-  display: "block",
-  fontSize: 13,
-  fontWeight: 500,
-  color: "#374151",
-  marginBottom: 6,
-  letterSpacing: "0.01em",
-}
-
-function SubmitButton({
-  disabled,
-  label,
-  onSubmit,
-  onSubmitError,
-}: {
-  disabled: boolean
-  label: string
-  onSubmit: () => void
-  onSubmitError: (message: string) => void
-}) {
-  const { cardFieldsForm } = usePayPalCardFields()
-  const isDisabled = disabled || !cardFieldsForm
-
-  return (
-    <button
-      type="button"
-      disabled={isDisabled}
-      aria-busy={disabled}
-      onClick={() => {
-        onSubmit()
-        // submit() returns a promise and its rejection is NOT routed to the
-        // provider's onError — PayPal's contract is that the caller catches
-        // it. A sync try/catch here would miss it entirely, leaving the buyer
-        // stuck under the full-screen processing overlay forever (e.g. on a
-        // card-field validation error).
-        Promise.resolve(cardFieldsForm?.submit()).catch((e: unknown) => {
-          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%",
-        height: 48,
-        padding: "0 20px",
-        borderRadius: 8,
-        border: "none",
-        background: isDisabled
-          ? "#e5e7eb"
-          : "linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%)",
-        color: isDisabled ? "#9ca3af" : "#ffffff",
-        fontSize: 15,
-        fontWeight: 600,
-        fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
-        cursor: isDisabled ? "not-allowed" : "pointer",
-        letterSpacing: "0.01em",
-        boxShadow: isDisabled
-          ? "none"
-          : "0 1px 3px rgba(37,99,235,0.3), 0 1px 2px rgba(0,0,0,0.06)",
-        transition: "all 0.15s ease",
-      }}
-      onMouseEnter={(e) => {
-        if (!isDisabled) {
-          ;(e.target as HTMLButtonElement).style.background =
-            "linear-gradient(180deg, #1d4ed8 0%, #1e40af 100%)"
-          ;(e.target as HTMLButtonElement).style.boxShadow =
-            "0 4px 6px rgba(37,99,235,0.35), 0 2px 4px rgba(0,0,0,0.06)"
-        }
-      }}
-      onMouseLeave={(e) => {
-        if (!isDisabled) {
-          ;(e.target as HTMLButtonElement).style.background =
-            "linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%)"
-          ;(e.target as HTMLButtonElement).style.boxShadow =
-            "0 1px 3px rgba(37,99,235,0.3), 0 1px 2px rgba(0,0,0,0.06)"
-        }
-      }}
-    >
-      {label}
-    </button>
-  )
-}
-
-export function PayPalAdvancedCard(props: {
-  baseUrl: string
-  publishableApiKey?: string
-  cartId: string
-  config: PayPalConfig
-  onPaid?: (result: Record<string, unknown>) => void
-  onError?: (message: string) => void
-}) {
-  const { baseUrl, publishableApiKey, cartId, config, onPaid, onError } = props
-
-  const api = useMemo(
-    () => createPayPalStoreApi({ baseUrl, publishableApiKey }),
-    [baseUrl, publishableApiKey]
-  )
-
-  const [error, setError] = useState<string | null>(null)
-  const [submitting, setSubmitting] = useState(false)
-  const submittingRef = useRef(false)
-  const creatingOrderRef = useRef(false)
-  // Once a capture succeeded the buyer's money is taken: any later failure
-  // must retry ONLY the order finalization, never a fresh order/capture.
-  const capturedRef = useRef<Record<string, unknown> | null>(null)
-  const [completionPending, setCompletionPending] = useState(false)
-  const [{ isPending, isResolved, isRejected }] = usePayPalScriptReducer()
-
-  const resetSubmitState = React.useCallback(() => {
-    hideProcessingOverlay()
-    creatingOrderRef.current = false
-    submittingRef.current = false
-    setSubmitting(false)
-  }, [])
-
-  // bfcache restore (Back button after a redirect) revives this page with the
-  // old React state — clear the submitting flag so the buyer isn't stuck
-  // behind the in-component overlay.
-  React.useEffect(() => {
-    const onPageShow = (e: PageTransitionEvent) => {
-      if (e.persisted) {
-        creatingOrderRef.current = false
-        submittingRef.current = false
-        setSubmitting(false)
-      }
-    }
-    window.addEventListener("pageshow", onPageShow)
-    return () => window.removeEventListener("pageshow", onPageShow)
-  }, [])
-
-  // A reload/crash between capture and finalization loses the in-memory
-  // capturedRef — restore it from the persisted per-cart flag so the buyer
-  // gets the finalize-only Retry button instead of card fields that would
-  // charge (or confusingly fail) again.
-  React.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 — do not pay again."
-    )
-  }, [cartId])
-
-  const finalizeCapturedPayment = React.useCallback(async () => {
-    const captured = capturedRef.current
-    if (!captured) return
-    setSubmitting(true)
-    showProcessingOverlay()
-    setError(null)
-    try {
-      const completeResult = await markPaymentComplete(baseUrl, cartId, publishableApiKey)
-      // The order is finalized — the persisted "captured" flag has served its
-      // purpose. Clear it before the consumer callback (which may redirect).
-      clearCartCaptured(cartId)
-      await onPaid?.({ ...captured, ...completeResult })
-      setCompletionPending(false)
-    } catch (e: unknown) {
-      if (isNextRouterError(e)) return
-      resetSubmitState()
-      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, resetSubmitState])
-
-  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
-        style={{
-          padding: "12px 16px",
-          background: "#fefce8",
-          border: "1px solid #fde68a",
-          borderRadius: 8,
-          fontSize: 13,
-          color: "#92400e",
-        }}
-      >
-        Card fields unavailable — missing client token from backend.
-      </div>
-    )
-  }
-
-  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: "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: "#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: 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, #2563eb, #1d4ed8)",
-                borderRadius: 3,
-                animation: "_pp_progress 1.5s ease-in-out infinite",
-              }}
-            />
-          </div>
-        </div>
-      )}
-
-      <PayPalCardFieldsProvider
-        style={cardStyle}
-        createOrder={async () => {
-          if (creatingOrderRef.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.
-            void finalizeCapturedPayment()
-            throw new Error("Your payment was already received — finalizing your order.")
-          }
-          creatingOrderRef.current = true
-          try {
-            setError(null)
-            const r = await api.createOrder(cartId, true)
-            return r.id
-          } catch (e) {
-            creatingOrderRef.current = false
-            throw e
-          }
-        }}
-        onApprove={async (data: { orderID?: string }) => {
-          try {
-            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)
-            capturedRef.current = (result || {}) as Record<string, unknown>
-            // Persist across reloads: from here on, only finalization may
-            // ever be retried for this cart — never a fresh payment.
-            markCartCaptured(cartId)
-          } catch (e: unknown) {
-            if (isNextRouterError(e)) return
-            resetSubmitState()
-            const msg = e instanceof Error ? e.message : "Card payment failed"
-            setError(msg)
-            onError?.(msg)
-            return
-          }
-          // Past this point the buyer has been charged: completion failures
-          // surface a finalize-only Retry, never a fresh payment.
-          await finalizeCapturedPayment()
-        }}
-        onCancel={() => {
-          hideProcessingOverlay()
-          creatingOrderRef.current = false
-          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()
-          creatingOrderRef.current = false
-          submittingRef.current = false
-          setSubmitting(false)
-        }}
-      >
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "column",
-            gap: 16,
-            width: "100%",
-          }}
-        >
-          {isSandbox && (
-            <div
-              style={{
-                display: "flex",
-                alignItems: "flex-start",
-                gap: 10,
-                padding: "10px 14px",
-                background: "#eff6ff",
-                border: "1px solid #bfdbfe",
-                borderRadius: 8,
-                fontSize: 13,
-                color: "#1e40af",
-                lineHeight: 1.55,
-              }}
-            >
-              <span style={{ fontSize: 15, flexShrink: 0, marginTop: 1 }}>🧪</span>
-              <span>
-                Sandbox mode — use test card{" "}
-                <strong style={{ fontFamily: "monospace", letterSpacing: "0.05em" }}>
-                  4111 1111 1111 1111
-                </strong>{" "}
-                with any future date and any CVV.
-              </span>
-            </div>
-          )}
-
-          <div>
-            <label style={labelStyle}>Card number</label>
-            <PayPalNumberField />
-          </div>
-
-          <div
-            style={{
-              display: "grid",
-              gridTemplateColumns: "1fr 1fr",
-              gap: 16,
-            }}
-          >
-            <div>
-              <label style={labelStyle}>Expiration date</label>
-              <PayPalExpiryField />
-            </div>
-            <div>
-              <label style={labelStyle}>Security code</label>
-              <PayPalCVVField />
-            </div>
-          </div>
-
-          <div
-            style={{
-              display: "flex",
-              alignItems: "center",
-              gap: 6,
-              fontSize: 12,
-              color: "#6b7280",
-            }}
-          >
-            <svg
-              width="14"
-              height="14"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="#10b981"
-              strokeWidth="2.5"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            >
-              <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
-            </svg>
-            <span>Your payment is secured with 256-bit SSL encryption</span>
-          </div>
-
-          {completionPending ? (
-            <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,
-              }}
-            >
-              Retry — finish placing my order
-            </button>
-          ) : (
-            <SubmitButton
-              disabled={submitting}
-              label={submitting ? "Processing…" : "Pay by Card"}
-              onSubmit={() => {
-                if (submittingRef.current) return
-                submittingRef.current = true
-                setError(null)
-                setSubmitting(true)
-                showProcessingOverlay()
-              }}
-              onSubmitError={(msg) => {
-                resetSubmitState()
-                setError(msg)
-                onError?.(msg)
-              }}
-            />
-          )}
-
-          {error && (
-            <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,
-              }}
-            >
-              <span style={{ flexShrink: 0, marginTop: 1 }}>⚠️</span>
-              <span>{error}</span>
-            </div>
-          )}
-        </div>
-      </PayPalCardFieldsProvider>
-    </div>
-  )
-}
+"use client"
+
+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 {
+  clearCartCaptured,
+  markCartCaptured,
+  wasCartCaptured,
+} from "../utils/captured-state"
+import { isNextRouterError } from "../utils/next-errors"
+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%) } }
+`
+
+const cardStyle = {
+  input: {
+    "font-size": "15px",
+    "font-family":
+      "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+    "font-weight": "400",
+    color: "#111827",
+    padding: "0 14px",
+    height: "42px",
+    "border-radius": "8px",
+    border: "1px solid #d1d5db",
+    background: "#ffffff",
+    "box-shadow": "none",
+    transition: "border-color 0.15s ease",
+  },
+  "::placeholder": {
+    color: "#9ca3af",
+  },
+  ".invalid": {
+    color: "#dc2626",
+    border: "1px solid #fca5a5",
+    background: "#fff7f7",
+    "box-shadow": "none",
+  },
+  ".valid": {
+    color: "#111827",
+    border: "1px solid #d1d5db",
+    "box-shadow": "none",
+  },
+  "input:focus": {
+    outline: "none",
+    border: "1px solid #2563eb",
+    "box-shadow": "0 0 0 3px rgba(37,99,235,0.12)",
+  },
+}
+
+const labelStyle: React.CSSProperties = {
+  display: "block",
+  fontSize: 13,
+  fontWeight: 500,
+  color: "#374151",
+  marginBottom: 6,
+  letterSpacing: "0.01em",
+}
+
+function SubmitButton({
+  disabled,
+  label,
+  onSubmit,
+  onSubmitError,
+}: {
+  disabled: boolean
+  label: string
+  onSubmit: () => void
+  onSubmitError: (message: string) => void
+}) {
+  const { cardFieldsForm } = usePayPalCardFields()
+  const isDisabled = disabled || !cardFieldsForm
+
+  return (
+    <button
+      type="button"
+      disabled={isDisabled}
+      aria-busy={disabled}
+      onClick={() => {
+        onSubmit()
+        // submit() returns a promise and its rejection is NOT routed to the
+        // provider's onError — PayPal's contract is that the caller catches
+        // it. A sync try/catch here would miss it entirely, leaving the buyer
+        // stuck under the full-screen processing overlay forever (e.g. on a
+        // card-field validation error).
+        Promise.resolve(cardFieldsForm?.submit()).catch((e: unknown) => {
+          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%",
+        height: 48,
+        padding: "0 20px",
+        borderRadius: 8,
+        border: "none",
+        background: isDisabled
+          ? "#e5e7eb"
+          : "linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%)",
+        color: isDisabled ? "#9ca3af" : "#ffffff",
+        fontSize: 15,
+        fontWeight: 600,
+        fontFamily:
+          "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+        cursor: isDisabled ? "not-allowed" : "pointer",
+        letterSpacing: "0.01em",
+        boxShadow: isDisabled
+          ? "none"
+          : "0 1px 3px rgba(37,99,235,0.3), 0 1px 2px rgba(0,0,0,0.06)",
+        transition: "all 0.15s ease",
+      }}
+      onMouseEnter={(e) => {
+        if (!isDisabled) {
+          ;(e.target as HTMLButtonElement).style.background =
+            "linear-gradient(180deg, #1d4ed8 0%, #1e40af 100%)"
+          ;(e.target as HTMLButtonElement).style.boxShadow =
+            "0 4px 6px rgba(37,99,235,0.35), 0 2px 4px rgba(0,0,0,0.06)"
+        }
+      }}
+      onMouseLeave={(e) => {
+        if (!isDisabled) {
+          ;(e.target as HTMLButtonElement).style.background =
+            "linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%)"
+          ;(e.target as HTMLButtonElement).style.boxShadow =
+            "0 1px 3px rgba(37,99,235,0.3), 0 1px 2px rgba(0,0,0,0.06)"
+        }
+      }}
+    >
+      {label}
+    </button>
+  )
+}
+
+export function PayPalAdvancedCard(props: {
+  baseUrl: string
+  publishableApiKey?: string
+  cartId: string
+  config: PayPalConfig
+  onPaid?: (result: Record<string, unknown>) => void
+  onError?: (message: string) => void
+}) {
+  const { baseUrl, publishableApiKey, cartId, config, onPaid, onError } = props
+
+  const api = useMemo(
+    () => createPayPalStoreApi({ baseUrl, publishableApiKey }),
+    [baseUrl, publishableApiKey]
+  )
+
+  const [error, setError] = useState<string | null>(null)
+  const [submitting, setSubmitting] = useState(false)
+  const submittingRef = useRef(false)
+  const creatingOrderRef = useRef(false)
+  // Once a capture succeeded the buyer's money is taken: any later failure
+  // must retry ONLY the order finalization, never a fresh order/capture.
+  const capturedRef = useRef<Record<string, unknown> | null>(null)
+  const [completionPending, setCompletionPending] = useState(false)
+  const [{ isPending, isResolved, isRejected }] = usePayPalScriptReducer()
+
+  const resetSubmitState = React.useCallback(() => {
+    hideProcessingOverlay()
+    creatingOrderRef.current = false
+    submittingRef.current = false
+    setSubmitting(false)
+  }, [])
+
+  // bfcache restore (Back button after a redirect) revives this page with the
+  // old React state — clear the submitting flag so the buyer isn't stuck
+  // behind the in-component overlay.
+  React.useEffect(() => {
+    const onPageShow = (e: PageTransitionEvent) => {
+      if (e.persisted) {
+        creatingOrderRef.current = false
+        submittingRef.current = false
+        setSubmitting(false)
+      }
+    }
+    window.addEventListener("pageshow", onPageShow)
+    return () => window.removeEventListener("pageshow", onPageShow)
+  }, [])
+
+  // A reload/crash between capture and finalization loses the in-memory
+  // capturedRef — restore it from the persisted per-cart flag so the buyer
+  // gets the finalize-only Retry button instead of card fields that would
+  // charge (or confusingly fail) again.
+  React.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 — do not pay again."
+    )
+  }, [cartId])
+
+  const finalizeCapturedPayment = React.useCallback(async () => {
+    const captured = capturedRef.current
+    if (!captured) return
+    setSubmitting(true)
+    showProcessingOverlay()
+    setError(null)
+    try {
+      const completeResult = await markPaymentComplete(
+        baseUrl,
+        cartId,
+        publishableApiKey
+      )
+      // The order is finalized — the persisted "captured" flag has served its
+      // purpose. Clear it before the consumer callback (which may redirect).
+      clearCartCaptured(cartId)
+      await onPaid?.({ ...captured, ...completeResult })
+      setCompletionPending(false)
+    } catch (e: unknown) {
+      if (isNextRouterError(e)) return
+      resetSubmitState()
+      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, resetSubmitState])
+
+  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
+        style={{
+          padding: "12px 16px",
+          background: "#fefce8",
+          border: "1px solid #fde68a",
+          borderRadius: 8,
+          fontSize: 13,
+          color: "#92400e",
+        }}
+      >
+        Card fields unavailable — missing client token from backend.
+      </div>
+    )
+  }
+
+  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: "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: "#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: 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, #2563eb, #1d4ed8)",
+                borderRadius: 3,
+                animation: "_pp_progress 1.5s ease-in-out infinite",
+              }}
+            />
+          </div>
+        </div>
+      )}
+
+      <PayPalCardFieldsProvider
+        style={cardStyle}
+        createOrder={async () => {
+          if (creatingOrderRef.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.
+            void finalizeCapturedPayment()
+            throw new Error(
+              "Your payment was already received — finalizing your order."
+            )
+          }
+          creatingOrderRef.current = true
+          try {
+            setError(null)
+            const r = await api.createOrder(cartId, true)
+            return r.id
+          } catch (e) {
+            creatingOrderRef.current = false
+            throw e
+          }
+        }}
+        onApprove={async (data: { orderID?: string }) => {
+          try {
+            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)
+            capturedRef.current = (result || {}) as Record<string, unknown>
+            // Persist across reloads: from here on, only finalization may
+            // ever be retried for this cart — never a fresh payment.
+            markCartCaptured(cartId)
+          } catch (e: unknown) {
+            if (isNextRouterError(e)) return
+            resetSubmitState()
+            const msg = e instanceof Error ? e.message : "Card payment failed"
+            setError(msg)
+            onError?.(msg)
+            return
+          }
+          // Past this point the buyer has been charged: completion failures
+          // surface a finalize-only Retry, never a fresh payment.
+          await finalizeCapturedPayment()
+        }}
+        onCancel={() => {
+          hideProcessingOverlay()
+          creatingOrderRef.current = false
+          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()
+          creatingOrderRef.current = false
+          submittingRef.current = false
+          setSubmitting(false)
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            gap: 16,
+            width: "100%",
+          }}
+        >
+          {isSandbox && (
+            <div
+              style={{
+                display: "flex",
+                alignItems: "flex-start",
+                gap: 10,
+                padding: "10px 14px",
+                background: "#eff6ff",
+                border: "1px solid #bfdbfe",
+                borderRadius: 8,
+                fontSize: 13,
+                color: "#1e40af",
+                lineHeight: 1.55,
+              }}
+            >
+              <span style={{ fontSize: 15, flexShrink: 0, marginTop: 1 }}>
+                🧪
+              </span>
+              <span>
+                Sandbox mode — use test card{" "}
+                <strong
+                  style={{ fontFamily: "monospace", letterSpacing: "0.05em" }}
+                >
+                  4111 1111 1111 1111
+                </strong>{" "}
+                with any future date and any CVV.
+              </span>
+            </div>
+          )}
+
+          <div>
+            <label style={labelStyle}>Card number</label>
+            <PayPalNumberField />
+          </div>
+
+          <div
+            style={{
+              display: "grid",
+              gridTemplateColumns: "1fr 1fr",
+              gap: 16,
+            }}
+          >
+            <div>
+              <label style={labelStyle}>Expiration date</label>
+              <PayPalExpiryField />
+            </div>
+            <div>
+              <label style={labelStyle}>Security code</label>
+              <PayPalCVVField />
+            </div>
+          </div>
+
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: 6,
+              fontSize: 12,
+              color: "#6b7280",
+            }}
+          >
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="#10b981"
+              strokeWidth="2.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+            </svg>
+            <span>Your payment is secured with 256-bit SSL encryption</span>
+          </div>
+
+          {completionPending ? (
+            <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,
+              }}
+            >
+              Retry — finish placing my order
+            </button>
+          ) : (
+            <SubmitButton
+              disabled={submitting}
+              label={submitting ? "Processing…" : "Pay by Card"}
+              onSubmit={() => {
+                if (submittingRef.current) return
+                submittingRef.current = true
+                setError(null)
+                setSubmitting(true)
+                showProcessingOverlay()
+              }}
+              onSubmitError={(msg) => {
+                resetSubmitState()
+                setError(msg)
+                onError?.(msg)
+              }}
+            />
+          )}
+
+          {error && (
+            <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,
+              }}
+            >
+              <span style={{ flexShrink: 0, marginTop: 1 }}>⚠️</span>
+              <span>{error}</span>
+            </div>
+          )}
+        </div>
+      </PayPalCardFieldsProvider>
+    </div>
+  )
+}