@easypayment/medusa-paypal-ui 1.0.50 → 1.0.52

package/src/client/http.ts

@@ -19,8 +19,6 @@ function toHeaderRecord(headers?: RequestInit["headers"]): Record<string, string
   return { ...headers }
 }
 
-const DEFAULT_TIMEOUT_MS = 30000
-
 export function createHttpClient(opts: HttpOptions) {
   const base = opts.baseUrl.replace(/\/+$/, "")
 
@@ -35,36 +33,25 @@ export function createHttpClient(opts: HttpOptions) {
       headers["x-publishable-api-key"] = opts.publishableApiKey
     }
 
-    // Always enforce a timeout so a hung backend can't leave the checkout
-    // spinner up forever, while still honouring a caller-provided abort signal.
+    const timeoutMs = 30_000
+    let timeoutId: ReturnType<typeof setTimeout> | undefined
     const controller = new AbortController()
-    let timedOut = false
-    const timer = setTimeout(() => {
-      timedOut = true
-      controller.abort()
-    }, DEFAULT_TIMEOUT_MS)
-    const callerSignal = init?.signal
-    if (callerSignal) {
-      if (callerSignal.aborted) {
-        controller.abort()
-      } else {
-        callerSignal.addEventListener("abort", () => controller.abort(), { once: true })
-      }
+    if (!init?.signal) {
+      timeoutId = setTimeout(() => controller.abort(), timeoutMs)
     }
-
+    const effectiveSignal = init?.signal || controller.signal
     let res: Response
-    let text: string
     try {
-      res = await fetch(url, { ...init, headers, credentials: "include", signal: controller.signal })
-      text = await res.text().catch(() => "")
-    } catch (e) {
-      if (timedOut) {
-        throw new Error("[PayPal] Request timed out. Please check your connection and try again.")
+      res = await fetch(url, { ...init, headers, credentials: "include", signal: effectiveSignal })
+    } catch (err) {
+      if (err instanceof Error && err.name === "AbortError" && !init?.signal) {
+        throw new Error(`[PayPal] Request to ${path} timed out after ${timeoutMs / 1000}s`)
       }
-      throw e
+      throw err
     } finally {
-      clearTimeout(timer)
+      if (timeoutId !== undefined) clearTimeout(timeoutId)
     }
+    const text = await res.text().catch(() => "")
 
     if (!res.ok) {
       if (res.status === 401) {
@@ -77,25 +64,9 @@ export function createHttpClient(opts: HttpOptions) {
           "[PayPal] Forbidden (403) — this request is not allowed. Check your CORS and API key settings."
         )
       }
-      // Prefer the backend's clean { message, request_id } JSON. For 5xx, do not
-      // surface raw server internals to end users — log them and show a generic
-      // message (with a correlation id when available).
-      type ErrBody = { message?: unknown; request_id?: unknown }
-      let parsed: ErrBody | null = null
-      try {
-        parsed = text ? (JSON.parse(text) as ErrBody) : null
-      } catch {
-        parsed = null
-      }
-      const backendMessage = typeof parsed?.message === "string" ? parsed.message : ""
-      const requestId = typeof parsed?.request_id === "string" ? parsed.request_id : ""
-      if (res.status >= 500) {
-        console.error(`[PayPal] ${path} failed (${res.status})`, text.slice(0, 1000))
-        throw new Error(
-          `Payment service error${requestId ? ` (ref ${requestId})` : ""}. Please try again or contact support.`
-        )
-      }
-      throw new Error(backendMessage || `Request failed (${res.status})`)
+      throw new Error(
+        text.slice(0, 500).replace(/<[^>]*>/g, "") || `Request failed (${res.status})`
+      )
     }
     if (!text) {
       throw new Error(`[PayPal] Empty response body from ${path} (${res.status})`)

package/src/client/paypal.ts

@@ -1,47 +1,17 @@
 import type { PayPalConfig, PayPalSettingsResponse } from "./types"
 import { createHttpClient, type HttpOptions } from "./http"
 
-/**
- * True when an error is a Next.js navigation signal (`redirect()` / `notFound()`
- * from a server action). These MUST be re-thrown / ignored, never shown as an
- * error — a successful `placeOrder()` redirect surfaces as one of these.
- */
-export function isNextRedirectError(e: unknown): boolean {
-  if (!e || typeof e !== "object") {
-    return false
-  }
-  const digest = (e as { digest?: unknown }).digest
-  return (
-    typeof digest === "string" &&
-    (digest.startsWith("NEXT_REDIRECT") || digest === "NEXT_NOT_FOUND")
-  )
-}
-
 export async function markPaymentComplete(
   baseUrl: string,
   cartId: string,
   publishableApiKey?: string
-): Promise<{ ok: boolean } & Record<string, any>> {
-  try {
-    const resp = await fetch(`${baseUrl.replace(/\/$/, "")}/store/paypal-complete`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        ...(publishableApiKey ? { "x-publishable-api-key": publishableApiKey } : {}),
-      },
-      body: JSON.stringify({ cart_id: cartId }),
-      credentials: "include",
-    })
-    const data = await resp.json().catch(() => ({}))
-    if (!resp.ok) {
-      console.warn("[PayPal] paypal-complete returned", resp.status, data)
-      return { ok: false, ...(data || {}) }
-    }
-    return { ok: true, ...(data || {}) }
-  } catch (e) {
-    console.warn("[PayPal] paypal-complete call failed:", e)
-    return { ok: false }
-  }
+): Promise<Record<string, unknown>> {
+  const http = createHttpClient({ baseUrl, publishableApiKey })
+  return http.request<Record<string, unknown>>(`/store/paypal-complete`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ cart_id: cartId }),
+  })
 }
 
 export function createPayPalStoreApi(opts: HttpOptions) {

package/src/components/PayPalAdvancedCard.tsx

@@ -1,18 +1,24 @@
 "use client"
 
-import React, { useMemo, useState } from "react"
+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 { isNextRouterError } from "../utils/next-errors"
+import { showProcessingOverlay, hideProcessingOverlay } from "../utils/processing-overlay"
 
-const SPIN_STYLE = `@keyframes _pp_spin { to { transform: rotate(360deg) } }`
+const SPIN_STYLE = `
+@keyframes _pp_spin { to { transform: rotate(360deg) } }
+@keyframes _pp_progress { 0% { transform: translateX(-100%) } 100% { transform: translateX(350%) } }
+`
 
 const cardStyle = {
   input: {
@@ -62,12 +68,10 @@ function SubmitButton({
   disabled,
   label,
   onSubmit,
-  onSubmitError,
 }: {
   disabled: boolean
   label: string
   onSubmit: () => void
-  onSubmitError: (message: string) => void
 }) {
   const { cardFieldsForm } = usePayPalCardFields()
   const isDisabled = disabled || !cardFieldsForm
@@ -76,18 +80,13 @@ function SubmitButton({
     <button
       type="button"
       disabled={isDisabled}
+      aria-busy={disabled}
       onClick={() => {
         onSubmit()
-        // submit() can reject (network / tokenization / 3DS) WITHOUT firing the
-        // provider onError, which would otherwise leave the "Processing…"
-        // overlay stuck forever. Always catch it and surface the error.
-        const submitted = cardFieldsForm?.submit()
-        if (submitted && typeof submitted.catch === "function") {
-          submitted.catch((e: unknown) => {
-            onSubmitError(
-              e instanceof Error ? e.message : "Card payment failed. Please try again."
-            )
-          })
+        try {
+          cardFieldsForm?.submit()
+        } catch {
+          // submit() error is handled by PayPalCardFieldsProvider onError
         }
       }}
       style={{
@@ -149,9 +148,37 @@ export function PayPalAdvancedCard(props: {
 
   const [error, setError] = useState<string | null>(null)
   const [submitting, setSubmitting] = useState(false)
+  const submittingRef = useRef(false)
+  const [{ isPending, isResolved, isRejected }] = usePayPalScriptReducer()
 
   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
@@ -171,50 +198,138 @@ export function PayPalAdvancedCard(props: {
 
   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: "absolute",
+            position: "fixed",
             inset: 0,
-            zIndex: 20,
-            background: "rgba(255,255,255,0.92)",
-            borderRadius: 12,
+            zIndex: 9999,
+            background: "rgba(255,255,255,0.96)",
             display: "flex",
             flexDirection: "column",
             alignItems: "center",
             justifyContent: "center",
-            gap: 14,
-            minHeight: 180,
+            gap: 20,
           }}
         >
-          <div
-            style={{
-              width: 36,
-              height: 36,
-              borderRadius: "50%",
-              border: "3px solid #dbeafe",
-              borderTopColor: "#2563eb",
-              animation: "_pp_spin .75s linear infinite",
-            }}
-          />
+          <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: 15, fontWeight: 600, color: "#111827" }}>
-              Processing your payment…
+            <div style={{ fontSize: 18, fontWeight: 600, color: "#111827", letterSpacing: "-0.01em" }}>
+              Processing your payment
             </div>
-            <div style={{ fontSize: 13, color: "#6b7280", marginTop: 4 }}>
-              Please do not close or refresh this page
+            <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 (submittingRef.current) throw new Error("Payment already processing")
           setError(null)
           const r = await api.createOrder(cartId, true)
           return r.id
@@ -222,27 +337,34 @@ export function PayPalAdvancedCard(props: {
         onApprove={async (data: { orderID?: string }) => {
           try {
             setError(null)
+            showProcessingOverlay()
             const orderId = String(data?.orderID || "")
             const result = await api.captureOrder(cartId, orderId)
 
             const completeResult = await markPaymentComplete(baseUrl, cartId, publishableApiKey)
 
-            onPaid?.({ ...result, ...completeResult })
+            await onPaid?.({ ...result, ...completeResult })
           } catch (e: unknown) {
+            if (isNextRouterError(e)) throw e
+            hideProcessingOverlay()
+            submittingRef.current = false
+            setSubmitting(false)
             const msg = e instanceof Error ? e.message : "Card payment failed"
             setError(msg)
             onError?.(msg)
-          } finally {
-            setSubmitting(false)
           }
         }}
         onCancel={() => {
+          hideProcessingOverlay()
+          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()
+          submittingRef.current = false
           setSubmitting(false)
         }}
       >
@@ -330,18 +452,17 @@ export function PayPalAdvancedCard(props: {
             disabled={submitting}
             label={submitting ? "Processing…" : "Pay by Card"}
             onSubmit={() => {
+              if (submittingRef.current) return
+              submittingRef.current = true
               setError(null)
               setSubmitting(true)
-            }}
-            onSubmitError={(msg) => {
-              setError(msg)
-              onError?.(msg)
-              setSubmitting(false)
+              showProcessingOverlay()
             }}
           />
 
           {error && (
             <div
+              role="alert"
               style={{
                 display: "flex",
                 alignItems: "flex-start",

package/src/components/PayPalCurrencyNotice.tsx

@@ -7,7 +7,7 @@ export function PayPalCurrencyNotice({ config }: { config: PayPalConfig }) {
   if (config.currency_supported) return null
 
   return (
-    <div style={{ padding: 12, border: "1px solid #ddd", borderRadius: 10 }}>
+    <div role="alert" style={{ padding: 12, border: "1px solid #ddd", borderRadius: 10 }}>
       <div style={{ fontWeight: 600, marginBottom: 6 }}>PayPal currency issue</div>
       <ul style={{ margin: 0, paddingLeft: 18 }}>
         {(config.currency_errors || []).map((e) => (

package/src/components/PayPalPaymentSection.tsx

@@ -6,7 +6,6 @@ import { PayPalAdvancedCard } from "./PayPalAdvancedCard"
 import { PayPalProvider } from "./PayPalProvider"
 import { PayPalSmartButtons } from "./PayPalSmartButtons"
 import { usePayPalConfig } from "../hooks/usePayPalConfig"
-import { isNextRedirectError } from "../client/paypal"
 
 export const PAYPAL_WALLET_PROVIDER_ID = "pp_paypal_paypal" as const
 export const PAYPAL_CARD_PROVIDER_ID = "pp_paypal_card_paypal_card" as const
@@ -26,6 +25,8 @@ 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",
@@ -59,6 +60,8 @@ function SessionInitCard() {
 function ConfigLoadingCard() {
   return (
     <div
+      role="status"
+      aria-label="Connecting to PayPal"
       style={{
         display: "flex",
         alignItems: "center",
@@ -96,6 +99,7 @@ function ConfigLoadingCard() {
 function ErrorCard({ message }: { message: string }) {
   return (
     <div
+      role="alert"
       style={{
         padding: "12px 16px",
         background: "#fef2f2",
@@ -141,21 +145,11 @@ export function PayPalPaymentSection({
   })
 
   const handlePaid = useCallback(
-    (captureResult: unknown) => {
+    async (captureResult: unknown) => {
       onPaid?.(captureResult)
-      // onSuccess usually calls placeOrder(), which redirects on success. Run it
-      // without blocking the spinner, but surface real failures so a captured
-      // payment never ends silently with no order and no error shown.
-      Promise.resolve(onSuccess?.(cartId)).catch((e: unknown) => {
-        if (isNextRedirectError(e)) return
-        onError?.(
-          e instanceof Error
-            ? e.message
-            : "Your payment was taken but the order could not be finalized. Please contact support before paying again."
-        )
-      })
+      await onSuccess?.(cartId)
     },
-    [cartId, onPaid, onSuccess, onError]
+    [cartId, onPaid, onSuccess]
   )
 
   if (!shouldRender) return null

package/src/components/PayPalProvider.tsx

@@ -25,7 +25,7 @@ export function PayPalProvider(props: {
       "disable-funding": disableFunding,
       "data-partner-attribution-id": BN_CODE,
     }
-  }, [config, intent, disableFunding])
+  }, [config.client_id, config.currency, config.client_token, intent, disableFunding])
 
   return (
     <PayPalScriptProvider