@easypayment/medusa-payment-paypal 0.9.20 → 0.9.22

package/.medusa/server/src/admin/index.js

@@ -224,9 +224,6 @@ function AdditionalSettingsTab() {
     )
   ] }) });
 }
-function PayPalApplePayPage() {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Navigate, { to: "/settings/paypal/connection", replace: true });
-}
 const DEFAULT_FORM = {
   enabled: true,
   title: "Credit or Debit Card",
@@ -311,6 +308,12 @@ function AdvancedCardPaymentsTab() {
     )
   ] }) });
 }
+function PayPalApplePayPage() {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Navigate, { to: "/settings/paypal/connection", replace: true });
+}
+function PayPalGooglePayPage() {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Navigate, { to: "/settings/paypal/connection", replace: true });
+}
 const config = adminSdk.defineRouteConfig({
   label: "PayPal Connection"
 });
@@ -319,9 +322,9 @@ const PARTNER_JS_URLS = {
   live: "https://www.paypal.com/webapps/merchantboarding/js/lib/lightbox/partner.js"
 };
 const SERVICE_URL = "/admin/paypal/onboarding-link";
-const POPUP_NAME = "PPMiniBrowser";
+const POPUP_NAME = "PPFrame";
 const CACHE_PREFIX = "pp_onboard_cache";
-const CACHE_EXPIRY = 10 * 60 * 1e3;
+const CACHE_EXPIRY = 6 * 60 * 60 * 1e3;
 const ONBOARDING_COMPLETE_ENDPOINT = "/admin/paypal/onboard-complete";
 const STATUS_ENDPOINT = "/admin/paypal/status";
 const SAVE_CREDENTIALS_ENDPOINT = "/admin/paypal/save-credentials";
@@ -344,7 +347,9 @@ function readCachedUrl(env) {
 function writeCachedUrl(env, url) {
   try {
     localStorage.setItem(cacheKeyFor(env), JSON.stringify({ url, ts: Date.now() }));
+    return readCachedUrl(env) === url;
   } catch {
+    return false;
   }
 }
 function clearCachedUrl(env) {
@@ -358,58 +363,12 @@ function clearCachedUrl(env) {
   } catch {
   }
 }
-function isPayPalOrigin(origin) {
-  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;
-  }
-}
-function extractAuth(data) {
-  if (!data) return {};
-  if (typeof data === "object") {
-    const obj = data;
-    const authCode = obj.authCode ?? obj.auth_code ?? obj.authcode;
-    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"]) {
-      if (obj[key] && typeof obj[key] === "object") {
-        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("{")) {
-      try {
-        return extractAuth(JSON.parse(s));
-      } catch {
-      }
-    }
-    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") || void 0;
-        const sharedId = sp.get("sharedId") || sp.get("shared_id") || void 0;
-        if (authCode && sharedId) return { authCode, sharedId };
-      } catch {
-      }
-    }
-  }
-  return {};
-}
 function PayPalConnectionPage() {
   const [env, setEnv] = react.useState("live");
   const [envReady, setEnvReady] = react.useState(false);
   const [connState, setConnState] = react.useState("loading");
+  const [partnerReady, setPartnerReady] = react.useState(false);
   const [error, setError] = react.useState(null);
-  const [popupBlocked, setPopupBlocked] = react.useState(false);
   const [finalUrl, setFinalUrl] = react.useState("");
   const [showManual, setShowManual] = react.useState(false);
   const [clientId, setClientId] = react.useState("");
@@ -417,22 +376,12 @@ function PayPalConnectionPage() {
   const [statusInfo, setStatusInfo] = react.useState(null);
   const [onboardingInProgress, setOnboardingInProgress] = react.useState(false);
   const initLoaderRef = react.useRef(null);
-  const paypalButtonRef = react.useRef(null);
   const errorLogRef = react.useRef(null);
   const runIdRef = react.useRef(0);
   const currentRunId = react.useRef(0);
-  const finalUrlRef = react.useRef(finalUrl);
-  finalUrlRef.current = finalUrl;
-  const connStateRef = react.useRef(connState);
-  connStateRef.current = connState;
-  const inProgressRef = react.useRef(onboardingInProgress);
-  inProgressRef.current = onboardingInProgress;
   const envRef = react.useRef(env);
   envRef.current = env;
-  const popupRef = react.useRef(null);
-  const popupPollRef = react.useRef(null);
   const completedRef = react.useRef(false);
-  const partnerBoundRef = react.useRef(false);
   const ppBtnMeasureRef = react.useRef(null);
   const [ppBtnWidth, setPpBtnWidth] = react.useState(null);
   const canSaveManual = react.useMemo(() => {
@@ -442,131 +391,23 @@ function PayPalConnectionPage() {
     setConnState("error");
     setError(msg);
   }, []);
-  const stopPopupPoll = react.useCallback(() => {
-    if (popupPollRef.current) {
-      clearInterval(popupPollRef.current);
-      popupPollRef.current = null;
-    }
-  }, []);
-  const openOnboardingPopup = react.useCallback(
-    (url) => {
-      const w = 450;
-      const h = 600;
-      const baseLeft = typeof window.screenX === "number" ? window.screenX : window.screenLeft || 0;
-      const baseTop = typeof window.screenY === "number" ? window.screenY : window.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 = null;
-      try {
-        popup = window.open(url, POPUP_NAME, features);
-      } catch {
-        popup = null;
-      }
-      if (popup) {
-        popupRef.current = popup;
-        try {
-          popup.focus();
-        } catch {
+  const generateLinkAndReload = react.useCallback(
+    async (targetEnv, runId) => {
+      if (initLoaderRef.current) {
+        const loaderText = initLoaderRef.current.querySelector("#loader-text");
+        if (loaderText) {
+          loaderText.textContent = "Generating onboarding session...";
         }
-        stopPopupPoll();
-        popupPollRef.current = setInterval(() => {
-          if (!popupRef.current || popupRef.current.closed) {
-            stopPopupPoll();
-          }
-        }, 1e3);
       }
-      return popup;
-    },
-    [stopPopupPoll]
-  );
-  const completeOnboarding = react.useCallback(
-    async (authCode, sharedId) => {
-      var _a, _b, _c, _d, _e, _f, _g, _h;
-      if (!authCode || !sharedId) return;
-      if (completedRef.current) return;
-      completedRef.current = true;
       try {
-        window.onbeforeunload = null;
-      } catch {
-      }
-      const activeEnv = envRef.current === "sandbox" ? "sandbox" : "live";
-      setOnboardingInProgress(true);
-      setConnState("loading");
-      setError(null);
-      setPopupBlocked(false);
-      try {
-        const res = await fetch(ONBOARDING_COMPLETE_ENDPOINT, {
+        const res = await fetch(SERVICE_URL, {
           method: "POST",
           headers: { "content-type": "application/json" },
           credentials: "include",
-          body: JSON.stringify({ authCode, sharedId, env: activeEnv })
+          body: JSON.stringify({ products: ["PPCP"], environment: targetEnv })
         });
-        if (!res.ok) {
-          const txt = await res.text().catch(() => "");
-          throw new Error(txt || `Onboarding exchange failed (${res.status})`);
-        }
-        try {
-          (_a = popupRef.current) == null ? void 0 : _a.close();
-        } catch {
-        }
-        stopPopupPoll();
-        try {
-          const close1 = (_e = (_d = (_c = (_b = window.PAYPAL) == null ? void 0 : _b.apps) == null ? void 0 : _c.Signup) == null ? void 0 : _d.MiniBrowser) == null ? void 0 : _e.closeFlow;
-          if (typeof close1 === "function") close1();
-        } catch {
-        }
-        try {
-          const close2 = ((_h = (_g = (_f = window.PAYPAL) == null ? void 0 : _f.apps) == null ? void 0 : _g.Signup) == null ? void 0 : _h.miniBrowser) && window.PAYPAL.apps.Signup.miniBrowser.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) {
-        completedRef.current = false;
-        console.error(e);
-        setConnState("error");
-        setError((e == null ? void 0 : e.message) || "Exchange failed while saving credentials.");
-      } finally {
-        setOnboardingInProgress(false);
-      }
-    },
-    [stopPopupPoll]
-  );
-  const fetchFreshLink = react.useCallback(
-    (runId, targetEnv) => {
-      if (initLoaderRef.current) {
-        const loaderText = initLoaderRef.current.querySelector("#loader-text");
-        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();
-      }).then((data) => {
+        if (!res.ok) throw new Error(`Service returned ${res.status}`);
+        const data = await res.json();
         if (runId !== currentRunId.current) return;
         const href = data == null ? void 0 : data.onboarding_url;
         if (!href) {
@@ -574,13 +415,17 @@ function PayPalConnectionPage() {
           return;
         }
         const url = href + (href.includes("?") ? "&" : "?") + "displayMode=minibrowser";
-        writeCachedUrl(targetEnv, url);
+        const persisted = writeCachedUrl(targetEnv, url);
+        if (persisted) {
+          window.location.reload();
+          return;
+        }
         setFinalUrl(url);
         setConnState("ready");
-      }).catch(() => {
+      } catch {
         if (runId !== currentRunId.current) return;
         showError("Unable to connect to service.");
-      });
+      }
     },
     [showError]
   );
@@ -597,12 +442,60 @@ function PayPalConnectionPage() {
       alive = false;
     };
   }, []);
+  react.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);
+      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 == null ? void 0 : st.status) === "connected" && (st == null ? void 0 : 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]);
   react.useEffect(() => {
     var _a, _b, _c;
     if (connState !== "ready" || !finalUrl) return;
     const scriptUrl = PARTNER_JS_URLS[env];
     let cancelled = false;
     let pollTimer;
+    setPartnerReady(false);
+    const readyFallback = setTimeout(() => {
+      if (!cancelled) setPartnerReady(true);
+    }, 6e3);
+    const markReady = () => {
+      if (!cancelled) setPartnerReady(true);
+    };
     const initPartner = (attempt = 0) => {
       var _a2, _b2;
       if (cancelled) return;
@@ -611,19 +504,19 @@ function PayPalConnectionPage() {
       if (target == null ? void 0 : target.init) {
         try {
           target.init();
-          partnerBoundRef.current = true;
         } catch (e) {
           console.error("[paypal] partner.js init failed:", e);
         }
+        markReady();
         return;
       }
       if (typeof (signup == null ? void 0 : signup.render) === "function") {
         try {
           signup.render();
-          partnerBoundRef.current = true;
         } catch (e) {
           console.error("[paypal] partner.js render failed:", e);
         }
+        markReady();
         return;
       }
       if (attempt < 40) {
@@ -634,8 +527,8 @@ function PayPalConnectionPage() {
         document.dispatchEvent(new Event("DOMContentLoaded"));
       } catch {
       }
+      markReady();
     };
-    partnerBoundRef.current = false;
     const existingScript = document.getElementById("paypal-partner-js");
     if (existingScript) {
       (_a = existingScript.parentNode) == null ? void 0 : _a.removeChild(existingScript);
@@ -651,9 +544,11 @@ 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);
       }
@@ -662,59 +557,61 @@ function PayPalConnectionPage() {
       }
     };
   }, [connState, finalUrl, env]);
-  react.useEffect(() => {
-    const onMessage = (ev) => {
-      if (!isPayPalOrigin(ev.origin)) return;
-      const { authCode, sharedId } = extractAuth(ev.data);
-      if (authCode && sharedId) {
-        completeOnboarding(authCode, sharedId);
+  const completeOnboarding = react.useCallback(async (authCode, sharedId) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    if (!authCode || !sharedId) return;
+    if (completedRef.current) return;
+    completedRef.current = true;
+    try {
+      window.onbeforeunload = null;
+    } catch {
+    }
+    const activeEnv = 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})`);
       }
-    };
-    window.addEventListener("message", onMessage);
-    return () => window.removeEventListener("message", onMessage);
-  }, [completeOnboarding]);
-  react.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}`, {
+        const close1 = (_d = (_c = (_b = (_a = window.PAYPAL) == null ? void 0 : _a.apps) == null ? void 0 : _b.Signup) == null ? void 0 : _c.MiniBrowser) == null ? void 0 : _d.closeFlow;
+        if (typeof close1 === "function") close1();
+      } catch {
+      }
+      try {
+        const close2 = ((_g = (_f = (_e = window.PAYPAL) == null ? void 0 : _e.apps) == null ? void 0 : _f.Signup) == null ? void 0 : _g.miniBrowser) && window.PAYPAL.apps.Signup.miniBrowser.closeFlow;
+        if (typeof close2 === "function") close2();
+      } catch {
+      }
+      clearCachedUrl(activeEnv);
+      try {
+        const statusRes = await fetch(`${STATUS_ENDPOINT}?environment=${activeEnv}`, {
           method: "GET",
           credentials: "include"
         });
-        const st = await r.json().catch(() => ({}));
-        if (cancelled || runId !== currentRunId.current) return;
-        setStatusInfo(st);
-        const isConnected = (st == null ? void 0 : st.status) === "connected" && (st == null ? void 0 : 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);
+        const refreshedStatus = await statusRes.json().catch(() => ({}));
+        setStatusInfo(refreshedStatus || null);
+      } catch {
       }
-    };
-    run();
-    return () => {
-      cancelled = true;
-    };
-  }, [env, envReady, fetchFreshLink]);
+      setConnState("connected");
+      setShowManual(false);
+    } catch (e) {
+      completedRef.current = false;
+      console.error(e);
+      setConnState("error");
+      setError((e == null ? void 0 : e.message) || "Exchange failed while saving credentials.");
+    } finally {
+      setOnboardingInProgress(false);
+    }
+  }, []);
   react.useLayoutEffect(() => {
     window.onboardingCallback = (authCode, sharedId) => {
       completeOnboarding(authCode, sharedId);
@@ -723,11 +620,6 @@ function PayPalConnectionPage() {
       window.onboardingCallback = void 0;
     };
   }, [completeOnboarding]);
-  react.useEffect(() => {
-    return () => {
-      stopPopupPoll();
-    };
-  }, [stopPopupPoll]);
   react.useLayoutEffect(() => {
     const el = ppBtnMeasureRef.current;
     if (!el) return;
@@ -748,18 +640,6 @@ function PayPalConnectionPage() {
       else window.removeEventListener("resize", update);
     };
   }, [connState, env, finalUrl]);
-  const handleConnectClick = (e) => {
-    e.preventDefault();
-    if (connStateRef.current !== "ready" || !finalUrlRef.current || inProgressRef.current) {
-      return;
-    }
-    if (partnerBoundRef.current) {
-      return;
-    }
-    completedRef.current = false;
-    const popup = openOnboardingPopup(finalUrlRef.current);
-    setPopupBlocked(!popup);
-  };
   const handleSaveManual = async () => {
     if (!canSaveManual || onboardingInProgress) return;
     setOnboardingInProgress(true);
@@ -820,8 +700,7 @@ 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) {
       console.error(e);
       setConnState("error");
@@ -832,10 +711,10 @@ function PayPalConnectionPage() {
   };
   const handleEnvChange = async (e) => {
     const next = e.target.value;
+    if (next === env || onboardingInProgress) return;
     completedRef.current = false;
-    setPopupBlocked(false);
     clearCachedUrl();
-    setEnv(next);
+    setConnState("loading");
     try {
       await fetch(ENVIRONMENT_ENDPOINT, {
         method: "POST",
@@ -845,6 +724,7 @@ function PayPalConnectionPage() {
       });
     } catch {
     }
+    setEnv(next);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6", children: [
@@ -904,7 +784,6 @@ function PayPalConnectionPage() {
               "a",
               {
                 ref: (node) => {
-                  paypalButtonRef.current = node;
                   ppBtnMeasureRef.current = node;
                 },
                 id: "paypal-button",
@@ -912,17 +791,19 @@ function PayPalConnectionPage() {
                 "data-paypal-button": "true",
                 href: finalUrl || "#",
                 "data-paypal-onboard-complete": "onboardingCallback",
-                onClick: handleConnectClick,
+                "aria-disabled": onboardingInProgress || !partnerReady,
                 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 ? "not-allowed" : "pointer",
-                  opacity: onboardingInProgress ? 0.6 : 1,
-                  pointerEvents: onboardingInProgress ? "none" : "auto"
+                  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"
                 },
-                children: "Connect to PayPal"
+                children: partnerReady || onboardingInProgress ? "Connect to PayPal" : "Preparing PayPal…"
               }
             ),
-            popupBlocked && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 text-left text-xs bg-amber-50 text-amber-700 p-3 border border-amber-200 rounded", children: "Your browser blocked the PayPal popup. Please allow popups for this site, then click “Connect to PayPal” again." }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
@@ -1078,9 +959,6 @@ function PayPalConnectionPage() {
       ` })
   ] });
 }
-function PayPalGooglePayPage() {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Navigate, { to: "/settings/paypal/connection", replace: true });
-}
 function PayPalPayLaterMessagingPage() {
   return /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Navigate, { to: "/settings/paypal/connection", replace: true });
 }
@@ -1302,22 +1180,22 @@ const routeModule = {
       Component: AdditionalSettingsTab,
       path: "/settings/paypal/additional-settings"
     },
-    {
-      Component: PayPalApplePayPage,
-      path: "/settings/paypal/apple-pay"
-    },
     {
       Component: AdvancedCardPaymentsTab,
       path: "/settings/paypal/advanced-card-payments"
     },
     {
-      Component: PayPalConnectionPage,
-      path: "/settings/paypal/connection"
+      Component: PayPalApplePayPage,
+      path: "/settings/paypal/apple-pay"
     },
     {
       Component: PayPalGooglePayPage,
       path: "/settings/paypal/google-pay"
     },
+    {
+      Component: PayPalConnectionPage,
+      path: "/settings/paypal/connection"
+    },
     {
       Component: PayPalPayLaterMessagingPage,
       path: "/settings/paypal/pay-later-messaging"