@paypal/checkout-components 5.0.385 → 5.0.386

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.385",
+  "version": "5.0.386",
   "description": "PayPal Checkout components, for integrating checkout products.",
   "main": "index.js",
   "scripts": {
@@ -23,7 +23,6 @@
     "jest-ssr": "jest test/ssr --env=node --no-cache --collectCoverage --collectCoverageFrom='src/' --coverageDirectory='coverage/jest'",
     "karma": "cross-env NODE_ENV=test babel-node ./node_modules/.bin/karma start",
     "lint": "eslint --ext .js --ext .jsx src/ test/ *.js",
-    "lint:fix": "eslint --ext .js --ext .jsx src/ test/ *.js --fix",
     "postversion": "./scripts/postversion.sh",
     "preversion": "./scripts/preversion.sh",
     "reinstall": "rimraf flow-typed && rimraf node_modules && npm install && npm run flow-typed",

package/src/funding/funding.js

@@ -16,7 +16,6 @@ import type { Wallet, Experiment } from "../types";
 import { BUTTON_LAYOUT, BUTTON_FLOW } from "../constants";
 
 import { getFundingConfig } from "./config";
-import { supportsVenmoPopups, isSupportedNativeVenmoBrowser } from "./util";
 
 type IsFundingEligibleOptions = {|
   layout?: $Values<typeof BUTTON_LAYOUT>,
@@ -36,7 +35,6 @@ type IsFundingEligibleOptions = {|
   supportedNativeBrowser: boolean,
   experiment?: Experiment,
   displayOnly?: $ReadOnlyArray<$Values<typeof DISPLAY_ONLY_VALUES>>,
-  userAgent?: string,
 |};
 
 function isFundingVaultable({
@@ -86,7 +84,6 @@ export function isFundingEligible(
     supportedNativeBrowser,
     experiment,
     displayOnly,
-    userAgent,
   }: IsFundingEligibleOptions
 ): boolean {
   if (!fundingEligibility[source] || !fundingEligibility[source].eligible) {
@@ -159,17 +156,10 @@ export function isFundingEligible(
     return false;
   }
 
-  if (fundingConfig.requires && userAgent) {
+  if (fundingConfig.requires) {
     const required = fundingConfig.requires({ experiment, platform });
-    const popupSupport =
-      source === FUNDING.VENMO
-        ? supportsVenmoPopups(experiment, userAgent)
-        : supportsPopups;
-    const nativeBrowserSupport =
-      source === FUNDING.VENMO
-        ? isSupportedNativeVenmoBrowser(experiment, userAgent)
-        : supportedNativeBrowser;
-    if (required.popup === true && popupSupport === false) {
+
+    if (required.popup === true && supportsPopups === false) {
       return false;
     }
 
@@ -177,7 +167,7 @@ export function isFundingEligible(
       return false;
     }
 
-    if (required.native === true && nativeBrowserSupport === false) {
+    if (required.native === true && supportedNativeBrowser === false) {
       return false;
     }
   }
@@ -214,7 +204,6 @@ export function determineEligibleFunding({
   supportedNativeBrowser,
   experiment,
   displayOnly = [],
-  userAgent = "",
 }: {|
   fundingSource: ?$Values<typeof FUNDING>,
   remembered: $ReadOnlyArray<$Values<typeof FUNDING>>,
@@ -234,7 +223,6 @@ export function determineEligibleFunding({
   supportedNativeBrowser: boolean,
   experiment: Experiment,
   displayOnly?: $ReadOnlyArray<$Values<typeof DISPLAY_ONLY_VALUES>>,
-  userAgent?: string,
 |}): $ReadOnlyArray<$Values<typeof FUNDING>> {
   if (fundingSource) {
     return [fundingSource];
@@ -259,7 +247,6 @@ export function determineEligibleFunding({
       supportedNativeBrowser,
       experiment,
       displayOnly,
-      userAgent,
     })
   );
 

package/src/funding/funding.test.js

@@ -1,23 +1,10 @@
 /* @flow */
-import { COMPONENTS, FUNDING } from "@paypal/sdk-constants/src";
-import { describe, expect, vi, beforeEach, afterEach } from "vitest";
+import { COMPONENTS, FUNDING, PLATFORM } from "@paypal/sdk-constants/src";
+import { describe, expect } from "vitest";
 
 import { BUTTON_FLOW } from "../constants";
 
 import { isFundingEligible, isWalletFundingEligible } from "./funding";
-import { supportsVenmoPopups, isSupportedNativeVenmoBrowser } from "./util";
-import { getFundingConfig } from "./config";
-
-// Mock the venmo utility functions
-vi.mock("./util", () => ({
-  supportsVenmoPopups: vi.fn(),
-  isSupportedNativeVenmoBrowser: vi.fn(),
-}));
-
-// Mock getFundingConfig to control funding config behavior
-vi.mock("./config", () => ({
-  getFundingConfig: vi.fn(),
-}));
 
 const defaultMockFundingOptions = {
   platform: "desktop",
@@ -68,41 +55,9 @@ const defaultMockFundingOptions = {
   onShippingChange: null,
   onShippingAddressChange: null,
   onShippingOptionsChange: null,
-  userAgent:
-    "Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Mobile/15E148 Safari/604.1",
 };
 
 describe("Funding eligibility", () => {
-  beforeEach(() => {
-    // Mock getFundingConfig with basic configs for all funding sources
-    vi.mocked(getFundingConfig).mockReturnValue({
-      [FUNDING.PAYLATER]: {
-        enabled: true,
-        automatic: true,
-      },
-      [FUNDING.CARD]: {
-        enabled: true,
-        automatic: true,
-      },
-      [FUNDING.SEPA]: {
-        enabled: false,
-        automatic: false,
-      },
-      [FUNDING.OXXO]: {
-        enabled: false,
-        automatic: false,
-      },
-      [FUNDING.VENMO]: {
-        enabled: true,
-        automatic: true,
-      },
-      [FUNDING.PAYPAL]: {
-        enabled: true,
-        automatic: true,
-      },
-    });
-  });
-
   describe("Desktop", () => {
     test("should not be eligible if funding source is missing from fundingEligibility", () => {
       const fundingEligible = isFundingEligible(
@@ -218,268 +173,29 @@ describe("Funding eligibility", () => {
       });
     });
 
-    describe("Venmo-specific funding requirements", () => {
-      beforeEach(() => {
-        // Reset all mocks before each test
-        vi.clearAllMocks();
-
-        // Mock getFundingConfig to return configs with venmo requirements
-        vi.mocked(getFundingConfig).mockReturnValue({
-          [FUNDING.PAYLATER]: {
-            enabled: true,
-            automatic: true,
-          },
-          [FUNDING.CARD]: {
-            enabled: true,
-            automatic: true,
-          },
-          [FUNDING.SEPA]: {
-            enabled: false,
-            automatic: false,
-          },
-          [FUNDING.OXXO]: {
-            enabled: false,
-            automatic: false,
-          },
-          [FUNDING.VENMO]: {
-            enabled: true,
-            automatic: true,
-            requires: () => ({
-              popup: true,
-              native: true,
-            }),
-          },
-          [FUNDING.PAYPAL]: {
-            enabled: true,
-            automatic: true,
-            requires: () => ({
-              popup: true,
-              native: true,
-            }),
-          },
-        });
-      });
-
-      afterEach(() => {
-        vi.resetAllMocks();
-      });
-
-      test("should use supportsVenmoPopups for venmo funding source when popup is required", () => {
-        vi.mocked(supportsVenmoPopups).mockReturnValue(true);
-        vi.mocked(isSupportedNativeVenmoBrowser).mockReturnValue(true);
-
-        const options = {
-          ...defaultMockFundingOptions,
-          fundingSource: FUNDING.VENMO,
-          platform: "mobile",
-          experiment: { venmoEnableWebOnNonNativeBrowser: true },
-        };
-
-        const result = isFundingEligible(FUNDING.VENMO, options);
-
-        expect(supportsVenmoPopups).toHaveBeenCalledWith(
-          options.experiment,
-          options.userAgent
-        );
-        expect(result).toBe(true);
-      });
-
-      test("should use isSupportedNativeVenmoBrowser for venmo funding source when native is required", () => {
-        vi.mocked(supportsVenmoPopups).mockReturnValue(true);
-        vi.mocked(isSupportedNativeVenmoBrowser).mockReturnValue(true);
-
-        const options = {
-          ...defaultMockFundingOptions,
-          fundingSource: FUNDING.VENMO,
-          platform: "mobile",
-          experiment: { venmoEnableWebOnNonNativeBrowser: true },
-        };
-
-        const result = isFundingEligible(FUNDING.VENMO, options);
-
-        expect(isSupportedNativeVenmoBrowser).toHaveBeenCalledWith(
-          options.experiment,
-          options.userAgent
-        );
-        expect(result).toBe(true);
-      });
-
-      test("should return false when venmo popup support is required but supportsVenmoPopups returns false", () => {
-        vi.mocked(supportsVenmoPopups).mockReturnValue(false);
-        vi.mocked(isSupportedNativeVenmoBrowser).mockReturnValue(true);
-
-        const options = {
-          ...defaultMockFundingOptions,
-          fundingSource: FUNDING.VENMO,
-          platform: "mobile",
-          experiment: {},
-        };
-
-        const result = isFundingEligible(FUNDING.VENMO, options);
-
-        expect(supportsVenmoPopups).toHaveBeenCalledWith(
-          options.experiment,
-          options.userAgent
-        );
-        expect(result).toBe(false);
-      });
-
-      test("should return false when venmo native support is required but isSupportedNativeVenmoBrowser returns false", () => {
-        vi.mocked(supportsVenmoPopups).mockReturnValue(true);
-        vi.mocked(isSupportedNativeVenmoBrowser).mockReturnValue(false);
+    describe("Mobile", () => {
+      test("should be eligible if window.popupBridge is defined for Venmo and supportsPopups is false", () => {
+        window.popupBridge = {};
 
-        const options = {
+        const fundingEligible = isFundingEligible(FUNDING.VENMO, {
           ...defaultMockFundingOptions,
-          fundingSource: FUNDING.VENMO,
-          platform: "mobile",
-          experiment: {},
-        };
-
-        const result = isFundingEligible(FUNDING.VENMO, options);
-
-        expect(isSupportedNativeVenmoBrowser).toHaveBeenCalledWith(
-          options.experiment,
-          options.userAgent
-        );
-        expect(result).toBe(false);
-      });
-
-      test("should use standard supportsPopups for non-venmo funding sources", () => {
-        vi.mocked(supportsVenmoPopups).mockReturnValue(false);
-        vi.mocked(isSupportedNativeVenmoBrowser).mockReturnValue(false);
-
-        // Update the mock to not require popup and native for PayPal to isolate the test
-        vi.mocked(getFundingConfig).mockReturnValue({
-          [FUNDING.PAYLATER]: {
-            enabled: true,
-            automatic: true,
-          },
-          [FUNDING.CARD]: {
-            enabled: true,
-            automatic: true,
-          },
-          [FUNDING.SEPA]: {
-            enabled: false,
-            automatic: false,
-          },
-          [FUNDING.OXXO]: {
-            enabled: false,
-            automatic: false,
-          },
-          [FUNDING.VENMO]: {
-            enabled: true,
-            automatic: true,
-            requires: () => ({
-              popup: true,
-              native: true,
-            }),
-          },
-          [FUNDING.PAYPAL]: {
-            enabled: true,
-            automatic: true,
-            // No requires function for PayPal to test standard behavior
-          },
+          platform: PLATFORM.MOBILE,
+          supportsPopups: false,
         });
 
-        const options = {
-          ...defaultMockFundingOptions,
-          fundingSource: FUNDING.PAYPAL,
-          platform: "mobile",
-          supportsPopups: true,
-          supportedNativeBrowser: true,
-          experiment: {},
-          fundingEligibility: {
-            ...defaultMockFundingOptions.fundingEligibility,
-            paypal: {
-              eligible: true,
-              vaultable: false,
-              branded: false,
-            },
-          },
-        };
-
-        const result = isFundingEligible(FUNDING.PAYPAL, options);
+        expect(fundingEligible).toBe(true);
 
-        // Venmo functions should not be called for non-venmo sources
-        expect(supportsVenmoPopups).not.toHaveBeenCalled();
-        expect(isSupportedNativeVenmoBrowser).not.toHaveBeenCalled();
-        expect(result).toBe(true);
+        window.popupBridge = undefined;
       });
 
-      test("should handle undefined experiment parameter for venmo", () => {
-        vi.mocked(supportsVenmoPopups).mockReturnValue(true);
-        vi.mocked(isSupportedNativeVenmoBrowser).mockReturnValue(true);
-
-        const options = {
+      test("should not be eligible if window.popupBridge is undefined for Venmo and supportsPopups is false", () => {
+        const fundingEligible = isFundingEligible(FUNDING.VENMO, {
           ...defaultMockFundingOptions,
-          fundingSource: FUNDING.VENMO,
-          platform: "mobile",
-          experiment: undefined,
-        };
-
-        const result = isFundingEligible(FUNDING.VENMO, options);
-
-        expect(supportsVenmoPopups).toHaveBeenCalledWith(
-          undefined,
-          options.userAgent
-        );
-        expect(isSupportedNativeVenmoBrowser).toHaveBeenCalledWith(
-          undefined,
-          options.userAgent
-        );
-        expect(result).toBe(true);
-      });
-
-      test("should pass through experiment flags to venmo utility functions", () => {
-        vi.mocked(supportsVenmoPopups).mockReturnValue(true);
-        vi.mocked(isSupportedNativeVenmoBrowser).mockReturnValue(true);
-
-        const experimentFlags = {
-          venmoEnableWebOnNonNativeBrowser: true,
-          venmoVaultWithoutPurchase: false,
-        };
-
-        const options = {
-          ...defaultMockFundingOptions,
-          fundingSource: FUNDING.VENMO,
-          platform: "mobile",
-          experiment: experimentFlags,
-        };
-
-        const result = isFundingEligible(FUNDING.VENMO, options);
-
-        expect(supportsVenmoPopups).toHaveBeenCalledWith(
-          experimentFlags,
-          options.userAgent
-        );
-        expect(isSupportedNativeVenmoBrowser).toHaveBeenCalledWith(
-          experimentFlags,
-          options.userAgent
-        );
-        expect(result).toBe(true);
-      });
-
-      test("should respect combination of venmo popup and native requirements", () => {
-        // Test case where popup succeeds but native fails
-        vi.mocked(supportsVenmoPopups).mockReturnValue(true);
-        vi.mocked(isSupportedNativeVenmoBrowser).mockReturnValue(false);
-
-        const options = {
-          ...defaultMockFundingOptions,
-          fundingSource: FUNDING.VENMO,
-          platform: "mobile",
-          experiment: {},
-        };
-
-        const result = isFundingEligible(FUNDING.VENMO, options);
-
-        expect(result).toBe(false);
-
-        // Test case where both succeed
-        vi.mocked(isSupportedNativeVenmoBrowser).mockReturnValue(true);
+          platform: PLATFORM.MOBILE,
+          supportsPopups: false,
+        });
 
-        const result2 = isFundingEligible(FUNDING.VENMO, options);
-        expect(result2).toBe(true);
+        expect(fundingEligible).toBe(false);
       });
     });
   });

package/src/funding/venmo/config.jsx

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

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

@@ -8,9 +8,6 @@ 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"],
@@ -105,35 +102,58 @@ describe("Venmo eligibility", () => {
   });
 
   describe("requires", () => {
-    test("should require native and popup support when platform is mobile", () => {
-      const venmoRequires = venmoConfig.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,
+        },
         platform: PLATFORM.MOBILE,
       });
 
-      expect(venmoRequires).toEqual({
-        native: true,
-        popup: true,
+      expect(isVenmoEligible).toEqual({
+        native: false,
+        popup: false,
       });
+
+      window.popupBridge = undefined;
     });
 
-    test("should not require native or popup support when platform is desktop", () => {
-      const venmoRequires = venmoConfig.requires?.({
-        platform: PLATFORM.DESKTOP,
+    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,
       });
 
-      expect(venmoRequires).toEqual({
+      expect(isVenmoEligible).toEqual({
         native: false,
         popup: false,
       });
     });
 
-    test("should not require native or popup support when platform is not specified", () => {
-      const venmoRequires = venmoConfig.requires?.({});
+    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,
+      });
 
-      expect(venmoRequires).toEqual({
-        native: false,
-        popup: false,
+      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(isVenmoEligible).toEqual({});
     });
   });
 });

package/src/marks/component.jsx

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

package/src/ui/buttons/buttons.jsx

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

package/src/ui/buttons/props.js

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