@easypayment/medusa-payment-paypal 0.9.22 → 0.9.25

package/src/admin/routes/settings/paypal/connection/page.tsx

@@ -36,16 +36,11 @@ declare global {
 
 
 const SERVICE_URL = "/admin/paypal/onboarding-link"
-// PayPal's conventional mini-browser window name; also used as the anchor's
-// `target` so partner.js opens the flow in a popup.
+// PayPal's conventional mini-browser window name (also the anchor target).
 const POPUP_NAME = "PPFrame"
 
-// The onboarding link is cached in the browser for 6 hours. This is the heart of
-// the integration: partner.js can only wire the mini-browser + completion
-// callback if the anchor already carries a valid onboarding href when partner.js
-// initializes. By caching the link (and reloading once to populate the cache on
-// a cold start) the link is always present on page load, so partner.js can take
-// over the click and run its flow exactly as documented.
+// The onboarding link is cached in the browser for 6 hours so it is always
+// present for the mini-browser flow without regenerating on every load.
 const CACHE_PREFIX = "pp_onboard_cache"
 const CACHE_EXPIRY = 6 * 60 * 60 * 1000 // 6 hours
 
@@ -57,9 +52,6 @@ const ENVIRONMENT_ENDPOINT = "/admin/paypal/environment"
 
 type Env = "sandbox" | "live"
 
-// Onboarding URLs are environment-specific, so the cache is keyed per
-// environment — a single shared key let a stale sandbox URL leak into the live
-// flow (and vice-versa).
 const cacheKeyFor = (env: Env) => `${CACHE_PREFIX}_${env}`
 
 function readCachedUrl(env: Env): string | null {
@@ -81,8 +73,6 @@ function readCachedUrl(env: Env): string | null {
   return null
 }
 
-// Returns true only if the value was actually persisted (storage enabled), which
-// lets the caller decide whether reloading to pick up the cache is safe.
 function writeCachedUrl(env: Env, url: string): boolean {
   try {
     localStorage.setItem(cacheKeyFor(env), JSON.stringify({ url, ts: Date.now() }))
@@ -105,22 +95,82 @@ function clearCachedUrl(env?: Env) {
   }
 }
 
+function isPayPalOrigin(origin: string): boolean {
+  try {
+    const host = new URL(origin).hostname.toLowerCase()
+    return (
+      host === "www.paypal.com" ||
+      host === "www.sandbox.paypal.com" ||
+      host.endsWith(".paypal.com") ||
+      host.endsWith(".paypalobjects.com")
+    )
+  } catch {
+    return false
+  }
+}
+
+// Defensively pull authCode/sharedId out of whatever shape PayPal posts back
+// (object, JSON string, or query string; possibly nested). We only act when both
+// are present, which ignores the many unrelated intermediate messages PayPal
+// emits.
+function extractAuth(data: unknown): { authCode?: string; sharedId?: string } {
+  if (!data) return {}
+
+  if (typeof data === "object") {
+    const obj = data as Record<string, any>
+    const authCode = obj.authCode ?? obj.auth_code ?? obj.authcode ?? obj.code
+    const sharedId = obj.sharedId ?? obj.shared_id ?? obj.sharedid
+    if (authCode && sharedId) {
+      return { authCode: String(authCode), sharedId: String(sharedId) }
+    }
+    for (const key of ["data", "payload", "message", "detail", "body", "params"]) {
+      if (obj[key] && typeof obj[key] === "object") {
+        const inner = extractAuth(obj[key])
+        if (inner.authCode && inner.sharedId) return inner
+      }
+      if (typeof obj[key] === "string") {
+        const inner = extractAuth(obj[key])
+        if (inner.authCode && inner.sharedId) return inner
+      }
+    }
+    return {}
+  }
+
+  if (typeof data === "string") {
+    const s = data.trim()
+    if (!s) return {}
+    if (s.startsWith("{") || s.startsWith("[")) {
+      try {
+        return extractAuth(JSON.parse(s))
+      } catch {
+        /* not JSON */
+      }
+    }
+    if (/auth_?code/i.test(s) && /shared_?id/i.test(s)) {
+      try {
+        const sp = new URLSearchParams(s.replace(/^[?#]/, ""))
+        const authCode = sp.get("authCode") || sp.get("auth_code") || undefined
+        const sharedId = sp.get("sharedId") || sp.get("shared_id") || undefined
+        if (authCode && sharedId) return { authCode, sharedId }
+      } catch {
+        /* not a query string */
+      }
+    }
+  }
+
+  return {}
+}
+
 
 export default function PayPalConnectionPage() {
   const [env, setEnv] = useState<Env>("live")
-  // We must know the server's environment before generating/looking up a link so
-  // the per-environment cache and the generated link always match.
   const [envReady, setEnvReady] = useState(false)
 
   const [connState, setConnState] = useState<
     "loading" | "ready" | "connected" | "error"
   >("loading")
-  // True once partner.js has loaded and bound its click interceptor to the
-  // button. The button stays in the DOM but is not clickable until then, so a
-  // click can never fall through to the native anchor (which would open a tab
-  // without partner.js's onboarding flow / completion callback).
-  const [partnerReady, setPartnerReady] = useState(false)
   const [error, setError] = useState<string | null>(null)
+  const [popupBlocked, setPopupBlocked] = useState(false)
   const [finalUrl, setFinalUrl] = useState<string>("")
   const [showManual, setShowManual] = useState(false)
   const [clientId, setClientId] = useState("")
@@ -134,15 +184,22 @@ export default function PayPalConnectionPage() {
   const [onboardingInProgress, setOnboardingInProgress] = useState(false)
 
   const initLoaderRef = useRef<HTMLDivElement>(null)
+  const paypalButtonRef = useRef<HTMLAnchorElement | null>(null)
   const errorLogRef = useRef<HTMLDivElement>(null)
   const runIdRef = useRef(0)
   const currentRunId = useRef(0)
 
   const envRef = useRef<Env>(env)
   envRef.current = env
-
-  // Guards against partner.js's bridge invoking the completion callback more
-  // than once.
+  const finalUrlRef = useRef(finalUrl)
+  finalUrlRef.current = finalUrl
+  const connStateRef = useRef(connState)
+  connStateRef.current = connState
+  const inProgressRef = useRef(onboardingInProgress)
+  inProgressRef.current = onboardingInProgress
+
+  const popupRef = useRef<Window | null>(null)
+  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null)
   const completedRef = useRef(false)
 
   const ppBtnMeasureRef = useRef<HTMLAnchorElement | null>(null)
@@ -157,17 +214,161 @@ export default function PayPalConnectionPage() {
     setError(msg)
   }, [])
 
-  // Generate a fresh onboarding link, cache it for 6 hours, then reload the page
-  // so that on the next load the cached link is already present for partner.js.
-  // If browser storage is unavailable we fall back to using the link in-place
-  // (no reload) so we can never get stuck in a reload loop.
+  const stopPoll = useCallback(() => {
+    if (pollRef.current) {
+      clearInterval(pollRef.current)
+      pollRef.current = null
+    }
+  }, [])
+
+  // Open PayPal's mini-browser ourselves, synchronously inside the click gesture.
+  // This is the only reliable way to get a popup (rather than a new tab, which is
+  // what happens when partner.js's asynchronous open misses the user-activation
+  // window). Named POPUP_NAME and sized like PayPal's mini-browser.
+  const openOnboardingPopup = useCallback((url: string): Window | null => {
+    const w = 450
+    const h = 600
+    const baseLeft =
+      typeof window.screenX === "number" ? window.screenX : (window as any).screenLeft || 0
+    const baseTop =
+      typeof window.screenY === "number" ? window.screenY : (window as any).screenTop || 0
+    const outerW = window.outerWidth || document.documentElement.clientWidth || 1024
+    const outerH = window.outerHeight || document.documentElement.clientHeight || 768
+    const left = Math.round(baseLeft + Math.max(0, (outerW - w) / 2))
+    const top = Math.round(baseTop + Math.max(0, (outerH - h) / 2))
+    const features = `popup=yes,width=${w},height=${h},left=${left},top=${top},scrollbars=yes,resizable=yes`
+
+    let popup: Window | null = null
+    try {
+      popup = window.open(url, POPUP_NAME, features)
+    } catch {
+      popup = null
+    }
+    if (popup) {
+      popupRef.current = popup
+      try {
+        popup.focus()
+      } catch {
+        /* ignore */
+      }
+    }
+    return popup
+  }, [])
+
+  // Exchange authCode/sharedId for seller credentials. Idempotent so the multiple
+  // completion signals (our message listener, partner.js's bridge, the status
+  // poll) only run it once.
+  const completeOnboarding = useCallback(
+    async (authCode: string, sharedId: string) => {
+      if (!authCode || !sharedId) return
+      if (completedRef.current) return
+      completedRef.current = true
+
+      stopPoll()
+      try {
+        window.onbeforeunload = null
+      } catch {}
+
+      const activeEnv: Env = envRef.current === "sandbox" ? "sandbox" : "live"
+
+      setOnboardingInProgress(true)
+      setConnState("loading")
+      setError(null)
+      setPopupBlocked(false)
+
+      try {
+        const res = await fetch(ONBOARDING_COMPLETE_ENDPOINT, {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          credentials: "include",
+          body: JSON.stringify({ authCode, sharedId, env: activeEnv }),
+        })
+
+        if (!res.ok) {
+          const txt = await res.text().catch(() => "")
+          throw new Error(txt || `Onboarding exchange failed (${res.status})`)
+        }
+
+        try {
+          popupRef.current?.close()
+        } catch {}
+        try {
+          const close1 = window.PAYPAL?.apps?.Signup?.MiniBrowser?.closeFlow
+          if (typeof close1 === "function") close1()
+        } catch {}
+        try {
+          const close2 =
+            window.PAYPAL?.apps?.Signup?.miniBrowser &&
+            (window.PAYPAL.apps.Signup.miniBrowser as any).closeFlow
+          if (typeof close2 === "function") close2()
+        } catch {}
+
+        clearCachedUrl(activeEnv)
+
+        try {
+          const statusRes = await fetch(`${STATUS_ENDPOINT}?environment=${activeEnv}`, {
+            method: "GET",
+            credentials: "include",
+          })
+          const refreshedStatus = await statusRes.json().catch(() => ({}))
+          setStatusInfo(refreshedStatus || null)
+        } catch {}
+
+        setConnState("connected")
+        setShowManual(false)
+      } catch (e: any) {
+        completedRef.current = false
+        console.error(e)
+        setConnState("error")
+        setError(e?.message || "Exchange failed while saving credentials.")
+      } finally {
+        setOnboardingInProgress(false)
+      }
+    },
+    [stopPoll]
+  )
+
+  // After the popup is opened, poll the server. If the credentials get saved by
+  // any completion path, the status flips to "connected" and we sync the UI even
+  // if a message was missed.
+  const startStatusPoll = useCallback(() => {
+    stopPoll()
+    let ticks = 0
+    pollRef.current = setInterval(async () => {
+      ticks += 1
+      if (completedRef.current || ticks > 150 /* ~5 min */) {
+        stopPoll()
+        return
+      }
+      try {
+        const r = await fetch(`${STATUS_ENDPOINT}?environment=${envRef.current}`, {
+          method: "GET",
+          credentials: "include",
+        })
+        const st = await r.json().catch(() => ({}))
+        if (st?.status === "connected" && st?.seller_client_id_present === true) {
+          completedRef.current = true
+          stopPoll()
+          try {
+            popupRef.current?.close()
+          } catch {}
+          clearCachedUrl(envRef.current)
+          setStatusInfo(st)
+          setConnState("connected")
+          setShowManual(false)
+          setOnboardingInProgress(false)
+        }
+      } catch {
+        /* keep polling */
+      }
+    }, 2000)
+  }, [stopPoll])
+
   const generateLinkAndReload = useCallback(
     async (targetEnv: Env, runId: number) => {
       if (initLoaderRef.current) {
         const loaderText = initLoaderRef.current.querySelector("#loader-text")
-        if (loaderText) {
-          loaderText.textContent = "Generating onboarding session..."
-        }
+        if (loaderText) loaderText.textContent = "Generating onboarding session..."
       }
 
       try {
@@ -193,16 +394,11 @@ export default function PayPalConnectionPage() {
           href + (href.includes("?") ? "&" : "?") + "displayMode=minibrowser"
 
         const persisted = writeCachedUrl(targetEnv, url)
-
         if (persisted) {
-          // The cache survived; reload so the link is present at first render and
-          // partner.js initializes against it. The post-reload load finds the
-          // cache (no regeneration), so this can't loop.
           window.location.reload()
           return
         }
 
-        // Storage disabled — use the link directly without reloading.
         setFinalUrl(url)
         setConnState("ready")
       } catch {
@@ -231,11 +427,7 @@ export default function PayPalConnectionPage() {
     }
   }, [])
 
-  // Page-load flow:
-  //   1. If already connected, show the connected state.
-  //   2. Else if a valid cached link exists, use it (partner.js will bind it).
-  //   3. Else generate a link, cache it for 6h, and reload so the cached link is
-  //      present for partner.js on the next load.
+  // Page-load flow: connected? -> cached link? -> else generate + cache + reload.
   useEffect(() => {
     if (!envReady) return
 
@@ -248,6 +440,7 @@ export default function PayPalConnectionPage() {
     const run = async () => {
       setConnState("loading")
       setError(null)
+      setPopupBlocked(false)
       setFinalUrl("")
 
       try {
@@ -292,12 +485,9 @@ export default function PayPalConnectionPage() {
     }
   }, [env, envReady, generateLinkAndReload])
 
-  // Load partner.js once the anchor exists with its real (cached) href, then run
-  // PayPal's initializer. In a React SPA partner.js's own DOMContentLoaded hook
-  // already fired before this route mounted, so we must call init()/render()
-  // ourselves for it to discover the button and take over the click into the
-  // mini-browser — opening the popup, and wiring its postMessage bridge that
-  // invokes window.onboardingCallback and closes the popup on completion.
+  // Load partner.js + init for its postMessage->onboardingCallback bridge (a
+  // secondary completion path next to our own message listener). We open the
+  // popup ourselves, so partner.js is NOT relied on to open the window.
   useEffect(() => {
     if (connState !== "ready" || !finalUrl) return
 
@@ -305,19 +495,6 @@ export default function PayPalConnectionPage() {
     let cancelled = false
     let pollTimer: ReturnType<typeof setTimeout> | undefined
 
-    // The button is gated on partnerReady; reset it for this (re)load.
-    setPartnerReady(false)
-
-    // Safety net: if partner.js can't load (e.g. blocked), enable the button
-    // anyway after a few seconds rather than leaving it permanently disabled.
-    const readyFallback = setTimeout(() => {
-      if (!cancelled) setPartnerReady(true)
-    }, 6000)
-
-    const markReady = () => {
-      if (!cancelled) setPartnerReady(true)
-    }
-
     const initPartner = (attempt = 0) => {
       if (cancelled) return
 
@@ -335,35 +512,25 @@ export default function PayPalConnectionPage() {
         } catch (e) {
           console.error("[paypal] partner.js init failed:", e)
         }
-        markReady()
         return
       }
-
       if (typeof signup?.render === "function") {
         try {
           signup.render()
         } catch (e) {
           console.error("[paypal] partner.js render failed:", e)
         }
-        markReady()
         return
       }
-
-      // The namespace may not be populated the instant onload fires; retry
-      // briefly before giving up.
       if (attempt < 40) {
         pollTimer = setTimeout(() => initPartner(attempt + 1), 50)
         return
       }
-
       try {
         document.dispatchEvent(new Event("DOMContentLoaded"))
       } catch {}
-      markReady()
     }
 
-    // Remove any stale copy + namespace so the fresh load re-registers against
-    // the current environment (sandbox vs live partner.js differ).
     const existingScript = document.getElementById("paypal-partner-js")
     if (existingScript) {
       existingScript.parentNode?.removeChild(existingScript)
@@ -379,88 +546,76 @@ export default function PayPalConnectionPage() {
     ppScript.src = scriptUrl
     ppScript.async = true
     ppScript.onload = () => initPartner()
-    ppScript.onerror = () => markReady()
     document.body.appendChild(ppScript)
 
     return () => {
       cancelled = true
-      clearTimeout(readyFallback)
-      if (pollTimer) {
-        clearTimeout(pollTimer)
-      }
-      if (ppScript.parentNode) {
-        ppScript.parentNode.removeChild(ppScript)
-      }
+      if (pollTimer) clearTimeout(pollTimer)
+      if (ppScript.parentNode) ppScript.parentNode.removeChild(ppScript)
     }
   }, [connState, finalUrl, env])
 
-  // partner.js calls this (by the name in data-paypal-onboard-complete) when the
-  // seller finishes onboarding, passing the authCode + sharedId to exchange for
-  // seller credentials.
-  const completeOnboarding = useCallback(async (authCode: string, sharedId: string) => {
-    if (!authCode || !sharedId) return
-    if (completedRef.current) return
-    completedRef.current = true
-
-    try {
-      window.onbeforeunload = null
-    } catch {}
-
-    const activeEnv: Env = envRef.current === "sandbox" ? "sandbox" : "live"
-
-    setOnboardingInProgress(true)
-    setConnState("loading")
-    setError(null)
-
-    try {
-      const res = await fetch(ONBOARDING_COMPLETE_ENDPOINT, {
-        method: "POST",
-        headers: { "content-type": "application/json" },
-        credentials: "include",
-        body: JSON.stringify({ authCode, sharedId, env: activeEnv }),
-      })
-
-      if (!res.ok) {
-        const txt = await res.text().catch(() => "")
-        throw new Error(txt || `Onboarding exchange failed (${res.status})`)
-      }
-
-      // Close the partner.js mini-browser.
-      try {
-        const close1 = window.PAYPAL?.apps?.Signup?.MiniBrowser?.closeFlow
-        if (typeof close1 === "function") close1()
-      } catch {}
+  // PRIMARY completion path: receive PayPal's onboarding postMessage ourselves.
+  // The diagnostic log lets us confirm the exact origin/shape PayPal sends in a
+  // real run if a tweak to the parser is ever needed.
+  useEffect(() => {
+    const onMessage = (ev: MessageEvent) => {
+      let serialized = ""
       try {
-        const close2 =
-          window.PAYPAL?.apps?.Signup?.miniBrowser &&
-          (window.PAYPAL.apps.Signup.miniBrowser as any).closeFlow
-        if (typeof close2 === "function") close2()
-      } catch {}
+        serialized =
+          typeof ev.data === "string" ? ev.data : JSON.stringify(ev.data)
+      } catch {
+        serialized = String(ev.data)
+      }
 
-      // The link has been consumed; drop it so a future flow regenerates one.
-      clearCachedUrl(activeEnv)
+      const looksRelevant =
+        isPayPalOrigin(ev.origin) ||
+        /auth_?code|shared_?id|onboard|merchantId/i.test(serialized || "")
+
+      if (looksRelevant) {
+        // eslint-disable-next-line no-console
+        console.info(
+          "[PayPal onboarding] message from",
+          ev.origin,
+          "·",
+          (serialized || "").slice(0, 500)
+        )
+      }
 
-      try {
-        const statusRes = await fetch(`${STATUS_ENDPOINT}?environment=${activeEnv}`, {
-          method: "GET",
-          credentials: "include",
-        })
-        const refreshedStatus = await statusRes.json().catch(() => ({}))
-        setStatusInfo(refreshedStatus || null)
-      } catch {}
+      // TERTIARY completion path: our own return_url bridge page (served by
+      // GET /store/paypal/onboard-return) posts this from inside the popup when
+      // PayPal redirects there at the end of onboarding. It runs on our backend
+      // origin (not paypal.com), so it is handled before the PayPal-origin gate
+      // below. It guarantees the popup is closed and the status is re-checked even
+      // if every PayPal postMessage was missed.
+      const d = ev.data as any
+      if (d && typeof d === "object" && d.source === "paypal-onboarding-return") {
+        try {
+          popupRef.current?.close()
+        } catch {}
+        const fromReturn = extractAuth(d.params)
+        if (fromReturn.authCode && fromReturn.sharedId) {
+          completeOnboarding(fromReturn.authCode, fromReturn.sharedId)
+        } else if (!completedRef.current) {
+          // No authCode/sharedId on the return URL (the usual case): credentials
+          // are exchanged via the postMessage/onboardingCallback path. Poll the
+          // server so the UI flips to "connected" as soon as that lands.
+          startStatusPoll()
+        }
+        return
+      }
 
-      setConnState("connected")
-      setShowManual(false)
-    } catch (e: any) {
-      completedRef.current = false
-      console.error(e)
-      setConnState("error")
-      setError(e?.message || "Exchange failed while saving credentials.")
-    } finally {
-      setOnboardingInProgress(false)
+      if (!isPayPalOrigin(ev.origin)) return
+      const { authCode, sharedId } = extractAuth(ev.data)
+      if (authCode && sharedId) {
+        completeOnboarding(authCode, sharedId)
+      }
     }
-  }, [])
+    window.addEventListener("message", onMessage)
+    return () => window.removeEventListener("message", onMessage)
+  }, [completeOnboarding, startStatusPoll])
 
+  // SECONDARY completion path: partner.js's bridge calls this by name.
   useLayoutEffect(() => {
     window.onboardingCallback = (authCode: string, sharedId: string) => {
       completeOnboarding(authCode, sharedId)
@@ -470,6 +625,57 @@ export default function PayPalConnectionPage() {
     }
   }, [completeOnboarding])
 
+  // Capture-phase opener: runs before partner.js and opens the popup
+  // synchronously inside the user gesture so the mini-browser reliably opens as a
+  // popup (never a blocked window or a new tab). We open it under PayPal's
+  // conventional window name (POPUP_NAME / "PPFrame"); because partner.js also
+  // targets that same name, letting its click handler run next makes it *adopt*
+  // this very window instead of opening a second one. That adoption is what lets
+  // partner.js receive PayPal's completion postMessage, invoke onboardingCallback
+  // and auto-close the popup.
+  //
+  // IMPORTANT: we only preventDefault() (to stop the native anchor from opening a
+  // new tab) and deliberately DO NOT stopImmediatePropagation(): stopping it was
+  // what previously prevented partner.js from tracking the window, which broke
+  // onboarding completion (the popup never closed and credentials were never
+  // exchanged).
+  useEffect(() => {
+    const onCaptureClick = (e: MouseEvent) => {
+      const btn = paypalButtonRef.current
+      if (!btn) return
+      const target = e.target as Node | null
+      if (!target || !btn.contains(target)) return
+
+      // Stop the native anchor navigation only. Let the event keep propagating so
+      // partner.js's own click handler still runs and adopts our popup window.
+      e.preventDefault()
+
+      if (
+        connStateRef.current !== "ready" ||
+        !finalUrlRef.current ||
+        inProgressRef.current
+      ) {
+        return
+      }
+
+      completedRef.current = false
+      const popup = openOnboardingPopup(finalUrlRef.current)
+      if (!popup) {
+        setPopupBlocked(true)
+        return
+      }
+      setPopupBlocked(false)
+      startStatusPoll()
+    }
+
+    document.addEventListener("click", onCaptureClick, true)
+    return () => document.removeEventListener("click", onCaptureClick, true)
+  }, [openOnboardingPopup, startStatusPoll])
+
+  useEffect(() => {
+    return () => stopPoll()
+  }, [stopPoll])
+
   useLayoutEffect(() => {
     const el = ppBtnMeasureRef.current
     if (!el) return
@@ -495,6 +701,12 @@ export default function PayPalConnectionPage() {
     }
   }, [connState, env, finalUrl])
 
+  // Defensive: the capture listener handles the click; this just guarantees the
+  // native href can never navigate.
+  const handleConnectClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    e.preventDefault()
+  }
+
   const handleSaveManual = async () => {
     if (!canSaveManual || onboardingInProgress) return
     setOnboardingInProgress(true)
@@ -565,8 +777,6 @@ export default function PayPalConnectionPage() {
       clearCachedUrl(env)
       completedRef.current = false
 
-      // Generate a fresh link for the now-disconnected environment and reload so
-      // the onboarding button is ready again.
       currentRunId.current = ++runIdRef.current
       await generateLinkAndReload(env, currentRunId.current)
     } catch (e: any) {
@@ -584,10 +794,9 @@ export default function PayPalConnectionPage() {
 
     completedRef.current = false
     clearCachedUrl()
+    setPopupBlocked(false)
     setConnState("loading")
 
-    // Persist the environment BEFORE switching local state so the post-reload
-    // GET /environment returns the same value the cache was keyed under.
     try {
       await fetch(ENVIRONMENT_ENDPOINT, {
         method: "POST",
@@ -676,12 +885,9 @@ export default function PayPalConnectionPage() {
                   </div>
 
                   <div className={`${connState === "ready" ? "block" : "hidden"}`}>
-                    {/* Standard PayPal partner onboarding button. partner.js binds
-                        this anchor (it carries the cached onboarding href) and
-                        takes over the click into the mini-browser; on completion
-                        it calls window.onboardingCallback. */}
                     <a
                       ref={(node) => {
+                        paypalButtonRef.current = node
                         ppBtnMeasureRef.current = node
                       }}
                       id="paypal-button"
@@ -689,26 +895,24 @@ export default function PayPalConnectionPage() {
                       data-paypal-button="true"
                       href={finalUrl || "#"}
                       data-paypal-onboard-complete="onboardingCallback"
-                      aria-disabled={onboardingInProgress || !partnerReady}
+                      onClick={handleConnectClick}
                       className="transition-fg relative inline-flex w-fit items-center justify-center overflow-hidden rounded-md outline-none no-underline shadow-buttons-neutral text-ui-fg-base bg-ui-button-neutral after:transition-fg after:absolute after:inset-0 after:content-[''] after:button-neutral-gradient hover:bg-ui-button-neutral-hover hover:after:button-neutral-hover-gradient active:bg-ui-button-neutral-pressed active:after:button-neutral-pressed-gradient focus-visible:shadow-buttons-neutral-focus disabled:bg-ui-bg-disabled disabled:border-ui-border-base disabled:text-ui-fg-disabled disabled:shadow-buttons-neutral disabled:after:hidden txt-compact-small-plus px-3 py-1.5"
                       style={{
-                        cursor:
-                          onboardingInProgress || !partnerReady
-                            ? "not-allowed"
-                            : "pointer",
-                        opacity: onboardingInProgress || !partnerReady ? 0.6 : 1,
-                        // Keep the anchor mounted (partner.js must find it to bind)
-                        // but un-clickable until partner.js has taken over the
-                        // click — so it can never open a tab via the native href.
-                        pointerEvents:
-                          onboardingInProgress || !partnerReady ? "none" : "auto",
+                        cursor: onboardingInProgress ? "not-allowed" : "pointer",
+                        opacity: onboardingInProgress ? 0.6 : 1,
+                        pointerEvents: onboardingInProgress ? "none" : "auto",
                       }}
                     >
-                      {partnerReady || onboardingInProgress
-                        ? "Connect to PayPal"
-                        : "Preparing PayPal…"}
+                      Connect to PayPal
                     </a>
 
+                    {popupBlocked && (
+                      <div className="mt-3 text-left text-xs bg-amber-50 text-amber-700 p-3 border border-amber-200 rounded">
+                        Your browser blocked the PayPal popup. Please allow popups
+                        for this site, then click “Connect to PayPal” again.
+                      </div>
+                    )}
+
                     <div
                       className="mt-2"
                       style={{