@paypal/checkout-components 5.0.383 → 5.0.385

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.383",
+  "version": "5.0.385",
   "description": "PayPal Checkout components, for integrating checkout products.",
   "main": "index.js",
   "scripts": {
@@ -23,6 +23,7 @@
     "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",
@@ -122,7 +123,7 @@
     "@paypal/funding-components": "^1.0.31",
     "@paypal/sdk-client": "^4.0.199",
     "@paypal/sdk-constants": "^1.0.156",
-    "@paypal/sdk-logos": "^2.3.1"
+    "@paypal/sdk-logos": "^2.3.2"
   },
   "lint-staged": {
     "**/*": "prettier --write --ignore-unknown"

package/src/funding/bancontact/config.jsx

@@ -4,6 +4,7 @@
 import {
   BancontactLogoInlineSVG,
   BancontactLogoExternalImage,
+  BancontactMarkRebrandExternalImage,
 } from "@paypal/sdk-logos/src";
 import { Fragment, node } from "@krakenjs/jsx-pragmatic/src";
 
@@ -47,5 +48,8 @@ export function getBancontactConfig(): FundingSourceConfig {
 
       return <BasicLabel {...opts} logo={apmLogo} />;
     },
+
+    Mark: () => <BancontactMarkRebrandExternalImage />,
+    shouldUseMarkForRebrandOnly: true,
   };
 }

package/src/funding/common.jsx

@@ -149,6 +149,7 @@ export type FundingSourceConfig = {|
     instrument: WalletInstrument,
     userIDToken: ?string,
   |}) => boolean,
+  shouldUseMarkForRebrandOnly?: boolean,
 |};
 
 export function BasicLabel({

package/src/funding/credit/config.jsx

@@ -13,6 +13,7 @@ import {
   LOGO_COLOR,
   PPRebrandLogoInlineSVG,
   PPRebrandLogoExternalImage,
+  CreditMarkRebrandExternalImage,
 } from "@paypal/sdk-logos/src";
 
 import {
@@ -93,6 +94,9 @@ export function getCreditConfig(): FundingSourceConfig {
       );
     },
 
+    Mark: () => <CreditMarkRebrandExternalImage />,
+    shouldUseMarkForRebrandOnly: true,
+
     WalletLabel,
 
     colors: [

package/src/funding/funding.js

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

package/src/funding/funding.test.js

@@ -1,10 +1,23 @@
 /* @flow */
-import { COMPONENTS, FUNDING, PLATFORM } from "@paypal/sdk-constants/src";
-import { describe, expect } from "vitest";
+import { COMPONENTS, FUNDING } from "@paypal/sdk-constants/src";
+import { describe, expect, vi, beforeEach, afterEach } 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",
@@ -55,9 +68,41 @@ 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(
@@ -173,29 +218,268 @@ describe("Funding eligibility", () => {
       });
     });
 
-    describe("Mobile", () => {
-      test("should be eligible if window.popupBridge is defined for Venmo and supportsPopups is false", () => {
-        window.popupBridge = {};
+    describe("Venmo-specific funding requirements", () => {
+      beforeEach(() => {
+        // Reset all mocks before each test
+        vi.clearAllMocks();
 
-        const fundingEligible = isFundingEligible(FUNDING.VENMO, {
-          ...defaultMockFundingOptions,
-          platform: PLATFORM.MOBILE,
-          supportsPopups: false,
+        // 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();
+      });
 
-        expect(fundingEligible).toBe(true);
+      test("should use supportsVenmoPopups for venmo funding source when popup is required", () => {
+        vi.mocked(supportsVenmoPopups).mockReturnValue(true);
+        vi.mocked(isSupportedNativeVenmoBrowser).mockReturnValue(true);
 
-        window.popupBridge = undefined;
+        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 not be eligible if window.popupBridge is undefined for Venmo and supportsPopups is false", () => {
-        const fundingEligible = isFundingEligible(FUNDING.VENMO, {
+      test("should return false when venmo native support is required but isSupportedNativeVenmoBrowser returns false", () => {
+        vi.mocked(supportsVenmoPopups).mockReturnValue(true);
+        vi.mocked(isSupportedNativeVenmoBrowser).mockReturnValue(false);
+
+        const options = {
           ...defaultMockFundingOptions,
-          platform: PLATFORM.MOBILE,
-          supportsPopups: false,
+          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
+          },
         });
 
-        expect(fundingEligible).toBe(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);
+
+        // Venmo functions should not be called for non-venmo sources
+        expect(supportsVenmoPopups).not.toHaveBeenCalled();
+        expect(isSupportedNativeVenmoBrowser).not.toHaveBeenCalled();
+        expect(result).toBe(true);
+      });
+
+      test("should handle undefined experiment parameter for venmo", () => {
+        vi.mocked(supportsVenmoPopups).mockReturnValue(true);
+        vi.mocked(isSupportedNativeVenmoBrowser).mockReturnValue(true);
+
+        const options = {
+          ...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);
+
+        const result2 = isFundingEligible(FUNDING.VENMO, options);
+        expect(result2).toBe(true);
       });
     });
   });

package/src/funding/paylater/config.jsx

@@ -10,6 +10,7 @@ import {
   LOGO_COLOR,
   PPRebrandLogoInlineSVG,
   PPRebrandLogoExternalImage,
+  PaylaterMarkRebrandExternalImage,
 } from "@paypal/sdk-logos/src";
 
 import { Logo } from "../paypal/template";
@@ -131,6 +132,9 @@ export function getPaylaterConfig(): FundingSourceConfig {
       );
     },
 
+    Mark: () => <PaylaterMarkRebrandExternalImage />,
+    shouldUseMarkForRebrandOnly: true,
+
     colors: [
       BUTTON_COLOR.WHITE,
       BUTTON_COLOR.BLACK,

package/src/funding/util.js

@@ -0,0 +1,99 @@
+/* @flow */
+
+import {
+  isWebView,
+  isIosWebview,
+  isAndroidWebview,
+  isFacebookWebView,
+  isOperaMini,
+  isFirefoxIOS,
+  isEdgeIOS,
+  isQQBrowser,
+  isElectron,
+  supportsPopups,
+  isTablet,
+  isIos,
+  isSafari,
+  isAndroid,
+  isChrome,
+  isFirefox,
+} from "@krakenjs/belter/src";
+
+import type { Experiment } from "../types";
+
+const isMacOsCna = (userAgent: string): boolean => {
+  return /Macintosh.*AppleWebKit(?!.*Safari)/i.test(userAgent);
+};
+
+const isVenmoSupportedWebView = (userAgent: string): boolean => {
+  return (
+    isWebView(userAgent) ||
+    isIosWebview(userAgent) ||
+    isAndroidWebview(userAgent) ||
+    isFacebookWebView(userAgent)
+  );
+};
+
+const venmoUserAgentSupportsPopups = (userAgent: string): boolean => {
+  return !(
+    isVenmoSupportedWebView(userAgent) ||
+    isOperaMini(userAgent) ||
+    isFirefoxIOS(userAgent) ||
+    isEdgeIOS(userAgent) ||
+    isQQBrowser(userAgent) ||
+    isMacOsCna(userAgent) ||
+    isElectron()
+  );
+};
+
+export function supportsVenmoPopups(
+  experiment?: Experiment,
+  userAgent: string
+): boolean {
+  if (isVenmoSupportedWebView(userAgent)) {
+    if (typeof window !== "undefined" && window.popupBridge) {
+      return true;
+    }
+    return false;
+  }
+
+  if (experiment?.venmoEnableWebOnNonNativeBrowser === true) {
+    return venmoUserAgentSupportsPopups(userAgent);
+  }
+  return supportsPopups();
+}
+
+export function isSupportedNativeVenmoBrowser(
+  experiment?: Experiment,
+  userAgent: string
+): boolean {
+  if (isVenmoSupportedWebView(userAgent)) {
+    if (typeof window !== "undefined" && window.popupBridge) {
+      return true;
+    }
+    return false;
+  }
+
+  if (isTablet(userAgent)) {
+    return false;
+  }
+
+  // Default supported browsers for Venmo
+  if (
+    (isIos(userAgent) && isSafari(userAgent)) ||
+    (isAndroid(userAgent) && isChrome(userAgent))
+  ) {
+    return true;
+  }
+
+  // Additional browsers enabled by experiment
+  if (
+    experiment?.venmoEnableWebOnNonNativeBrowser === true &&
+    ((isIos(userAgent) && isChrome(userAgent)) ||
+      (isAndroid(userAgent) && isFirefox(userAgent)))
+  ) {
+    return true;
+  }
+
+  return false;
+}