@easypayment/medusa-paypal-ui 1.2.0 → 1.2.3

package/src/components/PayPalSmartButtons.tsx

@@ -1,445 +1,489 @@
-"use client"
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
-import { PayPalButtons, 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 BUTTON_WIDTH_MAP: Record<string, string> = {
-  small: "300px",
-  medium: "400px",
-  large: "500px",
-  responsive: "100%",
-}
-
-export function PayPalSmartButtons(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 [processing, setProcessing] = 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
-  // (order finalization, consumer callback) must retry ONLY the finalization,
-  // never a fresh createOrder/capture, or a retry click would charge again.
-  const capturedRef = useRef<Record<string, unknown> | null>(null)
-  const [completionPending, setCompletionPending] = useState(false)
-  const [{ isPending, isResolved, isRejected }] = usePayPalScriptReducer()
-
-  const handleInit = useCallback(() => {
-    setButtonsReady(true)
-  }, [])
-
-  // bfcache restore (Back button after a redirect) revives this page with the
-  // old React state — clear the processing flag so the buyer isn't stuck
-  // behind the in-component overlay.
-  useEffect(() => {
-    const onPageShow = (e: PageTransitionEvent) => {
-      if (e.persisted) setProcessing(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 payment buttons that would
-  // fail confusingly against an already-captured PayPal order.
-  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 — do not pay again."
-    setError(msg)
-  }, [cartId])
-
-  // The PayPal SDK never calls onInit when the buttons are ineligible (wrong
-  // country/currency/funding) — it silently renders nothing. Without a
-  // fallback the buyer stares at "Loading PayPal…" forever.
-  useEffect(() => {
-    if (!isResolved || buttonsReady) {
-      return
-    }
-    const t = setTimeout(() => setLoadTimedOut(true), 10_000)
-    return () => clearTimeout(t)
-  }, [isResolved, buttonsReady])
-
-  const finalizeCapturedPayment = useCallback(async () => {
-    const captured = capturedRef.current
-    if (!captured) return
-    setProcessing(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
-      hideProcessingOverlay()
-      setProcessing(false)
-      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])
-
-  const showSpinner = (isPending || (isResolved && !buttonsReady)) && !loadTimedOut
-
-  if (!config.currency_supported) return null
-
-  const containerWidth = BUTTON_WIDTH_MAP[config.button_width ?? "responsive"] ?? "100%"
-
-  return (
-    <div style={{ width: containerWidth, position: "relative" }}>
-      <style>{SPIN_STYLE}</style>
-
-      {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>
-      )}
-
-      {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>
-      )}
-
-      {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>
-      )}
-
-      {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",
-            alignItems: "flex-start",
-            gap: 8,
-            padding: "10px 14px",
-            background: "#eff6ff",
-            border: "1px solid #bfdbfe",
-            borderRadius: 8,
-            fontSize: 13,
-            color: "#1e40af",
-            lineHeight: 1.5,
-            marginBottom: 10,
-          }}
-        >
-          <svg
-            width="16"
-            height="16"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="#1e40af"
-            strokeWidth="2"
-            strokeLinecap="round"
-            style={{ flexShrink: 0, marginTop: 1 }}
-          >
-            <circle cx="12" cy="12" r="10" />
-            <path d="M12 8v4M12 16h.01" />
-          </svg>
-          <span>
-            Sandbox mode — you will not be charged. Use your PayPal sandbox
-            account to complete the payment.
-          </span>
-        </div>
-      )}
-
-      {isResolved && !completionPending && (
-        <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,
-            shape: config.button_shape,
-            label: config.button_label,
-            height: config.button_height,
-          }}
-          createOrder={async () => {
-            if (processing) 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.")
-            }
-            setError(null)
-            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)
-              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
-              hideProcessingOverlay()
-              setProcessing(false)
-              const msg = e instanceof Error ? e.message : "Payment capture 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()
-            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>
-      )}
-
-      {completionPending && (
-        <button
-          type="button"
-          onClick={() => void finalizeCapturedPayment()}
-          disabled={processing}
-          aria-busy={processing}
-          style={{
-            width: "100%",
-            padding: "12px 16px",
-            marginTop: 4,
-            background: "#0070ba",
-            color: "#ffffff",
-            border: "none",
-            borderRadius: 8,
-            fontSize: 14,
-            fontWeight: 600,
-            cursor: processing ? "not-allowed" : "pointer",
-            opacity: processing ? 0.7 : 1,
-          }}
-        >
-          Retry — finish placing my order
-        </button>
-      )}
-
-      {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>
-      ) : null}
-    </div>
-  )
-}
+"use client"
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { PayPalButtons, 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 BUTTON_WIDTH_MAP: Record<string, string> = {
+  small: "300px",
+  medium: "400px",
+  large: "500px",
+  responsive: "100%",
+}
+
+export function PayPalSmartButtons(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 [processing, setProcessing] = 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
+  // (order finalization, consumer callback) must retry ONLY the finalization,
+  // never a fresh createOrder/capture, or a retry click would charge again.
+  const capturedRef = useRef<Record<string, unknown> | null>(null)
+  const [completionPending, setCompletionPending] = useState(false)
+  const [{ isPending, isResolved, isRejected }] = usePayPalScriptReducer()
+
+  const handleInit = useCallback(() => {
+    setButtonsReady(true)
+  }, [])
+
+  // bfcache restore (Back button after a redirect) revives this page with the
+  // old React state — clear the processing flag so the buyer isn't stuck
+  // behind the in-component overlay.
+  useEffect(() => {
+    const onPageShow = (e: PageTransitionEvent) => {
+      if (e.persisted) setProcessing(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 payment buttons that would
+  // fail confusingly against an already-captured PayPal order.
+  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 — do not pay again."
+    setError(msg)
+  }, [cartId])
+
+  // The PayPal SDK never calls onInit when the buttons are ineligible (wrong
+  // country/currency/funding) — it silently renders nothing. Without a
+  // fallback the buyer stares at "Loading PayPal…" forever.
+  useEffect(() => {
+    if (!isResolved || buttonsReady) {
+      return
+    }
+    const t = setTimeout(() => setLoadTimedOut(true), 10_000)
+    return () => clearTimeout(t)
+  }, [isResolved, buttonsReady])
+
+  const finalizeCapturedPayment = useCallback(async () => {
+    const captured = capturedRef.current
+    if (!captured) return
+    setProcessing(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
+      hideProcessingOverlay()
+      setProcessing(false)
+      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])
+
+  const showSpinner =
+    (isPending || (isResolved && !buttonsReady)) && !loadTimedOut
+
+  if (!config.currency_supported) return null
+
+  const containerWidth =
+    BUTTON_WIDTH_MAP[config.button_width ?? "responsive"] ?? "100%"
+
+  return (
+    <div style={{ width: containerWidth, position: "relative" }}>
+      <style>{SPIN_STYLE}</style>
+
+      {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>
+      )}
+
+      {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>
+      )}
+
+      {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>
+      )}
+
+      {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",
+            alignItems: "flex-start",
+            gap: 8,
+            padding: "10px 14px",
+            background: "#eff6ff",
+            border: "1px solid #bfdbfe",
+            borderRadius: 8,
+            fontSize: 13,
+            color: "#1e40af",
+            lineHeight: 1.5,
+            marginBottom: 10,
+          }}
+        >
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="#1e40af"
+            strokeWidth="2"
+            strokeLinecap="round"
+            style={{ flexShrink: 0, marginTop: 1 }}
+          >
+            <circle cx="12" cy="12" r="10" />
+            <path d="M12 8v4M12 16h.01" />
+          </svg>
+          <span>
+            Sandbox mode — you will not be charged. Use your PayPal sandbox
+            account to complete the payment.
+          </span>
+        </div>
+      )}
+
+      {isResolved && !completionPending && (
+        <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,
+              shape: config.button_shape,
+              label: config.button_label,
+              height: config.button_height,
+            }}
+            createOrder={async () => {
+              if (processing) 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."
+                )
+              }
+              setError(null)
+              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)
+                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
+                hideProcessingOverlay()
+                setProcessing(false)
+                const msg =
+                  e instanceof Error ? e.message : "Payment capture 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()
+              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>
+      )}
+
+      {completionPending && (
+        <button
+          type="button"
+          onClick={() => void finalizeCapturedPayment()}
+          disabled={processing}
+          aria-busy={processing}
+          style={{
+            width: "100%",
+            padding: "12px 16px",
+            marginTop: 4,
+            background: "#0070ba",
+            color: "#ffffff",
+            border: "none",
+            borderRadius: 8,
+            fontSize: 14,
+            fontWeight: 600,
+            cursor: processing ? "not-allowed" : "pointer",
+            opacity: processing ? 0.7 : 1,
+          }}
+        >
+          Retry — finish placing my order
+        </button>
+      )}
+
+      {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>
+      ) : null}
+    </div>
+  )
+}