@paypal/checkout-components 5.0.405-alpha-c03e09a.0 → 5.0.405

package/package.json

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

package/src/funding/common.jsx

@@ -73,7 +73,6 @@ export type LabelOptions = {|
   tagline: ?boolean,
   content: ?ContentType,
   experiment?: Experiment,
-  shouldApplyPayNowOrLaterLabel?: boolean,
 |};
 
 export type WalletLabelOptions = {|

package/src/funding/content.jsx

@@ -23,7 +23,6 @@ export type ContentMap = {
     Donate?: ({|
       logo: ChildType,
     |}) => ChildType /** Not available in `tr` language **/,
-    PayNowOrLater?: ({| logo: ChildType |}) => ChildType,
   |},
 };
 
@@ -380,14 +379,6 @@ export const componentContent: ContentMap = {
         </Text>
       </Fragment>
     ),
-    PayNowOrLater: ({ logo }) => (
-      <Fragment>
-        {logo}
-        <Text animate optional>
-          Pay Now or Later
-        </Text>
-      </Fragment>
-    ),
   },
   es: {
     Checkout: ({ logo }) => (

package/src/funding/paypal/template.jsx

@@ -230,25 +230,9 @@ function ButtonPersonalization(opts: LabelOptions): ?ChildType {
 }
 
 export function Label(opts: LabelOptions): ChildType {
-  const {
-    logo,
-    locale: { lang },
-    shouldApplyPayNowOrLaterLabel,
-  } = opts;
-
-  let buttonLabel = <BasicLabel {...opts} />;
-
-  if (!__WEB__) {
-    const { PayNowOrLater } = componentContent[lang];
-
-    if (shouldApplyPayNowOrLaterLabel && PayNowOrLater) {
-      buttonLabel = <PayNowOrLater logo={logo} />;
-    }
-  }
-
   return (
     <Fragment>
-      {buttonLabel}
+      <BasicLabel {...opts} />
       <ButtonPersonalization {...opts} />
     </Fragment>
   );

package/src/lib/appSwitchResume.js

@@ -16,13 +16,88 @@ 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=...
+// This helper splits the hash into its name and query-string parts,
+// checking for a known app switch action before &, then falling back to ? and &.
+function parseHashFragment(): {| hash: string, queryString: string |} {
+  const hashString =
+    window.location.hash && String(window.location.hash).slice(1);
+  if (!hashString) {
+    return { hash: "", queryString: "" };
+  }
+
+  const ampersandIndex = hashString.indexOf("&");
+
+  // If & exists and the segment before it is a known app switch action
+  // (e.g. #onApprove&token=...&hash?param=val), split on &.
+  // This handles native app returns where the action is &-delimited
+  // and the merchant's original hash contained a ?.
+  if (ampersandIndex !== -1) {
+    const possibleAction = hashString.slice(0, ampersandIndex);
+    if (
+      [
+        APP_SWITCH_RETURN_HASH.ONAPPROVE,
+        APP_SWITCH_RETURN_HASH.ONCANCEL,
+        APP_SWITCH_RETURN_HASH.ONERROR,
+      ].includes(possibleAction)
+    ) {
+      return {
+        hash: possibleAction,
+        queryString: hashString.slice(ampersandIndex + 1),
+      };
+    }
+  }
+
+  // Check for ? delimiter (e.g. #payment?token=...)
+  const questionMarkIndex = hashString.indexOf("?");
+  if (questionMarkIndex !== -1) {
+    return {
+      hash: hashString.slice(0, questionMarkIndex),
+      queryString: hashString.slice(questionMarkIndex + 1),
+    };
+  }
+
+  // Fallback to & delimiter (e.g. #payment&token=...)
+  if (ampersandIndex !== -1) {
+    return {
+      hash: hashString.slice(0, ampersandIndex),
+      queryString: hashString.slice(ampersandIndex + 1),
+    };
+  }
+
+  return { hash: hashString, queryString: "" };
+}
+
+function getParamsFromHashFragment(): { [string]: string } {
+  const { queryString } = parseHashFragment();
+  if (!queryString) {
+    return {};
+  }
+  // eslint-disable-next-line compat/compat
+  return Object.fromEntries(new URLSearchParams(queryString));
+}
+
 // 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,
@@ -57,31 +132,11 @@ function getAppSwitchParamsWebFallback(): AppSwitchResumeParams | null {
 }
 
 export function getAppSwitchResumeParams(): AppSwitchResumeParams | null {
-  const hashString =
-    window.location.hash && String(window.location.hash).slice(1);
-  if (!hashString) {
+  const { hash, queryString } = parseHashFragment();
+  if (!hash) {
     return getAppSwitchParamsWebFallback();
   }
 
-  let hash = "";
-  let queryString = "";
-
-  // first check for ? as the hash/query separator
-  const questionMarkIndex = hashString.indexOf("?");
-
-  if (questionMarkIndex !== -1) {
-    [hash, queryString] = hashString.split("?");
-  } else {
-    const ampersandIndex = hashString.indexOf("&");
-
-    if (ampersandIndex !== -1) {
-      hash = hashString.slice(0, ampersandIndex);
-      queryString = hashString.slice(ampersandIndex + 1);
-    } else {
-      hash = hashString;
-    }
-  }
-
   const isPostApprovalAction = [
     APP_SWITCH_RETURN_HASH.ONAPPROVE,
     APP_SWITCH_RETURN_HASH.ONCANCEL,

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,325 @@ 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);
+  });
+
+  describe("hash URL variations", () => {
+    // Tests for all supported hash URL formats that the web fallback must handle.
+    // PayPal appends params to the URL after app switch; the exact position depends
+    // on the merchant's return_url structure.
+
+    test("#hash - plain hash with no params returns null", () => {
+      vi.spyOn(window, "location", "get").mockReturnValue({
+        hash: "#hash",
+        search: "",
+      });
+
+      const params = getAppSwitchResumeParams();
+
+      expect(params).toEqual(null);
+      expect(isAppSwitchResumeFlow()).toEqual(false);
+    });
+
+    test("?query=param#hash - PayPal params in search, merchant hash fragment", () => {
+      vi.spyOn(window, "location", "get").mockReturnValue({
+        hash: "#hash",
+        search: `?button_session_id=${buttonSessionID}&token=${orderID}&PayerID=PP-payer-122`,
+      });
+
+      const params = getAppSwitchResumeParams();
+
+      expect(params).toEqual({
+        buttonSessionID,
+        checkoutState: "onApprove",
+        orderID,
+        payerID: "PP-payer-122",
+      });
+      expect(isAppSwitchResumeFlow()).toEqual(true);
+    });
+
+    test("#hash?query=param - PayPal params embedded in hash after ?", () => {
+      vi.spyOn(window, "location", "get").mockReturnValue({
+        hash: `#hash?button_session_id=${buttonSessionID}&token=${orderID}&PayerID=PP-payer-122`,
+        search: "",
+      });
+
+      const params = getAppSwitchResumeParams();
+
+      expect(params).toEqual({
+        buttonSessionID,
+        checkoutState: "onApprove",
+        orderID,
+        payerID: "PP-payer-122",
+      });
+      expect(isAppSwitchResumeFlow()).toEqual(true);
+    });
+
+    test("/#/checkout/completed - SPA-style hash path with no params returns null", () => {
+      vi.spyOn(window, "location", "get").mockReturnValue({
+        hash: "#/checkout/completed",
+        search: "",
+      });
+
+      const params = getAppSwitchResumeParams();
+
+      expect(params).toEqual(null);
+      expect(isAppSwitchResumeFlow()).toEqual(false);
+    });
+
+    test("/#/checkout/completed?query=param - PayPal params after SPA-style hash path", () => {
+      vi.spyOn(window, "location", "get").mockReturnValue({
+        hash: `#/checkout/completed?button_session_id=${buttonSessionID}&token=${orderID}&PayerID=PP-payer-122`,
+        search: "",
+      });
+
+      const params = getAppSwitchResumeParams();
+
+      expect(params).toEqual({
+        buttonSessionID,
+        checkoutState: "onApprove",
+        orderID,
+        payerID: "PP-payer-122",
+      });
+      expect(isAppSwitchResumeFlow()).toEqual(true);
+    });
+
+    test("#onApprove&token=...&hash?param=value - native app return with & delimiter and merchant hash containing ?", () => {
+      // Native app constructs return URL with & delimiter between action and params,
+      // and the merchant's original hash fragment contained a ? (e.g. #hash?param1=value1).
+      // The ? must not cause a mis-split; & appears first so it takes priority.
+      vi.spyOn(window, "location", "get").mockReturnValue({
+        hash: `#onApprove&token=${orderID}&PayerID=PP-payer-122&button_session_id=${buttonSessionID}&switch_initiated_time=1772041777662&hash?param1=value1`,
+        search: "",
+      });
+
+      const params = getAppSwitchResumeParams();
+
+      expect(params).toEqual({
+        buttonSessionID,
+        checkoutState: "onApprove",
+        orderID,
+        payerID: "PP-payer-122",
+      });
+      expect(isAppSwitchResumeFlow()).toEqual(true);
+    });
+
+    test("#onCancel&token=...&hash?param=value - native app cancel with & delimiter and merchant hash containing ?", () => {
+      vi.spyOn(window, "location", "get").mockReturnValue({
+        hash: `#onCancel&token=${orderID}&button_session_id=${buttonSessionID}&hash?param1=value1`,
+        search: "",
+      });
+
+      const params = getAppSwitchResumeParams();
+
+      expect(params).toEqual({
+        buttonSessionID,
+        checkoutState: "onCancel",
+        orderID,
+      });
+      expect(isAppSwitchResumeFlow()).toEqual(true);
+    });
+
+    test("#onApprove?token=...&hash?param=value - native app return with ? delimiter and merchant hash containing ?", () => {
+      // Native app uses ? delimiter, and merchant hash also contains ?.
+      // The first ? splits action from params; the second ? is just part of param values.
+      vi.spyOn(window, "location", "get").mockReturnValue({
+        hash: `#onApprove?token=${orderID}&PayerID=PP-payer-122&button_session_id=${buttonSessionID}&hash?param1=value1`,
+        search: "",
+      });
+
+      const params = getAppSwitchResumeParams();
+
+      expect(params).toEqual({
+        buttonSessionID,
+        checkoutState: "onApprove",
+        orderID,
+        payerID: "PP-payer-122",
+      });
+      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;
+  });
 });

package/src/types.js

@@ -68,7 +68,6 @@ export type Experiment = {|
   venmoEnableWebOnNonNativeBrowser?: boolean,
   spbEagerOrderCreation?: boolean,
   paypalCreditButtonCreateVaultSetupTokenExists?: boolean,
-  isPaylaterCobrandedLabelEnabled?: boolean,
 |};
 
 export type Requires = {|

package/src/ui/buttons/button.jsx

@@ -109,13 +109,7 @@ export function Button({
   const colors = fundingConfig.colors;
   const secondaryColors = fundingConfig.secondaryColors || {};
 
-  let {
-    color,
-    period,
-    label,
-    shouldApplyRebrandedStyles,
-    shouldApplyPayNowOrLaterLabel,
-  } = style;
+  let { color, period, label, shouldApplyRebrandedStyles } = style;
 
   // if no color option is passed in via style props
   if (color === "" || typeof color === "undefined") {
@@ -195,10 +189,6 @@ export function Button({
           })
         : fundingConfig.labelText || fundingSource;
 
-    if (shouldApplyPayNowOrLaterLabel) {
-      labelText = "PayPal Pay Now or Later";
-    }
-
     if (!showPayLabel && instrument?.vendor && instrument.label) {
       labelText = instrument.secondaryInstruments
         ? `${instrument.secondaryInstruments[0].type} & ${instrument.vendor} ${instrument.label}`
@@ -244,7 +234,6 @@ export function Button({
       tagline={tagline}
       content={content}
       experiment={experiment}
-      shouldApplyPayNowOrLaterLabel={shouldApplyPayNowOrLaterLabel}
     />
   );
 

package/src/ui/buttons/props.js

@@ -48,7 +48,6 @@ import {
   MESSAGE_ALIGN,
 } from "../../constants";
 import { getFundingConfig, isFundingEligible } from "../../funding";
-import { componentContent } from "../../funding/content";
 import type { StateGetSet } from "../../lib/session";
 
 import { BUTTON_SIZE_STYLE } from "./config";
@@ -332,8 +331,6 @@ export type ButtonStyle = {|
   borderRadius?: number,
   shouldApplyRebrandedStyles: boolean,
   isButtonColorABTestMerchant: boolean,
-  isPayNowOrLaterLabelEligible: boolean,
-  shouldApplyPayNowOrLaterLabel: boolean,
 |};
 
 export type ButtonStyleInputs = {|
@@ -973,56 +970,6 @@ export function getButtonColor({
   }
 }
 
-export function getCobrandedBNPLLabelFlags(props: ?ButtonPropsInputs): {|
-  isPayNowOrLaterLabelEligible: boolean,
-  shouldApplyPayNowOrLaterLabel: boolean,
-|} {
-  const label = props?.style?.label;
-  const lang = props?.locale?.lang;
-  const isPurchaseFlow = props?.flow === BUTTON_FLOW.PURCHASE;
-  const isEnLang = Boolean(lang && componentContent[lang]?.PayNowOrLater);
-  const isCobrandedEligibleFundingSource =
-    props?.fundingSource === FUNDING.PAYPAL ||
-    props?.fundingSource === undefined;
-  const isPaylaterEligible =
-    props?.fundingEligibility?.paylater?.eligible || false;
-  const isLabelEligible = label === undefined || label === BUTTON_LABEL.PAYPAL;
-
-  const isPaylaterCobrandedLabelEnabled =
-    props?.experiment?.isPaylaterCobrandedLabelEnabled || false;
-
-  // add logs to help debug any issues for alpha branch, remove later
-  // eslint-disable-next-line no-console
-  console.log("getCobrandedBNPLLabelFlags:", {
-    isPaylaterCobrandedLabelEnabled,
-    isCobrandedEligibleFundingSource,
-    isPaylaterEligible,
-    isLabelEligible,
-    isEnLang,
-    isPurchaseFlow,
-  });
-
-  const isPayNowOrLaterLabelEligible = Boolean(
-    isPaylaterCobrandedLabelEnabled &&
-      isCobrandedEligibleFundingSource &&
-      isPaylaterEligible &&
-      isLabelEligible &&
-      isEnLang &&
-      isPurchaseFlow
-  );
-
-  // All eligible sessions are treatment for now; future: add randomization here
-  const shouldApplyPayNowOrLaterLabel = isPayNowOrLaterLabelEligible;
-
-  // eslint-disable-next-line no-console
-  console.log("getCobrandedBNPLLabelFlags result:", {
-    isPayNowOrLaterLabelEligible,
-    shouldApplyPayNowOrLaterLabel,
-  });
-
-  return { isPayNowOrLaterLabelEligible, shouldApplyPayNowOrLaterLabel };
-}
-
 const getDefaultButtonPropsInput = (): ButtonPropsInputs => {
   return {};
 };
@@ -1172,9 +1119,6 @@ export function normalizeButtonStyle(
     }
   }
 
-  const { isPayNowOrLaterLabelEligible, shouldApplyPayNowOrLaterLabel } =
-    getCobrandedBNPLLabelFlags(props);
-
   return {
     label,
     layout,
@@ -1189,8 +1133,6 @@ export function normalizeButtonStyle(
     borderRadius,
     shouldApplyRebrandedStyles,
     isButtonColorABTestMerchant,
-    isPayNowOrLaterLabelEligible,
-    shouldApplyPayNowOrLaterLabel,
   };
 }