@easypayment/medusa-paypal-ui 1.1.1 → 1.2.2

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}
+    />
+  )
+}

package/src/components/PayPalSmartButtons.tsx

@@ -3,6 +3,11 @@ 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"
 
@@ -58,6 +63,19 @@ export function PayPalSmartButtons(props: {
     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.
@@ -77,6 +95,9 @@ export function PayPalSmartButtons(props: {
     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) {
@@ -343,6 +364,9 @@ export function PayPalSmartButtons(props: {
               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()

package/src/constants.ts

@@ -0,0 +1,22 @@
+/**
+ * Provider ids registered by `@easypayment/medusa-payment-paypal`.
+ *
+ * Single source of truth — `PayPalPaymentSection`, `MedusaNextPayPalAdapter`,
+ * and the server-safe `order` entrypoint all re-export from here so the ids
+ * can never drift between entrypoints.
+ */
+export const PAYPAL_WALLET_PROVIDER_ID = "pp_paypal_paypal" as const
+export const PAYPAL_CARD_PROVIDER_ID = "pp_paypal_card_paypal_card" as const
+
+export const PAYPAL_PROVIDER_IDS = [
+  PAYPAL_WALLET_PROVIDER_ID,
+  PAYPAL_CARD_PROVIDER_ID,
+] as const
+
+/** True when the provider id belongs to this PayPal plugin. */
+export function isPayPalProviderId(providerId?: string | null): boolean {
+  if (!providerId) return false
+  return PAYPAL_PROVIDER_IDS.includes(
+    providerId as (typeof PAYPAL_PROVIDER_IDS)[number]
+  )
+}

package/src/hooks/usePayPalPaymentMethods.ts

@@ -17,6 +17,13 @@ type Result = {
   cardEnabled: boolean
   cardTitle: string
   loading: boolean
+  /**
+   * Non-null when the config fetch failed and the returned flags are the
+   * optimistic defaults rather than the merchant's real settings. Storefronts
+   * can use this to hide or annotate the PayPal options instead of advertising
+   * methods that will fail once selected.
+   */
+  error: string | null
 }
 
 const MAX_CACHE_ENTRIES = 50
@@ -41,6 +48,7 @@ const DEFAULT_RESULT: Result = {
   cardEnabled: true,
   cardTitle: "Credit or Debit Card",
   loading: false,
+  error: null,
 }
 
 export function usePayPalPaymentMethods({
@@ -97,6 +105,7 @@ export function usePayPalPaymentMethods({
               ? cfg.card_title
               : "Credit or Debit Card",
           loading: false,
+          error: null,
         }
 
         cacheSet(k, { result: next, at: Date.now() })
@@ -112,12 +121,17 @@ export function usePayPalPaymentMethods({
             paypalEnabled: false,
             cardEnabled: false,
             loading: false,
+            error: msg || "PayPal is disabled",
           }
           setResult(disabled)
           return
         }
 
-        setResult({ ...DEFAULT_RESULT, loading: false })
+        setResult({
+          ...DEFAULT_RESULT,
+          loading: false,
+          error: msg || "Failed to load PayPal payment methods",
+        })
       }
     })()
 

package/src/index.ts

@@ -9,3 +9,8 @@ export * from "./adapters/MedusaNextPayPalAdapter"
 export * from "./components/PayPalPaymentSection"
 export * from "./hooks/usePayPalPaymentMethods"
 export { showProcessingOverlay, hideProcessingOverlay } from "./utils/processing-overlay"
+export {
+  markCartCaptured,
+  wasCartCaptured,
+  clearCartCaptured,
+} from "./utils/captured-state"

package/src/order.ts

@@ -24,8 +24,13 @@
  * </Text>
  */
 
-export const PAYPAL_WALLET_PROVIDER_ID = "pp_paypal_paypal"
-export const PAYPAL_CARD_PROVIDER_ID = "pp_paypal_card_paypal_card"
+import {
+  PAYPAL_WALLET_PROVIDER_ID,
+  PAYPAL_CARD_PROVIDER_ID,
+  isPayPalProviderId,
+} from "./constants"
+
+export { PAYPAL_WALLET_PROVIDER_ID, PAYPAL_CARD_PROVIDER_ID, isPayPalProviderId }
 
 export type PayPalPaymentInfo = { title: string }
 
@@ -41,14 +46,6 @@ export type PayPalConfigTitles = {
   card_title?: string | null
 }
 
-/** True when the provider id belongs to this PayPal plugin. */
-export function isPayPalProviderId(providerId?: string | null): boolean {
-  return (
-    providerId === PAYPAL_WALLET_PROVIDER_ID ||
-    providerId === PAYPAL_CARD_PROVIDER_ID
-  )
-}
-
 /**
  * Null-safe payment label resolver for order / confirmation pages.
  *

package/src/utils/captured-state.ts

@@ -0,0 +1,44 @@
+/**
+ * Per-cart "money was captured" flag, persisted in sessionStorage.
+ *
+ * The in-memory `capturedRef` protects a buyer within one page lifetime, but a
+ * reload/crash between the capture and the order finalization loses it — the
+ * buyer would then see fresh payment buttons for a cart whose money is already
+ * taken. Persisting the flag lets the components restore the finalize-only
+ * Retry path after a reload instead of offering a second payment.
+ *
+ * sessionStorage is deliberately chosen over localStorage: it is scoped to the
+ * tab/session, so an abandoned flag can't leak into a future visit after the
+ * cart id is reused, and it needs no expiry logic. Every access is guarded —
+ * private browsing modes and storage-blocking settings throw on access, and a
+ * storage failure must never break the payment flow.
+ */
+
+const KEY_PREFIX = "__pp_captured::"
+
+export function markCartCaptured(cartId: string): void {
+  if (!cartId) return
+  try {
+    window.sessionStorage.setItem(`${KEY_PREFIX}${cartId}`, String(Date.now()))
+  } catch {
+    // storage unavailable — in-memory state still covers the common path
+  }
+}
+
+export function wasCartCaptured(cartId: string): boolean {
+  if (!cartId) return false
+  try {
+    return window.sessionStorage.getItem(`${KEY_PREFIX}${cartId}`) !== null
+  } catch {
+    return false
+  }
+}
+
+export function clearCartCaptured(cartId: string): void {
+  if (!cartId) return
+  try {
+    window.sessionStorage.removeItem(`${KEY_PREFIX}${cartId}`)
+  } catch {
+    // ignore
+  }
+}