@easypayment/medusa-paypal-ui 1.1.0 → 1.2.0

package/src/components/PayPalAdvancedCard.tsx

@@ -12,6 +12,11 @@ import {
 
 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"
 
@@ -68,10 +73,12 @@ function SubmitButton({
   disabled,
   label,
   onSubmit,
+  onSubmitError,
 }: {
   disabled: boolean
   label: string
   onSubmit: () => void
+  onSubmitError: (message: string) => void
 }) {
   const { cardFieldsForm } = usePayPalCardFields()
   const isDisabled = disabled || !cardFieldsForm
@@ -83,11 +90,18 @@ function SubmitButton({
       aria-busy={disabled}
       onClick={() => {
         onSubmit()
-        try {
-          cardFieldsForm?.submit()
-        } catch {
-          // submit() error is handled by PayPalCardFieldsProvider onError
-        }
+        // 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%",
@@ -150,8 +164,71 @@ export function PayPalAdvancedCard(props: {
   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) {
@@ -331,6 +408,12 @@ export function PayPalAdvancedCard(props: {
         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)
@@ -346,21 +429,23 @@ export function PayPalAdvancedCard(props: {
             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)
-
-            const completeResult = await markPaymentComplete(baseUrl, cartId, publishableApiKey)
-
-            await onPaid?.({ ...result, ...completeResult })
+            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()
-            creatingOrderRef.current = false
-            submittingRef.current = false
-            setSubmitting(false)
+            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()
@@ -458,17 +543,46 @@ export function PayPalAdvancedCard(props: {
             <span>Your payment is secured with 256-bit SSL encryption</span>
           </div>
 
-          <SubmitButton
-            disabled={submitting}
-            label={submitting ? "Processing…" : "Pay by Card"}
-            onSubmit={() => {
-              if (submittingRef.current) return
-              submittingRef.current = true
-              setError(null)
-              setSubmitting(true)
-              showProcessingOverlay()
-            }}
-          />
+          {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

package/src/components/PayPalPaymentSection.tsx

@@ -1,202 +1,95 @@
-"use client"
-
-import React, { useCallback } from "react"
-import { PayPalCurrencyNotice } from "./PayPalCurrencyNotice"
-import { PayPalAdvancedCard } from "./PayPalAdvancedCard"
-import { PayPalProvider } from "./PayPalProvider"
-import { PayPalSmartButtons } from "./PayPalSmartButtons"
-import { usePayPalConfig } from "../hooks/usePayPalConfig"
-
-export const PAYPAL_WALLET_PROVIDER_ID = "pp_paypal_paypal" as const
-export const PAYPAL_CARD_PROVIDER_ID = "pp_paypal_card_paypal_card" as const
-
-const PAYPAL_PROVIDER_IDS = [
-  PAYPAL_WALLET_PROVIDER_ID,
-  PAYPAL_CARD_PROVIDER_ID,
-] as const
-
-export function isPayPalProviderId(id?: string | null): boolean {
-  if (!id) return false
-  return PAYPAL_PROVIDER_IDS.includes(id as (typeof PAYPAL_PROVIDER_IDS)[number])
-}
-
-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",
-        gap: 12,
-        padding: "14px 16px",
-        marginTop: 8,
-        background: "#f9fafb",
-        border: "1px solid #e5e7eb",
-        borderRadius: 10,
-      }}
-    >
-      <style>{SPIN_STYLE}</style>
-      <div
-        style={{
-          width: 20,
-          height: 20,
-          borderRadius: "50%",
-          border: "2.5px solid #e5e7eb",
-          borderTopColor: "#0070ba",
-          animation: "_pp_section_spin .7s linear infinite",
-          flexShrink: 0,
-        }}
-      />
-      <div style={{ fontSize: 13, fontWeight: 500, color: "#111827" }}>
-        Setting up payment…
-      </div>
-    </div>
-  )
-}
-
-function ConfigLoadingCard() {
-  return (
-    <div
-      role="status"
-      aria-label="Connecting to PayPal"
-      style={{
-        display: "flex",
-        alignItems: "center",
-        gap: 12,
-        padding: "14px 16px",
-        background: "#f9fafb",
-        border: "1px solid #e5e7eb",
-        borderRadius: 10,
-      }}
-    >
-      <style>{SPIN_STYLE}</style>
-      <div
-        style={{
-          width: 22,
-          height: 22,
-          borderRadius: "50%",
-          border: "2.5px solid #e5e7eb",
-          borderTopColor: "#0070ba",
-          animation: "_pp_section_spin .7s linear infinite",
-          flexShrink: 0,
-        }}
-      />
-      <div>
-        <div style={{ fontSize: 13, fontWeight: 500, color: "#111827" }}>
-          Connecting to PayPal…
-        </div>
-        <div style={{ fontSize: 12, color: "#6b7280", marginTop: 2 }}>
-          Setting up secure payment
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function ErrorCard({ message }: { message: string }) {
-  return (
-    <div
-      role="alert"
-      style={{
-        padding: "12px 16px",
-        background: "#fef2f2",
-        border: "1px solid #fecaca",
-        borderRadius: 10,
-        fontSize: 13,
-        color: "#b91c1c",
-      }}
-    >
-      {message}
-    </div>
-  )
-}
-
-export type PayPalPaymentSectionProps = {
-  cartId: string
-  selectedProviderId: string | null | undefined
-  baseUrl: string
-  publishableApiKey?: string
-  sessionLoading?: boolean
-  onSuccess?: (cartId: string) => void
-  onError?: (message: string) => void
-  onPaid?: (result: unknown) => void
-}
-
-export function PayPalPaymentSection({
-  cartId,
-  selectedProviderId,
-  baseUrl,
-  publishableApiKey,
-  sessionLoading = false,
-  onSuccess,
-  onError,
-  onPaid,
-}: PayPalPaymentSectionProps) {
-  const shouldRender = isPayPalProviderId(selectedProviderId)
-
-  const { config, loading, error } = usePayPalConfig({
-    baseUrl,
-    publishableApiKey,
-    cartId,
-    enabled: shouldRender,
-  })
-
-  const handlePaid = useCallback(
-    async (captureResult: unknown) => {
-      onPaid?.(captureResult)
-      await onSuccess?.(cartId)
-    },
-    [cartId, onPaid, onSuccess]
-  )
-
-  if (!shouldRender) return null
-  if (sessionLoading) return <SessionInitCard />
-  if (loading) return <ConfigLoadingCard />
-  if (error) return <ErrorCard message={error} />
-  if (!config) return null
-
-  if (config.paypal_enabled === false && selectedProviderId === PAYPAL_WALLET_PROVIDER_ID) {
-    return null
-  }
-
-  const isCardProvider = selectedProviderId === PAYPAL_CARD_PROVIDER_ID
-  if (isCardProvider && config.card_enabled === false) return null
-
-  const disableFunding = Array.isArray(config.disable_buttons)
-    ? config.disable_buttons.join(",")
-    : undefined
-
-  return (
-    <div key={selectedProviderId} style={{ display: "grid", gap: 12 }}>
-      <PayPalCurrencyNotice config={config} />
-      <PayPalProvider
-        config={config}
-        intent={config.intent === "authorize" ? "authorize" : "capture"}
-        disableFunding={disableFunding}
-      >
-        {isCardProvider ? (
-          <PayPalAdvancedCard
-            baseUrl={baseUrl}
-            publishableApiKey={publishableApiKey}
-            cartId={cartId}
-            config={config}
-            onPaid={handlePaid}
-            onError={onError}
-          />
-        ) : (
-          <PayPalSmartButtons
-            baseUrl={baseUrl}
-            publishableApiKey={publishableApiKey}
-            cartId={cartId}
-            config={config}
-            onPaid={handlePaid}
-            onError={onError}
-          />
-        )}
-      </PayPalProvider>
-    </div>
-  )
-}
+"use client"
+
+import React from "react"
+import { MedusaNextPayPalAdapter } from "../adapters/MedusaNextPayPalAdapter"
+import {
+  PAYPAL_WALLET_PROVIDER_ID,
+  PAYPAL_CARD_PROVIDER_ID,
+  isPayPalProviderId,
+} from "../constants"
+
+// Re-exported for backward compatibility — these have always been part of this
+// module's public API. The canonical definitions live in ../constants.
+export { PAYPAL_WALLET_PROVIDER_ID, PAYPAL_CARD_PROVIDER_ID, isPayPalProviderId }
+
+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",
+        gap: 12,
+        padding: "14px 16px",
+        marginTop: 8,
+        background: "#f9fafb",
+        border: "1px solid #e5e7eb",
+        borderRadius: 10,
+      }}
+    >
+      <style>{SPIN_STYLE}</style>
+      <div
+        style={{
+          width: 20,
+          height: 20,
+          borderRadius: "50%",
+          border: "2.5px solid #e5e7eb",
+          borderTopColor: "#0070ba",
+          animation: "_pp_section_spin .7s linear infinite",
+          flexShrink: 0,
+        }}
+      />
+      <div style={{ fontSize: 13, fontWeight: 500, color: "#111827" }}>
+        Setting up payment…
+      </div>
+    </div>
+  )
+}
+
+export type PayPalPaymentSectionProps = {
+  cartId: string
+  selectedProviderId: string | null | undefined
+  baseUrl: string
+  publishableApiKey?: string
+  sessionLoading?: boolean
+  onSuccess?: (cartId: string) => void
+  onError?: (message: string) => void
+  onPaid?: (result: unknown) => void
+}
+
+/**
+ * Drop-in PayPal payment section for a Medusa checkout.
+ *
+ * A thin wrapper over {@link MedusaNextPayPalAdapter} (they previously carried
+ * two ~90%-identical render paths that had to be edited in lockstep): this
+ * component pins the default provider ids and adds the `sessionLoading` gate
+ * shown while the storefront is still creating the payment session.
+ */
+export function PayPalPaymentSection({
+  cartId,
+  selectedProviderId,
+  baseUrl,
+  publishableApiKey,
+  sessionLoading = false,
+  onSuccess,
+  onError,
+  onPaid,
+}: PayPalPaymentSectionProps) {
+  if (!isPayPalProviderId(selectedProviderId)) return null
+  if (sessionLoading) return <SessionInitCard />
+
+  return (
+    <MedusaNextPayPalAdapter
+      cartId={cartId}
+      selectedProviderId={selectedProviderId}
+      baseUrl={baseUrl}
+      publishableApiKey={publishableApiKey}
+      onSuccess={onSuccess}
+      onError={onError}
+      onPaid={onPaid}
+    />
+  )
+}