@paypal/checkout-components 5.0.381 → 5.0.383-alpha-0983e51.0

package/src/funding/util.test.js

@@ -0,0 +1,264 @@
+/* @flow */
+
+import { vi, describe, it, expect, beforeEach, afterEach } from "vitest";
+import {
+  isWebView,
+  isIosWebview,
+  isAndroidWebview,
+  isFacebookWebView,
+  isOperaMini,
+  isFirefoxIOS,
+  isEdgeIOS,
+  isQQBrowser,
+  isElectron,
+  supportsPopups,
+  isTablet,
+  isIos,
+  isSafari,
+  isAndroid,
+  isChrome,
+  isFirefox,
+} from "@krakenjs/belter/src";
+
+import { supportsVenmoPopups, isSupportedNativeVenmoBrowser } from "./util";
+
+// Mock all the browser detection functions from belter
+vi.mock("@krakenjs/belter/src", () => ({
+  isWebView: vi.fn(),
+  isIosWebview: vi.fn(),
+  isAndroidWebview: vi.fn(),
+  isFacebookWebView: vi.fn(),
+  isOperaMini: vi.fn(),
+  isFirefoxIOS: vi.fn(),
+  isEdgeIOS: vi.fn(),
+  isQQBrowser: vi.fn(),
+  isElectron: vi.fn(),
+  supportsPopups: vi.fn(),
+  isTablet: vi.fn(),
+  isIos: vi.fn(),
+  isSafari: vi.fn(),
+  isAndroid: vi.fn(),
+  isChrome: vi.fn(),
+  isFirefox: vi.fn(),
+}));
+
+describe("funding/util", () => {
+  const defaultUserAgent =
+    "Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1";
+
+  beforeEach(() => {
+    // Reset all mocks before each test
+    vi.clearAllMocks();
+
+    // Reset window.popupBridge
+    delete window.popupBridge;
+
+    // Set default mock return values
+    vi.mocked(isWebView).mockReturnValue(false);
+    vi.mocked(isIosWebview).mockReturnValue(false);
+    vi.mocked(isAndroidWebview).mockReturnValue(false);
+    vi.mocked(isFacebookWebView).mockReturnValue(false);
+    vi.mocked(isOperaMini).mockReturnValue(false);
+    vi.mocked(isFirefoxIOS).mockReturnValue(false);
+    vi.mocked(isEdgeIOS).mockReturnValue(false);
+    vi.mocked(isQQBrowser).mockReturnValue(false);
+    vi.mocked(isElectron).mockReturnValue(false);
+    vi.mocked(supportsPopups).mockReturnValue(true);
+    vi.mocked(isTablet).mockReturnValue(false);
+    vi.mocked(isIos).mockReturnValue(false);
+    vi.mocked(isSafari).mockReturnValue(false);
+    vi.mocked(isAndroid).mockReturnValue(false);
+    vi.mocked(isChrome).mockReturnValue(false);
+    vi.mocked(isFirefox).mockReturnValue(false);
+  });
+
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+
+  describe("supportsVenmoPopups", () => {
+    describe("when in supported webview", () => {
+      beforeEach(() => {
+        vi.mocked(isWebView).mockReturnValue(true);
+      });
+
+      it("should return true when popupBridge is available", () => {
+        window.popupBridge = {};
+
+        expect(supportsVenmoPopups({}, defaultUserAgent)).toBe(true);
+      });
+
+      it("should return false when popupBridge is not available", () => {
+        expect(supportsVenmoPopups({}, defaultUserAgent)).toBe(false);
+      });
+    });
+
+    describe("when not in supported webview", () => {
+      it("should return true when experiment flag is enabled and user agent supports popups", () => {
+        vi.mocked(supportsPopups).mockReturnValue(true);
+        const experiment = { venmoEnableWebOnNonNativeBrowser: true };
+
+        expect(supportsVenmoPopups(experiment, defaultUserAgent)).toBe(true);
+      });
+
+      it("should return false when experiment flag is enabled but user agent doesn't support popups due to isOperaMini", () => {
+        vi.mocked(isOperaMini).mockReturnValue(true);
+        const experiment = { venmoEnableWebOnNonNativeBrowser: true };
+
+        expect(supportsVenmoPopups(experiment, defaultUserAgent)).toBe(false);
+      });
+
+      it("should return false when experiment flag is enabled but user agent doesn't support popups due to isFirefoxIOS", () => {
+        vi.mocked(isFirefoxIOS).mockReturnValue(true);
+        const experiment = { venmoEnableWebOnNonNativeBrowser: true };
+
+        expect(supportsVenmoPopups(experiment, defaultUserAgent)).toBe(false);
+      });
+
+      it("should return false when experiment flag is enabled but user agent doesn't support popups due to isEdgeIOS", () => {
+        vi.mocked(isEdgeIOS).mockReturnValue(true);
+        const experiment = { venmoEnableWebOnNonNativeBrowser: true };
+
+        expect(supportsVenmoPopups(experiment, defaultUserAgent)).toBe(false);
+      });
+
+      it("should return false when experiment flag is enabled but user agent doesn't support popups due to isQQBrowser", () => {
+        vi.mocked(isQQBrowser).mockReturnValue(true);
+        const experiment = { venmoEnableWebOnNonNativeBrowser: true };
+
+        expect(supportsVenmoPopups(experiment, defaultUserAgent)).toBe(false);
+      });
+
+      it("should return false when experiment flag is enabled but user agent doesn't support popups due to isElectron", () => {
+        vi.mocked(isElectron).mockReturnValue(true);
+        const experiment = { venmoEnableWebOnNonNativeBrowser: true };
+
+        expect(supportsVenmoPopups(experiment, defaultUserAgent)).toBe(false);
+      });
+
+      it("should fall back to supportsPopups when experiment flag is not enabled", () => {
+        vi.mocked(supportsPopups).mockReturnValue(true);
+        const experiment = {};
+
+        expect(supportsVenmoPopups(experiment, defaultUserAgent)).toBe(true);
+      });
+
+      it("should fall back to supportsPopups when experiment flag is false", () => {
+        vi.mocked(supportsPopups).mockReturnValue(false);
+        const experiment = { venmoEnableWebOnNonNativeBrowser: false };
+
+        expect(supportsVenmoPopups(experiment, defaultUserAgent)).toBe(false);
+      });
+
+      it("should handle undefined experiment", () => {
+        vi.mocked(supportsPopups).mockReturnValue(true);
+
+        expect(supportsVenmoPopups(undefined, defaultUserAgent)).toBe(true);
+      });
+    });
+  });
+
+  describe("isSupportedNativeVenmoBrowser", () => {
+    describe("when in supported webview", () => {
+      beforeEach(() => {
+        vi.mocked(isWebView).mockReturnValue(true);
+      });
+
+      it("should return true when popupBridge is available", () => {
+        window.popupBridge = {};
+
+        expect(isSupportedNativeVenmoBrowser({}, defaultUserAgent)).toBe(true);
+      });
+
+      it("should return false when popupBridge is not available", () => {
+        expect(isSupportedNativeVenmoBrowser({}, defaultUserAgent)).toBe(false);
+      });
+    });
+
+    describe("when not in supported webview", () => {
+      it("should return false when on tablet", () => {
+        vi.mocked(isTablet).mockReturnValue(true);
+
+        expect(isSupportedNativeVenmoBrowser({}, defaultUserAgent)).toBe(false);
+      });
+
+      it("should return true for iOS Safari by default", () => {
+        vi.mocked(isIos).mockReturnValue(true);
+        vi.mocked(isSafari).mockReturnValue(true);
+
+        expect(isSupportedNativeVenmoBrowser({}, defaultUserAgent)).toBe(true);
+      });
+
+      it("should return true for Android Chrome by default", () => {
+        vi.mocked(isAndroid).mockReturnValue(true);
+        vi.mocked(isChrome).mockReturnValue(true);
+
+        expect(isSupportedNativeVenmoBrowser({}, defaultUserAgent)).toBe(true);
+      });
+
+      it("should return false for iOS Chrome without experiment flag", () => {
+        vi.mocked(isIos).mockReturnValue(true);
+        vi.mocked(isChrome).mockReturnValue(true);
+
+        expect(isSupportedNativeVenmoBrowser({}, defaultUserAgent)).toBe(false);
+      });
+
+      it("should return true for iOS Chrome with experiment flag", () => {
+        vi.mocked(isIos).mockReturnValue(true);
+        vi.mocked(isChrome).mockReturnValue(true);
+        const experiment = { venmoEnableWebOnNonNativeBrowser: true };
+
+        expect(
+          isSupportedNativeVenmoBrowser(experiment, defaultUserAgent)
+        ).toBe(true);
+      });
+
+      it("should return false for Android Firefox without experiment flag", () => {
+        vi.mocked(isAndroid).mockReturnValue(true);
+        vi.mocked(isFirefox).mockReturnValue(true);
+
+        expect(isSupportedNativeVenmoBrowser({}, defaultUserAgent)).toBe(false);
+      });
+
+      it("should return true for Android Firefox with experiment flag", () => {
+        vi.mocked(isAndroid).mockReturnValue(true);
+        vi.mocked(isFirefox).mockReturnValue(true);
+        const experiment = { venmoEnableWebOnNonNativeBrowser: true };
+
+        expect(
+          isSupportedNativeVenmoBrowser(experiment, defaultUserAgent)
+        ).toBe(true);
+      });
+
+      it("should return false for unsupported browser combinations", () => {
+        vi.mocked(isIos).mockReturnValue(true);
+        vi.mocked(isFirefox).mockReturnValue(true); // iOS Firefox (not Chrome)
+
+        expect(isSupportedNativeVenmoBrowser({}, defaultUserAgent)).toBe(false);
+      });
+
+      it("should return false for desktop browsers", () => {
+        // No mobile flags set, simulating desktop
+
+        expect(isSupportedNativeVenmoBrowser({}, defaultUserAgent)).toBe(false);
+      });
+
+      it("should handle undefined experiment", () => {
+        vi.mocked(isIos).mockReturnValue(true);
+        vi.mocked(isSafari).mockReturnValue(true);
+
+        expect(isSupportedNativeVenmoBrowser(undefined, defaultUserAgent)).toBe(
+          true
+        );
+      });
+
+      it("should prioritize tablet check over browser checks", () => {
+        vi.mocked(isTablet).mockReturnValue(true);
+        vi.mocked(isIos).mockReturnValue(true);
+        vi.mocked(isSafari).mockReturnValue(true);
+
+        expect(isSupportedNativeVenmoBrowser({}, defaultUserAgent)).toBe(false);
+      });
+    });
+  });
+});

package/src/funding/venmo/config.jsx

@@ -48,19 +48,18 @@ export function getVenmoConfig(): FundingSourceConfig {
       return true;
     },
 
-    requires: ({ experiment, platform }) => {
-      const isNonNativeSupported =
-        experiment?.venmoEnableWebOnNonNativeBrowser === true ||
-        (__WEB__ && window.popupBridge);
-
+    requires: ({ platform }) => {
       if (platform === PLATFORM.MOBILE) {
         return {
-          native: isNonNativeSupported ? false : true,
-          popup: isNonNativeSupported ? false : true,
+          native: true,
+          popup: true,
         };
       }
 
-      return {};
+      return {
+        native: false,
+        popup: false,
+      };
     },
 
     Logo: ({ logoColor, optional, shouldApplyRebrandedStyles }) => {

package/src/funding/venmo/config.test.js

@@ -8,6 +8,9 @@ import { BUTTON_FLOW } from "../../constants";
 import { getVenmoConfig } from "./config";
 
 describe("Venmo eligibility", () => {
+  window.navigator.mockUserAgent =
+    "Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1";
+
   const baseEligibilityProps = {
     fundingSource: undefined,
     components: ["buttons"],
@@ -102,58 +105,35 @@ describe("Venmo eligibility", () => {
   });
 
   describe("requires", () => {
-    test("should not check for native or popup eligibility if platform is mobile and window.popupBridge is defined", () => {
-      window.popupBridge = {};
-
-      const isVenmoEligible = venmoConfig.requires?.({
-        experiment: {
-          venmoEnableWebOnNonNativeBrowser: true,
-        },
+    test("should require native and popup support when platform is mobile", () => {
+      const venmoRequires = venmoConfig.requires?.({
         platform: PLATFORM.MOBILE,
       });
 
-      expect(isVenmoEligible).toEqual({
-        native: false,
-        popup: false,
+      expect(venmoRequires).toEqual({
+        native: true,
+        popup: true,
       });
-
-      window.popupBridge = undefined;
     });
 
-    test("should not check for native or popup eligibility if platform is mobile and venmoEnableWebOnNonNativeBrowser is true", () => {
-      const isVenmoEligible = venmoConfig.requires?.({
-        experiment: {
-          venmoEnableWebOnNonNativeBrowser: true,
-        },
-        platform: PLATFORM.MOBILE,
+    test("should not require native or popup support when platform is desktop", () => {
+      const venmoRequires = venmoConfig.requires?.({
+        platform: PLATFORM.DESKTOP,
       });
 
-      expect(isVenmoEligible).toEqual({
+      expect(venmoRequires).toEqual({
         native: false,
         popup: false,
       });
     });
 
-    test("should check for native and popup eligibility if platform is mobile and venmoEnableWebOnNonNativeBrowser is false and window.popupBridge is not defined", () => {
-      const isVenmoEligible = venmoConfig.requires?.({
-        experiment: {
-          venmoEnableWebOnNonNativeBrowser: false,
-        },
-        platform: PLATFORM.MOBILE,
-      });
+    test("should not require native or popup support when platform is not specified", () => {
+      const venmoRequires = venmoConfig.requires?.({});
 
-      expect(isVenmoEligible).toEqual({
-        native: true,
-        popup: true,
-      });
-    });
-
-    test("should not check for native and popup eligibility if platform is not mobile", () => {
-      const isVenmoEligible = venmoConfig.requires?.({
-        platform: PLATFORM.DESKTOP,
+      expect(venmoRequires).toEqual({
+        native: false,
+        popup: false,
       });
-
-      expect(isVenmoEligible).toEqual({});
     });
   });
 });

package/src/marks/component.jsx

@@ -9,6 +9,7 @@ import {
   memoize,
   isApplePaySupported,
   supportsPopups as userAgentSupportsPopups,
+  getUserAgent,
 } from "@krakenjs/belter/src";
 import {
   PLATFORM,
@@ -50,6 +51,7 @@ type MarksProps = {|
   onShippingAddressChange?: OnShippingAddressChange,
   onShippingOptionsChange?: OnShippingOptionsChange,
   displayOnly?: $ReadOnlyArray<$Values<typeof DISPLAY_ONLY_VALUES>>,
+  userAgent: string,
 |};
 
 export type MarksComponent = (MarksProps) => MarksInstance;
@@ -61,6 +63,7 @@ export const getMarksComponent: () => MarksComponent = memoize(() => {
     onShippingAddressChange,
     onShippingOptionsChange,
     displayOnly,
+    userAgent = getUserAgent(),
   }: MarksProps = {}): MarksInstance {
     const height = DEFAULT_HEIGHT;
     const fundingEligibility = getFundingEligibility();
@@ -97,6 +100,7 @@ export const getMarksComponent: () => MarksComponent = memoize(() => {
       supportedNativeBrowser,
       experiment,
       displayOnly,
+      userAgent,
     });
     const env = getEnv();
 
@@ -121,6 +125,7 @@ export const getMarksComponent: () => MarksComponent = memoize(() => {
         supportedNativeBrowser,
         experiment,
         displayOnly,
+        userAgent,
       });
     };
 

package/src/ui/buttons/buttons.jsx

@@ -168,6 +168,7 @@ export function Buttons(props: ButtonsProps): ElementNode {
     userIDToken,
     vault,
     wallet,
+    userAgent,
   } = normalizeButtonProps(props);
   const { layout, shape, tagline } = style;
 
@@ -190,6 +191,7 @@ export function Buttons(props: ButtonsProps): ElementNode {
     supportedNativeBrowser,
     experiment,
     displayOnly,
+    userAgent,
   });
   const multiple = fundingSources.length > 1;
 

package/src/ui/buttons/props.js

@@ -491,6 +491,7 @@ export type RenderButtonProps = {|
   displayOnly?: $ReadOnlyArray<$Values<typeof DISPLAY_ONLY_VALUES>>,
   message?: ButtonMessage,
   messageMarkup?: string,
+  userAgent: string,
 |};
 
 export type PrerenderDetails = {|
@@ -633,6 +634,7 @@ export type ButtonProps = {|
   message?: ButtonMessage,
   messageMarkup?: string,
   hideSubmitButtonForCardForm?: boolean,
+  userAgent: string,
 |};
 
 // eslint-disable-next-line flowtype/require-exact-type
@@ -683,6 +685,7 @@ export type ButtonPropsInputs = {
   messageMarkup?: string | void,
   renderedButtons: $ReadOnlyArray<$Values<typeof FUNDING>>,
   buttonColor: ButtonColor,
+  userAgent: string,
 };
 
 export const DEFAULT_STYLE = {
@@ -1262,6 +1265,7 @@ export function normalizeButtonProps(
     messageMarkup,
     renderedButtons,
     shopperSessionId,
+    userAgent,
   } = props;
 
   const { country, lang } = locale;
@@ -1315,6 +1319,7 @@ export function normalizeButtonProps(
         supportsPopups,
         supportedNativeBrowser,
         displayOnly,
+        userAgent,
       })
     ) {
       throw new Error(`Funding Source not eligible: ${fundingSource}`);
@@ -1366,5 +1371,6 @@ export function normalizeButtonProps(
     displayOnly,
     message,
     messageMarkup,
+    userAgent,
   };
 }

package/src/ui/buttons/styles/button.js

@@ -211,7 +211,7 @@ export const buttonRebrandStyle = `
         width: auto;
     }
 
-    // Hide/show credit/paylater logos based on button width
+    /* Hide/show credit/paylater logos based on button width */
     @media only screen and (min-width: 0px) and (max-width: 150px) {
         [${ATTRIBUTE.FUNDING_SOURCE}="credit"].${CLASS.BUTTON_REBRAND} .${CLASS.BUTTON_LABEL} .${CLASS.LOGO_REBRAND},
         [${ATTRIBUTE.FUNDING_SOURCE}="paylater"].${CLASS.BUTTON_REBRAND} .${CLASS.BUTTON_LABEL} .${CLASS.LOGO_REBRAND} {

package/src/zoid/buttons/component.jsx

@@ -61,6 +61,7 @@ import {
   isApplePaySupported,
   supportsPopups as userAgentSupportsPopups,
   noop,
+  getUserAgent,
 } from "@krakenjs/belter/src";
 import {
   FUNDING,
@@ -89,6 +90,10 @@ import {
   type ButtonExtensions,
 } from "../../ui/buttons/props";
 import { isFundingEligible } from "../../funding";
+import {
+  supportsVenmoPopups,
+  isSupportedNativeVenmoBrowser,
+} from "../../funding/util";
 import { getPixelComponent } from "../pixel";
 import { CLASS } from "../../constants";
 import { PayPalAppSwitchOverlay } from "../../ui/overlay/paypal-app-switch/overlay";
@@ -251,6 +256,7 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         createSubscription,
         createVaultSetupToken,
         displayOnly,
+        userAgent,
       } = props;
 
       const flow = determineFlow({
@@ -294,6 +300,7 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
           supportedNativeBrowser,
           experiment,
           displayOnly,
+          userAgent,
         })
       ) {
         return {
@@ -714,6 +721,7 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
             createSubscription,
             createVaultSetupToken,
             displayOnly,
+            userAgent = getUserAgent(),
           } = props;
 
           const flow = determineFlow({
@@ -744,6 +752,7 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
               supportsPopups,
               supportedNativeBrowser,
               displayOnly,
+              userAgent,
             })
           ) {
             throw new Error(`${fundingSource} is not eligible`);
@@ -1266,13 +1275,28 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
 
       supportedNativeBrowser: {
         type: "boolean",
-        value: isSupportedNativeBrowser,
+        value: ({ props }) => {
+          if (props.fundingSource === FUNDING.VENMO) {
+            return isSupportedNativeVenmoBrowser(
+              props.experiment,
+              props.userAgent
+            );
+          }
+
+          return isSupportedNativeBrowser();
+        },
         queryParam: true,
       },
 
       supportsPopups: {
         type: "boolean",
-        value: () => userAgentSupportsPopups(),
+        value: ({ props }) => {
+          if (props.fundingSource === FUNDING.VENMO) {
+            return supportsVenmoPopups(props.experiment, props.userAgent);
+          }
+
+          return userAgentSupportsPopups();
+        },
         queryParam: true,
       },
 
@@ -1316,6 +1340,13 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         required: false,
         queryParam: true,
       },
+
+      userAgent: {
+        type: "string",
+        required: false,
+        queryParam: true,
+        value: getUserAgent,
+      },
     },
 
     exports: {