@paypal/checkout-components 5.0.404 → 5.0.405-alpha-da545e5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.404",
+  "version": "5.0.405-alpha-da545e5.0",
   "description": "PayPal Checkout components, for integrating checkout products.",
   "main": "index.js",
   "scripts": {

package/src/lib/appSwitchResume.js

@@ -16,13 +16,54 @@ export type AppSwitchResumeParams = {|
   checkoutState: "onApprove" | "onCancel" | "onError",
 |};
 
+// When the merchant's return_url contains a hash fragment (e.g. /checkout/#payment),
+// PayPal params (token, PayerID) end up inside the hash as /checkout/#payment?token=...&PayerID=...
+// because the base URL cannot be modified (iOS Safari uses it for tab matching in app switch).
+// This helper extracts query-style params embedded in the hash fragment.
+function getParamsFromHashFragment(): { [string]: string } {
+  const hashString =
+    window.location.hash && String(window.location.hash).slice(1);
+  if (!hashString) {
+    return {};
+  }
+
+  // Check for ? delimiter first (e.g. #payment?token=...)
+  const questionMarkIndex = hashString.indexOf("?");
+  if (questionMarkIndex !== -1) {
+    const queryString = hashString.slice(questionMarkIndex + 1);
+    return Object.fromEntries(new URLSearchParams(queryString));
+  }
+
+  // Fallback to & delimiter (e.g. #payment&token=...)
+  const ampersandIndex = hashString.indexOf("&");
+  if (ampersandIndex !== -1) {
+    const queryString = hashString.slice(ampersandIndex + 1);
+    return Object.fromEntries(new URLSearchParams(queryString));
+  }
+
+  return {};
+}
+
 // The Web fallback flow uses different set of query params then appswitch flow.
 function getAppSwitchParamsWebFallback(): AppSwitchResumeParams | null {
   try {
-    const params = Object.fromEntries(
+    const searchParams = Object.fromEntries(
       // eslint-disable-next-line compat/compat
       new URLSearchParams(window.location.search)
     );
+
+    // If no PayPal params found in query string, check if they are embedded
+    // inside the hash fragment. This happens when the merchant's return_url
+    // contains a hash (e.g. /checkout/#payment) and PayPal params were appended
+    // after the fragment: /checkout/#payment?token=...&PayerID=...
+    const params =
+      searchParams.token ||
+      searchParams.vaultSetupToken ||
+      searchParams.approval_token_id ||
+      searchParams.approval_session_id
+        ? searchParams
+        : { ...getParamsFromHashFragment(), ...searchParams };
+
     const {
       button_session_id: buttonSessionID,
       fundingSource,

package/src/lib/appSwithResume.test.js

@@ -70,16 +70,24 @@ describe("app switch resume flow", () => {
     expect(isAppSwitchResumeFlow()).toEqual(false);
   });
 
-  test("should test null fetching resume params with invalid callback passed", () => {
+  test("should extract resume params from hash with non-action prefix via web fallback", () => {
+    // When hash is not a known action (e.g. #Unknown) but contains PayPal params,
+    // the web fallback should extract them from the hash fragment.
     vi.spyOn(window, "location", "get").mockReturnValue({
       hash: `#Unknown?button_session_id=${buttonSessionID}&token=${orderID}&fundingSource=${fundingSource}`,
+      search: "",
     });
 
     const params = getAppSwitchResumeParams();
 
     expect.assertions(2);
-    expect(params).toEqual(null);
-    expect(isAppSwitchResumeFlow()).toEqual(false);
+    expect(params).toEqual({
+      buttonSessionID,
+      checkoutState: "onCancel",
+      fundingSource,
+      orderID,
+    });
+    expect(isAppSwitchResumeFlow()).toEqual(true);
   });
 
   test("should test fetching multiple resume params when parameters are correctly passed", () => {
@@ -140,4 +148,189 @@ describe("app switch resume flow", () => {
     });
     expect(isAppSwitchResumeFlow()).toEqual(true);
   });
+
+  test("should extract resume params when merchant return_url has hash fragment with ? delimiter", () => {
+    vi.spyOn(window, "location", "get").mockReturnValue({
+      hash: `#payment?button_session_id=${buttonSessionID}&token=${orderID}&fundingSource=${fundingSource}&PayerID=PP-payer-122`,
+      search: "",
+    });
+
+    const params = getAppSwitchResumeParams();
+
+    expect(params).toEqual({
+      buttonSessionID,
+      checkoutState: "onApprove",
+      fundingSource,
+      orderID,
+      payerID: "PP-payer-122",
+    });
+    expect(isAppSwitchResumeFlow()).toEqual(true);
+  });
+
+  test("should extract resume params when merchant return_url has hash fragment without PayerID (cancel)", () => {
+    vi.spyOn(window, "location", "get").mockReturnValue({
+      hash: `#payment?button_session_id=${buttonSessionID}&token=${orderID}&fundingSource=${fundingSource}`,
+      search: "",
+    });
+
+    const params = getAppSwitchResumeParams();
+
+    expect(params).toEqual({
+      buttonSessionID,
+      checkoutState: "onCancel",
+      fundingSource,
+      orderID,
+    });
+    expect(isAppSwitchResumeFlow()).toEqual(true);
+  });
+
+  test("should extract resume params when hash uses & delimiter instead of ?", () => {
+    // Real-world case: URL like /ppcp-js-sdk?clientSideDelay=0#payment&token=...&PayerID=...
+    vi.spyOn(window, "location", "get").mockReturnValue({
+      hash: `#payment&token=${orderID}&PayerID=PP-payer-122&button_session_id=${buttonSessionID}`,
+      search: "?clientSideDelay=0&serverSideDelay=0",
+    });
+
+    const params = getAppSwitchResumeParams();
+
+    expect(params).toEqual({
+      buttonSessionID,
+      checkoutState: "onApprove",
+      orderID,
+      payerID: "PP-payer-122",
+    });
+    expect(isAppSwitchResumeFlow()).toEqual(true);
+  });
+
+  test("should extract vault resume params from hash fragment", () => {
+    vi.spyOn(window, "location", "get").mockReturnValue({
+      hash: `#/step3?button_session_id=${buttonSessionID}&token=${orderID}&approval_token_id=VA-3`,
+      search: "",
+    });
+
+    const params = getAppSwitchResumeParams();
+
+    expect(params).toEqual({
+      buttonSessionID,
+      checkoutState: "onCancel",
+      orderID,
+      vaultSetupToken: "VA-3",
+    });
+    expect(isAppSwitchResumeFlow()).toEqual(true);
+  });
+
+  test("should prefer search params over hash params when both exist", () => {
+    vi.spyOn(window, "location", "get").mockReturnValue({
+      hash: `#payment?token=WRONG-TOKEN`,
+      search: `?button_session_id=${buttonSessionID}&token=${orderID}&PayerID=PP-123`,
+    });
+
+    const params = getAppSwitchResumeParams();
+
+    expect(params).toEqual({
+      buttonSessionID,
+      checkoutState: "onApprove",
+      orderID,
+      payerID: "PP-123",
+    });
+  });
+
+  test("should return null when hash has merchant fragment but no PayPal params", () => {
+    vi.spyOn(window, "location", "get").mockReturnValue({
+      hash: "#payment",
+      search: "",
+    });
+
+    const params = getAppSwitchResumeParams();
+
+    expect(params).toEqual(null);
+    expect(isAppSwitchResumeFlow()).toEqual(false);
+  });
+
+  test("should return null when hash has merchant fragment with unrelated params", () => {
+    vi.spyOn(window, "location", "get").mockReturnValue({
+      hash: "#/checkout?step=review&cart=abc123",
+      search: "",
+    });
+
+    const params = getAppSwitchResumeParams();
+
+    expect(params).toEqual(null);
+    expect(isAppSwitchResumeFlow()).toEqual(false);
+  });
+
+  test("should handle vaultSetupToken in search params", () => {
+    vi.spyOn(window, "location", "get").mockReturnValue({
+      hash: "",
+      search: `?button_session_id=${buttonSessionID}&vaultSetupToken=VA-123&PayerID=PP-456`,
+    });
+
+    const params = getAppSwitchResumeParams();
+
+    expect(params).toEqual({
+      buttonSessionID,
+      checkoutState: "onApprove",
+      payerID: "PP-456",
+      vaultSetupToken: "VA-123",
+    });
+    expect(isAppSwitchResumeFlow()).toEqual(true);
+  });
+
+  test("should handle approval_token_id in search params", () => {
+    vi.spyOn(window, "location", "get").mockReturnValue({
+      hash: "",
+      search: `?button_session_id=${buttonSessionID}&approval_token_id=AT-789`,
+    });
+
+    const params = getAppSwitchResumeParams();
+
+    expect(params).toEqual({
+      buttonSessionID,
+      checkoutState: "onCancel",
+      vaultSetupToken: "AT-789",
+    });
+    expect(isAppSwitchResumeFlow()).toEqual(true);
+  });
+
+  test("should handle approval_session_id in search params", () => {
+    vi.spyOn(window, "location", "get").mockReturnValue({
+      hash: "",
+      search: `?button_session_id=${buttonSessionID}&approval_session_id=AS-999`,
+    });
+
+    const params = getAppSwitchResumeParams();
+
+    expect(params).toEqual({
+      buttonSessionID,
+      checkoutState: "onCancel",
+      vaultSetupToken: "AS-999",
+    });
+    expect(isAppSwitchResumeFlow()).toEqual(true);
+  });
+
+  test("should return null when web fallback throws error", () => {
+    // Mock location.search as a getter that throws an error
+    // eslint-disable-next-line compat/compat
+    const originalURLSearchParams = window.URLSearchParams;
+    // eslint-disable-next-line compat/compat
+    window.URLSearchParams = class {
+      constructor() {
+        throw new Error("Invalid URL");
+      }
+    };
+
+    vi.spyOn(window, "location", "get").mockReturnValue({
+      hash: "",
+      search: "?invalid",
+    });
+
+    const params = getAppSwitchResumeParams();
+
+    expect(params).toEqual(null);
+    expect(isAppSwitchResumeFlow()).toEqual(false);
+
+    // Restore original URLSearchParams
+    // eslint-disable-next-line compat/compat
+    window.URLSearchParams = originalURLSearchParams;
+  });
 });