@easypayment/medusa-payment-paypal 0.9.21 → 0.9.24

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

@@ -36,18 +36,13 @@ declare global {
 
 
 const SERVICE_URL = "/admin/paypal/onboarding-link"
-// We open the mini-browser popup ourselves, synchronously inside the click
-// gesture (see openOnboardingPopup) — the only reliable way to get a popup
-// rather than a blocked window or a new tab. The window name matches the
-// anchor's `target` and PayPal's conventional "PPFrame": partner.js opens the
-// flow with `window.open(url, target, ...)`, so when it runs right after us it
-// *reuses this already-open window* (a named-window navigation needs no user
-// activation) instead of trying — and failing, asynchronously — to spawn its
-// own. That lets partner.js still wire its completion bridge without ever
-// opening a second/late window.
+// 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 so it is always
+// present for the mini-browser flow without regenerating on every load.
 const CACHE_PREFIX = "pp_onboard_cache"
-const CACHE_EXPIRY = 10 * 60 * 1000
+const CACHE_EXPIRY = 6 * 60 * 60 * 1000 // 6 hours
 
 const ONBOARDING_COMPLETE_ENDPOINT = "/admin/paypal/onboard-complete"
 const STATUS_ENDPOINT = "/admin/paypal/status"
@@ -57,9 +52,6 @@ const ENVIRONMENT_ENDPOINT = "/admin/paypal/environment"
 
 type Env = "sandbox" | "live"
 
-// Onboarding URLs are environment-specific and short-lived, so the cache must be
-// keyed per environment — a single shared key let a stale sandbox URL leak into
-// the live flow (and vice-versa) after a reload.
 const cacheKeyFor = (env: Env) => `${CACHE_PREFIX}_${env}`
 
 function readCachedUrl(env: Env): string | null {
@@ -81,11 +73,12 @@ function readCachedUrl(env: Env): string | null {
   return null
 }
 
-function writeCachedUrl(env: Env, url: string) {
+function writeCachedUrl(env: Env, url: string): boolean {
   try {
     localStorage.setItem(cacheKeyFor(env), JSON.stringify({ url, ts: Date.now() }))
+    return readCachedUrl(env) === url
   } catch {
-    /* ignore quota / disabled storage */
+    return false
   }
 }
 
@@ -102,9 +95,6 @@ function clearCachedUrl(env?: Env) {
   }
 }
 
-// PayPal delivers the seamless-onboarding result by posting a message to
-// window.opener. We validate the sender is actually a PayPal origin before
-// trusting authCode/sharedId.
 function isPayPalOrigin(origin: string): boolean {
   try {
     const host = new URL(origin).hostname.toLowerCase()
@@ -119,25 +109,29 @@ function isPayPalOrigin(origin: string): boolean {
   }
 }
 
-// The completion message shape is not strongly documented, so extract
-// authCode/sharedId defensively from objects, JSON strings, or query strings.
-// We only ever act when BOTH values are present, which keeps the many unrelated
-// intermediate postMessages PayPal emits from triggering a false completion.
+// 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
+    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"]) {
+    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 {}
   }
@@ -145,7 +139,7 @@ function extractAuth(data: unknown): { authCode?: string; sharedId?: string } {
   if (typeof data === "string") {
     const s = data.trim()
     if (!s) return {}
-    if (s.startsWith("{")) {
+    if (s.startsWith("{") || s.startsWith("[")) {
       try {
         return extractAuth(JSON.parse(s))
       } catch {
@@ -170,9 +164,6 @@ function extractAuth(data: unknown): { authCode?: string; sharedId?: string } {
 
 export default function PayPalConnectionPage() {
   const [env, setEnv] = useState<Env>("live")
-  // We must not generate/fetch an onboarding link until we know which
-  // environment the server is actually on, otherwise the first fetch races the
-  // GET /environment response and can target the wrong environment.
   const [envReady, setEnvReady] = useState(false)
 
   const [connState, setConnState] = useState<
@@ -198,21 +189,17 @@ export default function PayPalConnectionPage() {
   const runIdRef = useRef(0)
   const currentRunId = useRef(0)
 
-  // Live mirrors of state so the document-level capture click listener (set up
-  // once) and the stable completion callback always see current values.
+  const envRef = useRef<Env>(env)
+  envRef.current = env
   const finalUrlRef = useRef(finalUrl)
   finalUrlRef.current = finalUrl
   const connStateRef = useRef(connState)
   connStateRef.current = connState
   const inProgressRef = useRef(onboardingInProgress)
   inProgressRef.current = onboardingInProgress
-  const envRef = useRef<Env>(env)
-  envRef.current = env
 
   const popupRef = useRef<Window | null>(null)
-  const popupPollRef = useRef<ReturnType<typeof setInterval> | null>(null)
-  // Guards against the two redundant completion paths (our own message listener
-  // and partner.js's onboardingCallback bridge) both POSTing the same result.
+  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null)
   const completedRef = useRef(false)
 
   const ppBtnMeasureRef = useRef<HTMLAnchorElement | null>(null)
@@ -227,76 +214,60 @@ export default function PayPalConnectionPage() {
     setError(msg)
   }, [])
 
-  const stopPopupPoll = useCallback(() => {
-    if (popupPollRef.current) {
-      clearInterval(popupPollRef.current)
-      popupPollRef.current = null
+  const stopPoll = useCallback(() => {
+    if (pollRef.current) {
+      clearInterval(pollRef.current)
+      pollRef.current = null
     }
   }, [])
 
-  // Open the PayPal mini-browser ourselves, synchronously, inside the click
-  // gesture. This is the crux of the fix: browsers only render window.open() as
-  // a real popup (instead of a tab — or blocking it) when it runs synchronously
-  // in a user gesture. Because finalUrl is already in state at click time, we
-  // never need an await before opening, and we never depend on winning a race
-  // with partner.js's asynchronous click binding.
-  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
+  // 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 = window.open(url, POPUP_NAME, features)
+        popup.focus()
       } catch {
-        popup = null
-      }
-
-      if (popup) {
-        popupRef.current = popup
-        try {
-          popup.focus()
-        } catch {
-          /* ignore */
-        }
-        stopPopupPoll()
-        popupPollRef.current = setInterval(() => {
-          if (!popupRef.current || popupRef.current.closed) {
-            stopPopupPoll()
-          }
-        }, 1000)
+        /* ignore */
       }
+    }
+    return popup
+  }, [])
 
-      return popup
-    },
-    [stopPopupPoll]
-  )
-
-  // Exchange the seller authCode/sharedId for credentials. Reached from BOTH
-  // PayPal's partner.js bridge (window.onboardingCallback) and our own postMessage
-  // listener; completedRef makes it idempotent so we only POST once.
+  // 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 {
-        /* ignore */
-      }
+      } catch {}
 
       const activeEnv: Env = envRef.current === "sandbox" ? "sandbox" : "live"
 
@@ -318,45 +289,34 @@ export default function PayPalConnectionPage() {
           throw new Error(txt || `Onboarding exchange failed (${res.status})`)
         }
 
-        // Close the popup we opened, plus any partner.js-managed flow.
         try {
           popupRef.current?.close()
-        } catch {
-          /* ignore */
-        }
-        stopPopupPoll()
+        } catch {}
         try {
           const close1 = window.PAYPAL?.apps?.Signup?.MiniBrowser?.closeFlow
           if (typeof close1 === "function") close1()
-        } catch {
-          /* ignore */
-        }
+        } catch {}
         try {
           const close2 =
             window.PAYPAL?.apps?.Signup?.miniBrowser &&
             (window.PAYPAL.apps.Signup.miniBrowser as any).closeFlow
           if (typeof close2 === "function") close2()
-        } catch {
-          /* ignore */
-        }
+        } catch {}
 
         clearCachedUrl(activeEnv)
 
         try {
-          const statusRes = await fetch(
-            `${STATUS_ENDPOINT}?environment=${activeEnv}`,
-            { method: "GET", credentials: "include" }
-          )
+          const statusRes = await fetch(`${STATUS_ENDPOINT}?environment=${activeEnv}`, {
+            method: "GET",
+            credentials: "include",
+          })
           const refreshedStatus = await statusRes.json().catch(() => ({}))
           setStatusInfo(refreshedStatus || null)
-        } catch {
-          /* ignore — still consider it connected below */
-        }
+        } catch {}
 
         setConnState("connected")
         setShowManual(false)
       } catch (e: any) {
-        // Allow a retry after a failed exchange.
         completedRef.current = false
         console.error(e)
         setConnState("error")
@@ -365,58 +325,91 @@ export default function PayPalConnectionPage() {
         setOnboardingInProgress(false)
       }
     },
-    [stopPopupPoll]
+    [stopPoll]
   )
 
-  const fetchFreshLink = useCallback(
-    (runId: number, targetEnv: Env) => {
+  // 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..."
       }
 
-      fetch(SERVICE_URL, {
-        method: "POST",
-        headers: { "content-type": "application/json" },
-        credentials: "include",
-        body: JSON.stringify({
-          products: ["PPCP"],
-          // Generate the link for the explicitly selected environment so it can
-          // never depend on a racing POST /environment having landed yet.
-          environment: targetEnv,
-        }),
-      })
-        .then((r) => {
-          if (!r.ok) throw new Error(`Service returned ${r.status}`)
-          return r.json()
+      try {
+        const res = await fetch(SERVICE_URL, {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          credentials: "include",
+          body: JSON.stringify({ products: ["PPCP"], environment: targetEnv }),
         })
-        .then((data) => {
-          if (runId !== currentRunId.current) return
 
-          const href = data?.onboarding_url
-          if (!href) {
-            showError("Onboarding URL not returned.")
-            return
-          }
+        if (!res.ok) throw new Error(`Service returned ${res.status}`)
 
-          const url =
-            href + (href.includes("?") ? "&" : "?") + "displayMode=minibrowser"
+        const data = await res.json()
+        if (runId !== currentRunId.current) return
 
-          writeCachedUrl(targetEnv, url)
+        const href = data?.onboarding_url
+        if (!href) {
+          showError("Onboarding URL not returned.")
+          return
+        }
 
-          setFinalUrl(url)
-          setConnState("ready")
-        })
-        .catch(() => {
-          if (runId !== currentRunId.current) return
-          showError("Unable to connect to service.")
-        })
+        const url =
+          href + (href.includes("?") ? "&" : "?") + "displayMode=minibrowser"
+
+        const persisted = writeCachedUrl(targetEnv, url)
+        if (persisted) {
+          window.location.reload()
+          return
+        }
+
+        setFinalUrl(url)
+        setConnState("ready")
+      } catch {
+        if (runId !== currentRunId.current) return
+        showError("Unable to connect to service.")
+      }
     },
     [showError]
   )
 
-  // Resolve the server's current environment before doing anything else.
+  // Resolve the server environment first.
   useEffect(() => {
     let alive = true
     fetch(ENVIRONMENT_ENDPOINT, { method: "GET", credentials: "include" })
@@ -434,14 +427,67 @@ export default function PayPalConnectionPage() {
     }
   }, [])
 
-  // partner.js is loaded ONLY for its postMessage->callback bridge
-  // (window.onboardingCallback), as a redundant path next to our own message
-  // listener below. It is NO LONGER responsible for opening the window — we do
-  // that synchronously in the click handler. We still init it so its message
-  // bridge registers inside this React SPA (its own DOMContentLoaded hook fired
-  // long before this route mounted). If partner.js also intercepts the click,
-  // the shared POPUP_NAME means it re-targets our single popup rather than
-  // opening a second window.
+  // Page-load flow: connected? -> cached link? -> else generate + cache + reload.
+  useEffect(() => {
+    if (!envReady) return
+
+    currentRunId.current = ++runIdRef.current
+    const runId = currentRunId.current
+
+    let cancelled = false
+    completedRef.current = false
+
+    const run = async () => {
+      setConnState("loading")
+      setError(null)
+      setPopupBlocked(false)
+      setFinalUrl("")
+
+      try {
+        const r = await fetch(`${STATUS_ENDPOINT}?environment=${env}`, {
+          method: "GET",
+          credentials: "include",
+        })
+        const st = await r.json().catch(() => ({}))
+
+        if (cancelled || runId !== currentRunId.current) return
+
+        setStatusInfo(st)
+
+        const isConnected =
+          st?.status === "connected" && st?.seller_client_id_present === true
+
+        if (isConnected) {
+          setConnState("connected")
+          setShowManual(false)
+          return
+        }
+      } catch (e) {
+        console.error(e)
+      }
+
+      if (cancelled || runId !== currentRunId.current) return
+
+      const cached = readCachedUrl(env)
+      if (cached) {
+        setFinalUrl(cached)
+        setConnState("ready")
+        return
+      }
+
+      await generateLinkAndReload(env, runId)
+    }
+
+    run()
+
+    return () => {
+      cancelled = true
+    }
+  }, [env, envReady, generateLinkAndReload])
+
+  // 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
 
@@ -462,16 +508,12 @@ export default function PayPalConnectionPage() {
 
       if (target?.init) {
         try {
-          // Wires partner.js's click interceptor + its postMessage->callback
-          // bridge. It will adopt the window we pre-open (same name) rather than
-          // open its own.
           target.init()
         } catch (e) {
           console.error("[paypal] partner.js init failed:", e)
         }
         return
       }
-
       if (typeof signup?.render === "function") {
         try {
           signup.render()
@@ -480,19 +522,15 @@ export default function PayPalConnectionPage() {
         }
         return
       }
-
       if (attempt < 40) {
         pollTimer = setTimeout(() => initPartner(attempt + 1), 50)
         return
       }
-
       try {
         document.dispatchEvent(new Event("DOMContentLoaded"))
       } catch {}
     }
 
-    // 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)
@@ -512,20 +550,38 @@ export default function PayPalConnectionPage() {
 
     return () => {
       cancelled = true
-      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])
 
-  // Primary completion path: receive PayPal's seamless-onboarding postMessage
-  // ourselves. Independent of partner.js, so it works even when we opened the
-  // popup directly.
+  // 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 {
+        serialized =
+          typeof ev.data === "string" ? ev.data : JSON.stringify(ev.data)
+      } catch {
+        serialized = String(ev.data)
+      }
+
+      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)
+        )
+      }
+
       if (!isPayPalOrigin(ev.origin)) return
       const { authCode, sharedId } = extractAuth(ev.data)
       if (authCode && sharedId) {
@@ -536,66 +592,7 @@ export default function PayPalConnectionPage() {
     return () => window.removeEventListener("message", onMessage)
   }, [completeOnboarding])
 
-  // Status check + link generation. Gated on envReady so we always use the
-  // correct environment. runId guards against a stale response from a previous
-  // environment overwriting the current one.
-  useEffect(() => {
-    if (!envReady) return
-
-    currentRunId.current = ++runIdRef.current
-    const runId = currentRunId.current
-
-    let cancelled = false
-    completedRef.current = false
-
-    const run = async () => {
-      setConnState("loading")
-      setError(null)
-      setPopupBlocked(false)
-      setFinalUrl("")
-
-      try {
-        const r = await fetch(`${STATUS_ENDPOINT}?environment=${env}`, {
-          method: "GET",
-          credentials: "include",
-        })
-        const st = await r.json().catch(() => ({}))
-
-        if (cancelled || runId !== currentRunId.current) return
-
-        setStatusInfo(st)
-
-        const isConnected =
-          st?.status === "connected" && st?.seller_client_id_present === true
-
-        if (isConnected) {
-          setConnState("connected")
-          setShowManual(false)
-          return
-        }
-      } catch (e) {
-        console.error(e)
-      }
-
-      if (cancelled || runId !== currentRunId.current) return
-
-      const cached = readCachedUrl(env)
-      if (cached) {
-        setFinalUrl(cached)
-        setConnState("ready")
-      } else {
-        fetchFreshLink(runId, env)
-      }
-    }
-
-    run()
-
-    return () => {
-      cancelled = true
-    }
-  }, [env, envReady, fetchFreshLink])
-
-  // Bridge partner.js's callback into our single idempotent completion handler.
+  // SECONDARY completion path: partner.js's bridge calls this by name.
   useLayoutEffect(() => {
     window.onboardingCallback = (authCode: string, sharedId: string) => {
       completeOnboarding(authCode, sharedId)
@@ -605,12 +602,44 @@ export default function PayPalConnectionPage() {
     }
   }, [completeOnboarding])
 
-  // Clean up the popup poll on unmount.
+  // Capture-phase opener: runs before partner.js, opens the popup synchronously,
+  // and stops partner.js's (unreliable, async) open + the native anchor so we get
+  // exactly one popup and never a new tab.
   useEffect(() => {
-    return () => {
-      stopPopupPoll()
+    const onCaptureClick = (e: MouseEvent) => {
+      const btn = paypalButtonRef.current
+      if (!btn) return
+      const target = e.target as Node | null
+      if (!target || !btn.contains(target)) return
+
+      e.preventDefault()
+      e.stopImmediatePropagation()
+
+      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()
     }
-  }, [stopPopupPoll])
+
+    document.addEventListener("click", onCaptureClick, true)
+    return () => document.removeEventListener("click", onCaptureClick, true)
+  }, [openOnboardingPopup, startStatusPoll])
+
+  useEffect(() => {
+    return () => stopPoll()
+  }, [stopPoll])
 
   useLayoutEffect(() => {
     const el = ppBtnMeasureRef.current
@@ -637,53 +666,8 @@ export default function PayPalConnectionPage() {
     }
   }, [connState, env, finalUrl])
 
-  // Capture-phase click handler — the single, reliable opener.
-  //
-  // It runs on `document` in the CAPTURE phase, i.e. BEFORE the event reaches
-  // the anchor where partner.js binds its own (target-phase) handler. That
-  // ordering is the whole point:
-  //   1. We synchronously open the mini-browser popup here, inside the user
-  //      gesture, so the browser always renders a real popup (never a blocked
-  //      window, never a new tab).
-  //   2. We do NOT stop propagation, so partner.js's handler still runs a beat
-  //      later. Since it opens with the same window name (POPUP_NAME), it adopts
-  //      the window we just opened instead of asynchronously spawning its own
-  //      (which the browser was blocking — "multiple popups ... lack of user
-  //      activation") — and it still wires its postMessage->onboardingCallback
-  //      bridge that auto-closes the popup and saves credentials.
-  //   3. We always preventDefault so the anchor's href can never open a tab.
-  //
-  // Completion is handled by partner.js's bridge AND by our own postMessage
-  // listener (see below), funnelling through one idempotent completeOnboarding.
-  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
-
-      e.preventDefault()
-
-      if (
-        connStateRef.current !== "ready" ||
-        !finalUrlRef.current ||
-        inProgressRef.current
-      ) {
-        return
-      }
-
-      completedRef.current = false
-      const popup = openOnboardingPopup(finalUrlRef.current)
-      setPopupBlocked(!popup)
-    }
-
-    document.addEventListener("click", onCaptureClick, true)
-    return () => document.removeEventListener("click", onCaptureClick, true)
-  }, [openOnboardingPopup])
-
-  // Defensive only: the capture-phase listener above already opened the popup
-  // and prevented the default. If for some reason it didn't run, make sure the
-  // native target still can't open a tab.
+  // Defensive: the capture listener handles the click; this just guarantees the
+  // native href can never navigate.
   const handleConnectClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
     e.preventDefault()
   }
@@ -756,11 +740,10 @@ export default function PayPalConnectionPage() {
       }
 
       clearCachedUrl(env)
-
       completedRef.current = false
+
       currentRunId.current = ++runIdRef.current
-      const runId = currentRunId.current
-      fetchFreshLink(runId, env)
+      await generateLinkAndReload(env, currentRunId.current)
     } catch (e: any) {
       console.error(e)
       setConnState("error")
@@ -772,17 +755,12 @@ export default function PayPalConnectionPage() {
 
   const handleEnvChange = async (e: React.ChangeEvent<HTMLSelectElement>) => {
     const next = e.target.value as Env
+    if (next === env || onboardingInProgress) return
 
     completedRef.current = false
-    setPopupBlocked(false)
-    // Drop both cached URLs so neither environment can serve a stale link.
     clearCachedUrl()
-
-    // Update local state immediately (drives the status/link refetch with the
-    // explicit environment) and persist the choice. Because the link/status
-    // fetches are environment-explicit, correctness no longer depends on this
-    // POST winning a race.
-    setEnv(next)
+    setPopupBlocked(false)
+    setConnState("loading")
 
     try {
       await fetch(ENVIRONMENT_ENDPOINT, {
@@ -792,6 +770,8 @@ export default function PayPalConnectionPage() {
         body: JSON.stringify({ environment: next }),
       })
     } catch {}
+
+    setEnv(next)
   }
 
   return (