@easypayment/medusa-paypal-ui 1.2.8 → 1.3.0

package/src/components/PayPalAdvancedCard.tsx

@@ -22,11 +22,13 @@ 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%) } }
-`
+import {
+  AnimationStyles,
+  ErrorBanner,
+  LoadingCard,
+  ProcessingOverlayView,
+  ShieldIcon,
+} from "./internal/ui"
 
 const cardStyle = {
   input: {
@@ -75,11 +77,13 @@ const labelStyle: React.CSSProperties = {
 
 function SubmitButton({
   disabled,
+  busy,
   label,
   onSubmit,
   onSubmitError,
 }: {
   disabled: boolean
+  busy: boolean
   label: string
   onSubmit: () => void
   onSubmitError: (message: string) => void
@@ -91,7 +95,7 @@ function SubmitButton({
     <button
       type="button"
       disabled={isDisabled}
-      aria-busy={disabled}
+      aria-busy={busy}
       onClick={() => {
         onSubmit()
         // submit() returns a promise and its rejection is NOT routed to the
@@ -153,30 +157,49 @@ function SubmitButton({
 export function PayPalAdvancedCard(props: {
   baseUrl: string
   publishableApiKey?: string
+  /** Forwarded to every API call — see `HttpOptions.credentials`. */
+  credentials?: RequestCredentials
   cartId: string
   config: PayPalConfig
-  onPaid?: (result: Record<string, unknown>) => void
+  onPaid?: (result: Record<string, unknown>) => void | Promise<void>
   onError?: (message: string) => void
 }) {
-  const { baseUrl, publishableApiKey, cartId, config, onPaid, onError } = props
+  const {
+    baseUrl,
+    publishableApiKey,
+    credentials,
+    cartId,
+    config,
+    onPaid,
+    onError,
+  } = props
 
   const api = useMemo(
-    () => createPayPalStoreApi({ baseUrl, publishableApiKey }),
-    [baseUrl, publishableApiKey]
+    () => createPayPalStoreApi({ baseUrl, publishableApiKey, credentials }),
+    [baseUrl, publishableApiKey, credentials]
   )
 
   const [error, setError] = useState<string | null>(null)
   const [submitting, setSubmitting] = useState(false)
   const submittingRef = useRef(false)
   const creatingOrderRef = useRef(false)
+  // True while the shared full-page DOM overlay is mounted, so the component
+  // doesn't also render its own copy on top of it.
+  const [domOverlayUp, setDomOverlayUp] = useState(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 showOverlay = React.useCallback(() => {
+    showProcessingOverlay()
+    setDomOverlayUp(true)
+  }, [])
+
   const resetSubmitState = React.useCallback(() => {
     hideProcessingOverlay()
+    setDomOverlayUp(false)
     creatingOrderRef.current = false
     submittingRef.current = false
     setSubmitting(false)
@@ -191,6 +214,7 @@ export function PayPalAdvancedCard(props: {
         creatingOrderRef.current = false
         submittingRef.current = false
         setSubmitting(false)
+        setDomOverlayUp(false)
       }
     }
     window.addEventListener("pageshow", onPageShow)
@@ -214,14 +238,13 @@ export function PayPalAdvancedCard(props: {
     const captured = capturedRef.current
     if (!captured) return
     setSubmitting(true)
-    showProcessingOverlay()
+    showOverlay()
     setError(null)
     try {
-      const completeResult = await markPaymentComplete(
-        baseUrl,
-        cartId,
-        publishableApiKey
-      )
+      const completeResult = await markPaymentComplete(baseUrl, cartId, {
+        publishableApiKey,
+        credentials,
+      })
       // The order is finalized — the persisted "captured" flag has served its
       // purpose. Clear it before the consumer callback (which may redirect).
       clearCartCaptured(cartId)
@@ -236,33 +259,25 @@ export function PayPalAdvancedCard(props: {
       setError(msg)
       onError?.(msg)
     }
-  }, [baseUrl, cartId, publishableApiKey, onPaid, onError, resetSubmitState])
+  }, [
+    baseUrl,
+    cartId,
+    publishableApiKey,
+    credentials,
+    onPaid,
+    onError,
+    showOverlay,
+    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>
+      <ErrorBanner>
+        PayPal failed to load. Please refresh the page or try a different
+        payment method.
+      </ErrorBanner>
     )
   }
 
@@ -287,36 +302,9 @@ export function PayPalAdvancedCard(props: {
 
   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>
+        <AnimationStyles />
+        <LoadingCard label="Loading card fields…" />
       </div>
     )
   }
@@ -325,107 +313,10 @@ export function PayPalAdvancedCard(props: {
 
   return (
     <div style={{ position: "relative" }}>
-      <style>{SPIN_STYLE}</style>
+      <AnimationStyles />
 
-      {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>
+      {submitting && !domOverlayUp && (
+        <ProcessingOverlayView accent="#2563eb" />
       )}
 
       <PayPalCardFieldsProvider
@@ -454,7 +345,7 @@ export function PayPalAdvancedCard(props: {
         onApprove={async (data: { orderID?: string }) => {
           try {
             setError(null)
-            showProcessingOverlay()
+            showOverlay()
             const orderId = String(data?.orderID || "")
             if (!orderId)
               throw new Error(
@@ -478,20 +369,14 @@ export function PayPalAdvancedCard(props: {
           await finalizeCapturedPayment()
         }}
         onCancel={() => {
-          hideProcessingOverlay()
-          creatingOrderRef.current = false
-          submittingRef.current = false
-          setSubmitting(false)
+          resetSubmitState()
         }}
         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)
+          resetSubmitState()
         }}
       >
         <div
@@ -517,7 +402,10 @@ export function PayPalAdvancedCard(props: {
                 lineHeight: 1.55,
               }}
             >
-              <span style={{ fontSize: 15, flexShrink: 0, marginTop: 1 }}>
+              <span
+                aria-hidden="true"
+                style={{ fontSize: 15, flexShrink: 0, marginTop: 1 }}
+              >
                 🧪
               </span>
               <span>
@@ -533,7 +421,12 @@ export function PayPalAdvancedCard(props: {
           )}
 
           <div>
-            <label style={labelStyle}>Card number</label>
+            {/* eslint-disable-next-line jsx-a11y/label-has-associated-control --
+    the PayPal hosted field below is a cross-origin iframe; it cannot be
+    associated via htmlFor, and PayPal provides the accessible name inside */}
+            <label style={labelStyle} id="_pp-label-card-number">
+              Card number
+            </label>
             <PayPalNumberField />
           </div>
 
@@ -545,11 +438,21 @@ export function PayPalAdvancedCard(props: {
             }}
           >
             <div>
-              <label style={labelStyle}>Expiration date</label>
+              {/* eslint-disable-next-line jsx-a11y/label-has-associated-control --
+    the PayPal hosted field below is a cross-origin iframe; it cannot be
+    associated via htmlFor, and PayPal provides the accessible name inside */}
+              <label style={labelStyle} id="_pp-label-expiry">
+                Expiration date
+              </label>
               <PayPalExpiryField />
             </div>
             <div>
-              <label style={labelStyle}>Security code</label>
+              {/* eslint-disable-next-line jsx-a11y/label-has-associated-control --
+    the PayPal hosted field below is a cross-origin iframe; it cannot be
+    associated via htmlFor, and PayPal provides the accessible name inside */}
+              <label style={labelStyle} id="_pp-label-cvv">
+                Security code
+              </label>
               <PayPalCVVField />
             </div>
           </div>
@@ -563,18 +466,7 @@ export function PayPalAdvancedCard(props: {
               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>
+            <ShieldIcon color="#10b981" size={14} />
             <span>Your payment is secured with 256-bit SSL encryption</span>
           </div>
 
@@ -603,13 +495,14 @@ export function PayPalAdvancedCard(props: {
           ) : (
             <SubmitButton
               disabled={submitting}
+              busy={submitting}
               label={submitting ? "Processing…" : "Pay by Card"}
               onSubmit={() => {
                 if (submittingRef.current) return
                 submittingRef.current = true
                 setError(null)
                 setSubmitting(true)
-                showProcessingOverlay()
+                showOverlay()
               }}
               onSubmitError={(msg) => {
                 resetSubmitState()
@@ -619,26 +512,7 @@ export function PayPalAdvancedCard(props: {
             />
           )}
 
-          {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>
-          )}
+          {error && <ErrorBanner>{error}</ErrorBanner>}
         </div>
       </PayPalCardFieldsProvider>
     </div>

package/src/components/PayPalPaymentSection.tsx

@@ -16,13 +16,12 @@ export {
   isPayPalProviderId,
 }
 
-const SPIN_STYLE = `@keyframes _pp_section_spin { to { transform: rotate(360deg) } }`
+import { AnimationStyles } from "./internal/ui"
 
 function SessionInitCard() {
   return (
     <div
       role="status"
-      aria-label="Setting up payment"
       style={{
         display: "flex",
         alignItems: "center",
@@ -34,15 +33,16 @@ function SessionInitCard() {
         borderRadius: 10,
       }}
     >
-      <style>{SPIN_STYLE}</style>
+      <AnimationStyles />
       <div
+        className="_pp-spin-sm"
+        aria-hidden="true"
         style={{
           width: 20,
           height: 20,
           borderRadius: "50%",
           border: "2.5px solid #e5e7eb",
           borderTopColor: "#0070ba",
-          animation: "_pp_section_spin .7s linear infinite",
           flexShrink: 0,
         }}
       />
@@ -58,10 +58,17 @@ export type PayPalPaymentSectionProps = {
   selectedProviderId: string | null | undefined
   baseUrl: string
   publishableApiKey?: string
+  /** Forwarded to every API call — see `HttpOptions.credentials`. */
+  credentials?: RequestCredentials
+  /**
+   * The cart's currency code (e.g. "usd"). Recommended: busts the config
+   * cache when the buyer switches region/currency on the same cart.
+   */
+  currencyCode?: string
   sessionLoading?: boolean
-  onSuccess?: (cartId: string) => void
+  onSuccess?: (cartId: string) => void | Promise<void>
   onError?: (message: string) => void
-  onPaid?: (result: unknown) => void
+  onPaid?: (result: unknown) => void | Promise<void>
 }
 
 /**
@@ -77,6 +84,8 @@ export function PayPalPaymentSection({
   selectedProviderId,
   baseUrl,
   publishableApiKey,
+  credentials,
+  currencyCode,
   sessionLoading = false,
   onSuccess,
   onError,
@@ -91,6 +100,8 @@ export function PayPalPaymentSection({
       selectedProviderId={selectedProviderId}
       baseUrl={baseUrl}
       publishableApiKey={publishableApiKey}
+      credentials={credentials}
+      currencyCode={currencyCode}
       onSuccess={onSuccess}
       onError={onError}
       onPaid={onPaid}

package/src/components/PayPalProvider.tsx

@@ -5,7 +5,10 @@ import { PayPalScriptProvider } from "@paypal/react-paypal-js"
 import type { ReactPayPalScriptOptions } from "@paypal/react-paypal-js"
 import type { PayPalConfig } from "../client/types"
 
-const BN_CODE = "MBJTechnolabs_SI_SPB"
+// "MBJ_Medusa_SI" is the Medusa-platform BN code PayPal assigned on 2026-10-06
+// (replacing "MBJTechnolabs_SI_SPB"). Must stay in sync with the backend's
+// PAYPAL_PARTNER_ATTRIBUTION_ID so SDK and REST attribution match.
+const BN_CODE = "MBJ_Medusa_SI"
 
 export function PayPalProvider(props: {
   config: PayPalConfig