@easypayment/medusa-payment-paypal 0.9.4 → 0.9.6

package/src/admin/routes/settings/paypal/additional-settings/page.tsx

@@ -1,38 +1,9 @@
-import React, { useEffect, useRef, useState } from "react"
+import React, { useCallback, useEffect, useRef, useState } from "react"
 import PayPalTabs from "../_components/Tabs"
-
-type AdminFetchOptions = {
-  method?: "GET" | "POST" | "PUT" | "DELETE" | "PATCH"
-  body?: Record<string, unknown>
-  query?: Record<string, string>
-}
-
-async function adminFetch<T = unknown>(path: string, opts: AdminFetchOptions = {}): Promise<T> {
-  const { method = "GET", body, query } = opts
-  let url = path
-  if (query && Object.keys(query).length > 0) {
-    const params = new URLSearchParams(query)
-    url = `${path}?${params.toString()}`
-  }
-  const headers: Record<string, string> = { Accept: "application/json" }
-  if (body !== undefined) headers["Content-Type"] = "application/json"
-  if (typeof window !== "undefined") {
-    const token = (window as any).__medusa__?.token
-    if (token) headers["Authorization"] = `Bearer ${token}`
-  }
-  const res = await fetch(url, {
-    method, headers, credentials: "include",
-    body: body !== undefined ? JSON.stringify(body) : undefined,
-  })
-  const text = await res.text().catch(() => "")
-  if (!res.ok) {
-    if (res.status === 401) throw new Error("Unauthorized (401) - session may have expired. Please reload and log in again.")
-    if (res.status === 403) throw new Error("Forbidden (403) - you do not have permission to perform this action.")
-    throw new Error(text || `Request failed with status ${res.status}`)
-  }
-  if (!text) return {} as T
-  try { return JSON.parse(text) as T } catch { return {} as T }
-}
+import SectionCard from "../_components/SectionCard"
+import FieldRow from "../_components/FieldRow"
+import Toast, { ToastState } from "../_components/Toast"
+import { adminFetch } from "../_utils/adminFetch"
 
 type PaymentAction = "capture" | "authorize"
 type LandingPage = "no_preference" | "login" | "billing"
@@ -53,7 +24,7 @@ const DEFAULT_FORM: AdditionalSettingsForm = {
   landingPage: "no_preference",
   requireInstantPayment: false,
   sendItemDetails: true,
-  invoicePrefix: "WC-",
+  invoicePrefix: "PP-",
   creditCardStatementName: "PayPal",
 }
 
@@ -63,40 +34,15 @@ function mergeWithDefaults(saved?: Partial<AdditionalSettingsForm> | null) {
   return { ...DEFAULT_FORM, ...(Object.fromEntries(entries) as Partial<AdditionalSettingsForm>) }
 }
 
-function SectionCard({ title, description, right, children }: { title: string; description?: React.ReactNode; right?: React.ReactNode; children: React.ReactNode }) {
-  return (
-    <div className="rounded-xl border border-ui-border-base bg-ui-bg-base shadow-sm">
-      <div className="flex items-start justify-between gap-4 border-b border-ui-border-base p-4">
-        <div>
-          <div className="text-base font-semibold text-ui-fg-base">{title}</div>
-          {description ? <div className="mt-1 text-sm text-ui-fg-subtle">{description}</div> : null}
-        </div>
-        {right}
-      </div>
-      <div className="p-4">{children}</div>
-    </div>
-  )
-}
-
-function FieldRow({ label, hint, children }: { label: string; hint?: React.ReactNode; children: React.ReactNode }) {
-  return (
-    <div className="grid grid-cols-12 items-start gap-4 py-3">
-      <div className="col-span-12 md:col-span-4">
-        <div className="text-sm font-medium text-ui-fg-base">{label}</div>
-        {hint ? <div className="mt-1 text-xs text-ui-fg-subtle">{hint}</div> : null}
-      </div>
-      <div className="col-span-12 md:col-span-8">{children}</div>
-    </div>
-  )
-}
-
 export default function AdditionalSettingsTab() {
   const [form, setForm] = useState<AdditionalSettingsForm>(() => ({ ...DEFAULT_FORM }))
   const [loading, setLoading] = useState(false)
   const [saving, setSaving] = useState(false)
-  const [toast, setToast] = useState<{ type: "success" | "error"; message: string } | null>(null)
+  const [toast, setToast] = useState<ToastState>(null)
   const didInit = useRef(false)
 
+  const dismissToast = useCallback(() => setToast(null), [])
+
   useEffect(() => {
     if (didInit.current) return
     didInit.current = true
@@ -122,11 +68,9 @@ export default function AdditionalSettingsTab() {
       const payload = json?.data ?? json
       const saved = payload?.additional_settings
       if (saved && typeof saved === "object") setForm(mergeWithDefaults(saved))
-      setToast({ type: "success", message: "Settings saved" })
-      window.setTimeout(() => setToast(null), 2500)
+      setToast({ kind: "success", message: "Settings saved" })
     } catch (e: unknown) {
-      setToast({ type: "error", message: e instanceof Error ? e.message : "Failed to save settings" })
-      window.setTimeout(() => setToast(null), 3500)
+      setToast({ kind: "error", message: e instanceof Error ? e.message : "Failed to save settings" })
     } finally {
       setSaving(false)
     }
@@ -139,11 +83,7 @@ export default function AdditionalSettingsTab() {
           <div><h1 className="text-xl font-semibold text-ui-fg-base">PayPal Gateway By Easy Payment</h1></div>
         </div>
         <PayPalTabs />
-        {toast ? (
-          <div className="fixed right-6 top-6 z-50 rounded-md border border-ui-border-base bg-ui-bg-base px-4 py-3 text-sm shadow-lg" role="status" aria-live="polite">
-            <span className={toast.type === "success" ? "text-ui-fg-base" : "text-ui-fg-error"}>{toast.message}</span>
-          </div>
-        ) : null}
+        <Toast toast={toast} onClose={dismissToast} />
         <SectionCard
           title="Additional Settings"
           description="These settings control checkout behavior and PayPal experience."
@@ -152,22 +92,22 @@ export default function AdditionalSettingsTab() {
               <button type="button" onClick={onSave} disabled={saving || loading} className="transition-fg relative inline-flex w-fit items-center justify-center overflow-hidden rounded-md outline-none 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">
                 {saving ? "Saving..." : "Save settings"}
               </button>
-              {loading ? <span className="text-sm text-ui-fg-subtle">Loading...</span> : null}
+              {loading ? <span className="text-sm text-ui-fg-subtle">Loading…</span> : null}
             </div>
           )}
         >
           <div className="divide-y divide-ui-border-base">
-            <FieldRow label="Payment action">
-              <select value={form.paymentAction} onChange={(e) => setForm((p) => ({ ...p, paymentAction: e.target.value as PaymentAction }))} className="w-full rounded-md border border-ui-border-base bg-ui-bg-base px-3 py-2 text-sm text-ui-fg-base outline-none focus:ring-2 focus:ring-ui-border-interactive">
+            <FieldRow label="Payment action" htmlFor="as-payment-action">
+              <select id="as-payment-action" value={form.paymentAction} onChange={(e) => setForm((p) => ({ ...p, paymentAction: e.target.value as PaymentAction }))} className="w-full rounded-md border border-ui-border-base bg-ui-bg-base px-3 py-2 text-sm text-ui-fg-base outline-none focus:ring-2 focus:ring-ui-border-interactive">
                 <option value="capture">Capture</option>
                 <option value="authorize">Authorize</option>
               </select>
             </FieldRow>
-            <FieldRow label="Brand Name">
-              <input value={form.brandName} onChange={(e) => setForm((p) => ({ ...p, brandName: e.target.value }))} className="w-full rounded-md border border-ui-border-base bg-ui-bg-base px-3 py-2 text-sm text-ui-fg-base outline-none focus:ring-2 focus:ring-ui-border-interactive" placeholder="PayPal" />
+            <FieldRow label="Brand Name" htmlFor="as-brand-name">
+              <input id="as-brand-name" value={form.brandName} onChange={(e) => setForm((p) => ({ ...p, brandName: e.target.value }))} className="w-full rounded-md border border-ui-border-base bg-ui-bg-base px-3 py-2 text-sm text-ui-fg-base outline-none focus:ring-2 focus:ring-ui-border-interactive" placeholder="PayPal" />
             </FieldRow>
-            <FieldRow label="Landing Page">
-              <select value={form.landingPage} onChange={(e) => setForm((p) => ({ ...p, landingPage: e.target.value as LandingPage }))} className="w-full rounded-md border border-ui-border-base bg-ui-bg-base px-3 py-2 text-sm text-ui-fg-base outline-none focus:ring-2 focus:ring-ui-border-interactive">
+            <FieldRow label="Landing Page" htmlFor="as-landing-page">
+              <select id="as-landing-page" value={form.landingPage} onChange={(e) => setForm((p) => ({ ...p, landingPage: e.target.value as LandingPage }))} className="w-full rounded-md border border-ui-border-base bg-ui-bg-base px-3 py-2 text-sm text-ui-fg-base outline-none focus:ring-2 focus:ring-ui-border-interactive">
                 <option value="no_preference">No Preference</option>
                 <option value="login">Login</option>
                 <option value="billing">Billing</option>
@@ -185,11 +125,11 @@ export default function AdditionalSettingsTab() {
                 <span className="text-sm text-ui-fg-base">Send line item details to PayPal</span>
               </label>
             </FieldRow>
-            <FieldRow label="Invoice prefix">
-              <input value={form.invoicePrefix} onChange={(e) => setForm((p) => ({ ...p, invoicePrefix: e.target.value }))} className="w-full rounded-md border border-ui-border-base bg-ui-bg-base px-3 py-2 text-sm text-ui-fg-base outline-none focus:ring-2 focus:ring-ui-border-interactive" placeholder="WC-" />
+            <FieldRow label="Invoice prefix" htmlFor="as-invoice-prefix">
+              <input id="as-invoice-prefix" value={form.invoicePrefix} onChange={(e) => setForm((p) => ({ ...p, invoicePrefix: e.target.value }))} className="w-full rounded-md border border-ui-border-base bg-ui-bg-base px-3 py-2 text-sm text-ui-fg-base outline-none focus:ring-2 focus:ring-ui-border-interactive" placeholder="PP-" />
             </FieldRow>
-            <FieldRow label="Credit Card Statement Name">
-              <input value={form.creditCardStatementName} onChange={(e) => setForm((p) => ({ ...p, creditCardStatementName: e.target.value }))} className="w-full rounded-md border border-ui-border-base bg-ui-bg-base px-3 py-2 text-sm text-ui-fg-base outline-none focus:ring-2 focus:ring-ui-border-interactive" placeholder="PayPal" />
+            <FieldRow label="Credit Card Statement Name" htmlFor="as-cc-statement">
+              <input id="as-cc-statement" value={form.creditCardStatementName} onChange={(e) => setForm((p) => ({ ...p, creditCardStatementName: e.target.value }))} className="w-full rounded-md border border-ui-border-base bg-ui-bg-base px-3 py-2 text-sm text-ui-fg-base outline-none focus:ring-2 focus:ring-ui-border-interactive" placeholder="PayPal" />
             </FieldRow>
           </div>
         </SectionCard>

package/src/admin/routes/settings/paypal/advanced-card-payments/page.tsx

@@ -1,38 +1,9 @@
-import React, { useEffect, useRef, useState } from "react"
+import React, { useCallback, useEffect, useRef, useState } from "react"
 import PayPalTabs from "../_components/Tabs"
-
-type AdminFetchOptions = {
-  method?: "GET" | "POST" | "PUT" | "DELETE" | "PATCH"
-  body?: Record<string, unknown>
-  query?: Record<string, string>
-}
-
-async function adminFetch<T = unknown>(path: string, opts: AdminFetchOptions = {}): Promise<T> {
-  const { method = "GET", body, query } = opts
-  let url = path
-  if (query && Object.keys(query).length > 0) {
-    const params = new URLSearchParams(query)
-    url = `${path}?${params.toString()}`
-  }
-  const headers: Record<string, string> = { Accept: "application/json" }
-  if (body !== undefined) headers["Content-Type"] = "application/json"
-  if (typeof window !== "undefined") {
-    const token = (window as any).__medusa__?.token
-    if (token) headers["Authorization"] = `Bearer ${token}`
-  }
-  const res = await fetch(url, {
-    method, headers, credentials: "include",
-    body: body !== undefined ? JSON.stringify(body) : undefined,
-  })
-  const text = await res.text().catch(() => "")
-  if (!res.ok) {
-    if (res.status === 401) throw new Error("Unauthorized (401) - session may have expired. Please reload and log in again.")
-    if (res.status === 403) throw new Error("Forbidden (403) - you do not have permission to perform this action.")
-    throw new Error(text || `Request failed with status ${res.status}`)
-  }
-  if (!text) return {} as T
-  try { return JSON.parse(text) as T } catch { return {} as T }
-}
+import SectionCard from "../_components/SectionCard"
+import FieldRow from "../_components/FieldRow"
+import Toast, { ToastState } from "../_components/Toast"
+import { adminFetch } from "../_utils/adminFetch"
 
 type ThreeDSContingency = "sli" | "when_required" | "always"
 
@@ -60,40 +31,15 @@ const THREE_DS_OPTIONS: { value: ThreeDSContingency; label: string; hint?: strin
   { value: "always", label: "Always request 3D Secure", hint: "Forces 3DS challenge whenever possible (may reduce conversion)." },
 ]
 
-function SectionCard({ title, description, right, children }: { title: string; description?: string; right?: React.ReactNode; children: React.ReactNode }) {
-  return (
-    <div className="rounded-xl border border-ui-border-base bg-ui-bg-base shadow-sm">
-      <div className="flex items-start justify-between gap-4 border-b border-ui-border-base p-4">
-        <div>
-          <div className="text-base font-semibold text-ui-fg-base">{title}</div>
-          {description ? <div className="mt-1 text-sm text-ui-fg-subtle">{description}</div> : null}
-        </div>
-        {right}
-      </div>
-      <div className="p-4">{children}</div>
-    </div>
-  )
-}
-
-function FieldRow({ label, hint, children }: { label: string; hint?: React.ReactNode; children: React.ReactNode }) {
-  return (
-    <div className="grid grid-cols-12 items-start gap-4 py-3">
-      <div className="col-span-12 md:col-span-4">
-        <div className="text-sm font-medium text-ui-fg-base">{label}</div>
-        {hint ? <div className="mt-1 text-xs text-ui-fg-subtle">{hint}</div> : null}
-      </div>
-      <div className="col-span-12 md:col-span-8">{children}</div>
-    </div>
-  )
-}
-
 export default function AdvancedCardPaymentsTab() {
   const [form, setForm] = useState<AdvancedCardPaymentsForm>(() => ({ ...DEFAULT_FORM }))
   const [loading, setLoading] = useState(false)
   const [saving, setSaving] = useState(false)
-  const [toast, setToast] = useState<{ type: "success" | "error"; message: string } | null>(null)
+  const [toast, setToast] = useState<ToastState>(null)
   const didInit = useRef(false)
 
+  const dismissToast = useCallback(() => setToast(null), [])
+
   useEffect(() => {
     if (didInit.current) return
     didInit.current = true
@@ -121,11 +67,9 @@ export default function AdvancedCardPaymentsTab() {
       const payload = json?.data ?? json
       const saved = payload?.advanced_card_payments
       if (saved && typeof saved === "object") setForm(mergeWithDefaults(saved))
-      setToast({ type: "success", message: "Settings saved" })
-      window.setTimeout(() => setToast(null), 2500)
+      setToast({ kind: "success", message: "Settings saved" })
     } catch (e: unknown) {
-      setToast({ type: "error", message: (e instanceof Error ? e.message : "") || "Failed to save settings." })
-      window.setTimeout(() => setToast(null), 3500)
+      setToast({ kind: "error", message: (e instanceof Error ? e.message : "") || "Failed to save settings." })
     } finally {
       setSaving(false)
     }
@@ -138,11 +82,7 @@ export default function AdvancedCardPaymentsTab() {
           <div><h1 className="text-xl font-semibold text-ui-fg-base">PayPal Gateway By Easy Payment</h1></div>
         </div>
         <PayPalTabs />
-        {toast ? (
-          <div className="fixed right-6 top-6 z-50 rounded-md border border-ui-border-base bg-ui-bg-base px-4 py-3 text-sm shadow-lg" role="status" aria-live="polite">
-            <span className={toast.type === "success" ? "text-ui-fg-base" : "text-ui-fg-error"}>{toast.message}</span>
-          </div>
-        ) : null}
+        <Toast toast={toast} onClose={dismissToast} />
         <SectionCard
           title="Advanced Card Payments"
           description="Control card checkout settings and 3D Secure behavior."
@@ -151,7 +91,7 @@ export default function AdvancedCardPaymentsTab() {
               <button type="button" onClick={onSave} disabled={saving || loading} className="transition-fg relative inline-flex w-fit items-center justify-center overflow-hidden rounded-md outline-none 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">
                 {saving ? "Saving..." : "Save settings"}
               </button>
-              {loading ? <span className="text-sm text-ui-fg-subtle">Loading...</span> : null}
+              {loading ? <span className="text-sm text-ui-fg-subtle">Loading…</span> : null}
             </div>
           )}
         >
@@ -162,12 +102,12 @@ export default function AdvancedCardPaymentsTab() {
                 <span className="text-sm text-ui-fg-base">Enable Advanced Credit/Debit Card</span>
               </label>
             </FieldRow>
-            <FieldRow label="Title">
-              <input value={form.title} onChange={(e) => setForm((p) => ({ ...p, title: e.target.value }))} className="w-full rounded-md border border-ui-border-base bg-ui-bg-base px-3 py-2 text-sm text-ui-fg-base outline-none focus:ring-2 focus:ring-ui-border-interactive" placeholder="Credit or Debit Card" />
+            <FieldRow label="Title" htmlFor="acp-title">
+              <input id="acp-title" value={form.title} onChange={(e) => setForm((p) => ({ ...p, title: e.target.value }))} className="w-full rounded-md border border-ui-border-base bg-ui-bg-base px-3 py-2 text-sm text-ui-fg-base outline-none focus:ring-2 focus:ring-ui-border-interactive" placeholder="Credit or Debit Card" />
             </FieldRow>
-            <FieldRow label="Contingency for 3D Secure" hint="Choose when 3D Secure should be triggered during card payments.">
+            <FieldRow label="Contingency for 3D Secure" hint="Choose when 3D Secure should be triggered during card payments." htmlFor="acp-threeds">
               <div className="flex flex-col gap-2">
-                <select value={form.threeDS} onChange={(e) => setForm((p) => ({ ...p, threeDS: e.target.value as ThreeDSContingency }))} className="w-full rounded-md border border-ui-border-base bg-ui-bg-base px-3 py-2 text-sm text-ui-fg-base outline-none focus:ring-2 focus:ring-ui-border-interactive">
+                <select id="acp-threeds" value={form.threeDS} onChange={(e) => setForm((p) => ({ ...p, threeDS: e.target.value as ThreeDSContingency }))} className="w-full rounded-md border border-ui-border-base bg-ui-bg-base px-3 py-2 text-sm text-ui-fg-base outline-none focus:ring-2 focus:ring-ui-border-interactive">
                   {THREE_DS_OPTIONS.map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
                 </select>
                 {THREE_DS_OPTIONS.find((o) => o.value === form.threeDS)?.hint
@@ -180,4 +120,4 @@ export default function AdvancedCardPaymentsTab() {
       </div>
     </div>
   )
-}
+}

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

@@ -11,36 +11,11 @@ import PayPalTabs from "../_components/Tabs"
 
 export const config = defineRouteConfig({
   label: "PayPal Connection",
-  hide: true,
 })
 
 
-if (typeof window !== "undefined") {
-  const preloadHref =
-    "https://www.paypal.com/webapps/merchantboarding/js/lib/lightbox/partner.js"
-
-  const existingPreload = document.head.querySelector(
-    `link[rel="preload"][href="${preloadHref}"]`
-  )
-  if (!existingPreload) {
-    const preloadLink = document.createElement("link")
-    preloadLink.rel = "preload"
-    preloadLink.href = preloadHref
-    preloadLink.as = "script"
-    document.head.appendChild(preloadLink)
-  }
-
-  const existingScript = document.getElementById(
-    "paypal-partner-js"
-  ) as HTMLScriptElement | null
-  if (!existingScript) {
-    const ppScript = document.createElement("script")
-    ppScript.id = "paypal-partner-js"
-    ppScript.src = preloadHref
-    ppScript.async = true
-    document.head.appendChild(ppScript)
-  }
-}
+const PARTNER_JS_URL =
+  "https://www.paypal.com/webapps/merchantboarding/js/lib/lightbox/partner.js"
 
 declare global {
   interface Window {
@@ -59,7 +34,6 @@ declare global {
 
 const SERVICE_URL = "/admin/paypal/onboarding-link"
 const CACHE_KEY = "pp_onboard_cache"
-const RELOAD_KEY = "pp_onboard_reloaded_once"
 const CACHE_EXPIRY = 10 * 60 * 1000
 
 const ONBOARDING_COMPLETE_ENDPOINT = "/admin/paypal/onboard-complete"
@@ -87,7 +61,7 @@ export default function PayPalConnectionPage() {
   const [env, setEnv] = useState<"sandbox" | "live">("live")
 
   useEffect(() => {
-    fetch("/admin/paypal/environment", { method: "GET" })
+    fetch("/admin/paypal/environment", { method: "GET", credentials: "include" })
       .then((r) => r.json())
       .then((d) => {
         const v = d?.environment === "sandbox" ? "sandbox" : "live"
@@ -95,6 +69,44 @@ export default function PayPalConnectionPage() {
       })
       .catch(() => {})
   }, [])
+
+  useEffect(() => {
+    const preloadHref = PARTNER_JS_URL
+
+    let preloadLink: HTMLLinkElement | null = null
+    const existingPreload = document.head.querySelector(
+      `link[rel="preload"][href="${preloadHref}"]`
+    )
+    if (!existingPreload) {
+      preloadLink = document.createElement("link")
+      preloadLink.rel = "preload"
+      preloadLink.href = preloadHref
+      preloadLink.as = "script"
+      document.head.appendChild(preloadLink)
+    }
+
+    let ppScript: HTMLScriptElement | null = null
+    const existingScript = document.getElementById(
+      "paypal-partner-js"
+    ) as HTMLScriptElement | null
+    if (!existingScript) {
+      ppScript = document.createElement("script")
+      ppScript.id = "paypal-partner-js"
+      ppScript.src = preloadHref
+      ppScript.async = true
+      document.head.appendChild(ppScript)
+    }
+
+    return () => {
+      if (preloadLink && preloadLink.parentNode) {
+        preloadLink.parentNode.removeChild(preloadLink)
+      }
+      if (ppScript && ppScript.parentNode) {
+        ppScript.parentNode.removeChild(ppScript)
+      }
+    }
+  }, [])
+
   const [connState, setConnState] = useState<
     "loading" | "ready" | "connected" | "error"
   >("loading")
@@ -135,11 +147,15 @@ export default function PayPalConnectionPage() {
       fetch(SERVICE_URL, {
         method: "POST",
         headers: { "content-type": "application/json" },
+        credentials: "include",
         body: JSON.stringify({
           products: ["PPCP"],
         }),
       })
-        .then((r) => r.json())
+        .then((r) => {
+          if (!r.ok) throw new Error(`Service returned ${r.status}`)
+          return r.json()
+        })
         .then((data) => {
           if (runId !== currentRunId.current) return
 
@@ -160,12 +176,6 @@ export default function PayPalConnectionPage() {
             })
           )
 
-          if (!localStorage.getItem(RELOAD_KEY)) {
-            localStorage.setItem(RELOAD_KEY, "1")
-            window.location.reload()
-            return
-          }
-
           activatePayPal(finalUrl, runId)
         })
         .catch(() => {
@@ -196,12 +206,20 @@ export default function PayPalConnectionPage() {
       }
       setFinalUrl(url)
 
+      let attempts = 0
+      const MAX_ATTEMPTS = 200
+
       const tryInit = () => {
         if (runId !== currentRunId.current) return
         if (window.PAYPAL?.apps?.Signup) {
           showUI()
           return
         }
+        attempts++
+        if (attempts >= MAX_ATTEMPTS) {
+          showError("PayPal partner script failed to load. Please refresh and try again.")
+          return
+        }
         setTimeout(tryInit, 50)
       }
 
@@ -224,6 +242,7 @@ export default function PayPalConnectionPage() {
       try {
         const r = await fetch(`${STATUS_ENDPOINT}?environment=${env}`, {
           method: "GET",
+          credentials: "include",
         })
         const st = await r.json().catch(() => ({}))
 
@@ -261,7 +280,7 @@ export default function PayPalConnectionPage() {
   useLayoutEffect(() => {
     window.onboardingCallback = async function (authCode: string, sharedId: string) {
       try {
-        ;(window as any).onbeforeunload = ""
+        window.onbeforeunload = null
       } catch {}
 
       setOnboardingInProgress(true)
@@ -278,6 +297,7 @@ export default function PayPalConnectionPage() {
         const res = await fetch(ONBOARDING_COMPLETE_ENDPOINT, {
           method: "POST",
           headers: { "content-type": "application/json" },
+          credentials: "include",
           body: JSON.stringify(payload),
         })
 
@@ -299,10 +319,22 @@ export default function PayPalConnectionPage() {
 
         try {
           localStorage.removeItem(CACHE_KEY)
-          localStorage.removeItem(RELOAD_KEY)
         } catch {}
 
-        window.location.href = window.location.href
+        try {
+          const statusRes = await fetch(`${STATUS_ENDPOINT}?environment=${env}`, {
+            method: "GET",
+            credentials: "include",
+          })
+          const refreshedStatus = await statusRes.json().catch(() => ({}))
+          setStatusInfo(refreshedStatus || null)
+          setConnState("connected")
+          setShowManual(false)
+        } catch {
+          setConnState("connected")
+          setShowManual(false)
+        }
+        setOnboardingInProgress(false)
       } catch (e: any) {
         console.error(e)
         setConnState("error")
@@ -357,6 +389,7 @@ export default function PayPalConnectionPage() {
       const res = await fetch(SAVE_CREDENTIALS_ENDPOINT, {
         method: "POST",
         headers: { "content-type": "application/json" },
+        credentials: "include",
         body: JSON.stringify({
           clientId: clientId.trim(),
           clientSecret: secret.trim(),
@@ -371,6 +404,7 @@ export default function PayPalConnectionPage() {
 
       const statusRes = await fetch(`${STATUS_ENDPOINT}?environment=${env}`, {
         method: "GET",
+        credentials: "include",
       })
       const refreshedStatus = await statusRes.json().catch(() => ({}))
 
@@ -380,7 +414,6 @@ export default function PayPalConnectionPage() {
 
       try {
         localStorage.removeItem(CACHE_KEY)
-        localStorage.removeItem(RELOAD_KEY)
       } catch {}
     } catch (e: any) {
       console.error(e)
@@ -400,11 +433,13 @@ export default function PayPalConnectionPage() {
     setError(null)
     setFinalUrl("")
     setShowManual(false)
+    setStatusInfo(null)
 
     try {
       const res = await fetch(DISCONNECT_ENDPOINT, {
         method: "POST",
         headers: { "content-type": "application/json" },
+        credentials: "include",
         body: JSON.stringify({ environment: env }),
       })
 
@@ -415,7 +450,7 @@ export default function PayPalConnectionPage() {
 
       try {
         localStorage.removeItem(CACHE_KEY)
-        localStorage.removeItem(RELOAD_KEY)
+
       } catch {}
 
       currentRunId.current = ++runIdRef.current
@@ -439,20 +474,24 @@ export default function PayPalConnectionPage() {
       await fetch("/admin/paypal/environment", {
         method: "POST",
         headers: { "content-type": "application/json" },
+        credentials: "include",
         body: JSON.stringify({ environment: next }),
       })
     } catch {}
 
     try {
       localStorage.removeItem(CACHE_KEY)
-      localStorage.removeItem(RELOAD_KEY)
     } catch {}
   }
 
   return (
     <div className="p-6">
       <div className="flex flex-col gap-6">
-        <h1 className="text-xl font-semibold">PayPal Gateway By Easy Payment</h1>
+        <div className="flex items-start justify-between gap-4">
+          <div>
+            <h1 className="text-xl font-semibold text-ui-fg-base">PayPal Gateway By Easy Payment</h1>
+          </div>
+        </div>
 
         <PayPalTabs />
 
@@ -481,6 +520,7 @@ export default function PayPalConnectionPage() {
                   <div className="text-sm text-green-600 bg-green-50 p-3 rounded border border-green-200">
                     ✅ Successfully connected to PayPal!
                     <a
+                      target="PPFrame"
                       data-paypal-button="true"
                       data-paypal-onboard-complete="onboardingCallback"
                       href="#"
@@ -535,6 +575,7 @@ export default function PayPalConnectionPage() {
                         ppBtnMeasureRef.current = node
                       }}
                       id="paypal-button"
+                      target="PPFrame"
                       data-paypal-button="true"
                       href={finalUrl || "#"}
                       data-paypal-onboard-complete="onboardingCallback"
@@ -604,8 +645,9 @@ export default function PayPalConnectionPage() {
               <div className="md:col-span-2">
                 <div className="ml-[260px] max-w-xl mt-4 grid grid-cols-1 gap-3 md:grid-cols-2">
                   <div className="flex flex-col gap-1">
-                    <label className="text-sm font-medium">Client ID</label>
+                    <label htmlFor="pp-manual-client-id" className="text-sm font-medium">Client ID</label>
                     <input
+                      id="pp-manual-client-id"
                       type="text"
                       value={clientId}
                       onChange={(e) => setClientId(e.target.value)}
@@ -618,8 +660,9 @@ export default function PayPalConnectionPage() {
                   </div>
 
                   <div className="flex flex-col gap-1">
-                    <label className="text-sm font-medium">Secret</label>
+                    <label htmlFor="pp-manual-secret" className="text-sm font-medium">Secret</label>
                     <input
+                      id="pp-manual-secret"
                       type="password"
                       value={secret}
                       onChange={(e) => setSecret(e.target.value)}