@paypal/checkout-components 5.0.386 → 5.0.388

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.386",
+  "version": "5.0.388",
   "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",

package/src/funding/card/config.jsx

@@ -141,6 +141,7 @@ export function getCardConfig(): FundingSourceConfig {
     secondaryColors: {
       ...DEFAULT_FUNDING_CONFIG.secondaryColors,
       [DEFAULT]: BUTTON_COLOR.BLACK,
+      [BUTTON_COLOR.REBRAND_BLUE]: BUTTON_COLOR.REBRAND_BLACK,
     },
 
     logoColors: {

package/src/funding/credit/config.jsx

@@ -22,8 +22,12 @@ import {
   DEFAULT,
   BUTTON_FLOW,
 } from "../../constants";
-import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from "../common";
-import { WalletLabel, Logo } from "../paypal/template";
+import {
+  DEFAULT_FUNDING_CONFIG,
+  type FundingSourceConfig,
+  BasicLabel,
+} from "../common";
+import { WalletLabel, Logo as PayPalRebrandLogo } from "../paypal/template";
 import { Text } from "../../ui/text";
 
 import css from "./style.scoped.scss";
@@ -40,6 +44,14 @@ export function getCreditConfig(): FundingSourceConfig {
 
     layouts: [BUTTON_LAYOUT.HORIZONTAL, BUTTON_LAYOUT.VERTICAL],
 
+    Label: ({ logo, experiment, ...props }) => {
+      // For rebrand, only show logo without labels
+      if (experiment?.isPaypalRebrandEnabled) {
+        return logo;
+      }
+      return BasicLabel({ logo, ...props });
+    },
+
     Logo: ({
       locale,
       logoColor,
@@ -74,9 +86,31 @@ export function getCreditConfig(): FundingSourceConfig {
         );
       }
 
+      // Rebranded credit for DE locale uses "Später Bezahlen" text
+      if (locale.country === COUNTRY.DE) {
+        return (
+          <Style css={css} nonce={nonce}>
+            <PayPalRebrandLogo
+              logoColor={logoColor}
+              shouldApplyRebrandedStyles={shouldApplyRebrandedStyles}
+              env={env}
+              experiment={experiment}
+              fundingEligibility={fundingEligibility}
+              locale={locale}
+            />
+            {__WEB__ ? (
+              <PPRebrandLogoExternalImage logoColor={logoColorPP} />
+            ) : (
+              <PPRebrandLogoInlineSVG logoColor={logoColorPP} />
+            )}
+            <Text>{"Später Bezahlen"}</Text>
+          </Style>
+        );
+      }
+
       return (
         <Style css={css} nonce={nonce}>
-          <Logo
+          <PayPalRebrandLogo
             logoColor={logoColor}
             shouldApplyRebrandedStyles={shouldApplyRebrandedStyles}
             locale={locale}

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, supportsPopups, 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,272 @@ 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,
+          true,
+          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,
+          true,
+          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,
+          true,
+          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,
+          true,
+          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

@@ -13,7 +13,7 @@ import {
   PaylaterMarkRebrandExternalImage,
 } from "@paypal/sdk-logos/src";
 
-import { Logo } from "../paypal/template";
+import { Logo as PayPalRebrandLogo } from "../paypal/template";
 import { BUTTON_COLOR, BUTTON_LAYOUT, DEFAULT } from "../../constants";
 import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from "../common";
 import { Text } from "../../ui/text";
@@ -111,7 +111,7 @@ export function getPaylaterConfig(): FundingSourceConfig {
 
       return (
         <Style css={css} nonce={nonce}>
-          <Logo
+          <PayPalRebrandLogo
             logoColor={logoColor}
             shouldApplyRebrandedStyles={shouldApplyRebrandedStyles}
             env={env}

package/src/funding/util.js

@@ -0,0 +1,99 @@
+/* @flow */
+
+import {
+  isWebView,
+  isIosWebview,
+  isAndroidWebview,
+  isFacebookWebView,
+  isOperaMini,
+  isFirefoxIOS,
+  isEdgeIOS,
+  isQQBrowser,
+  isElectron,
+  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,
+  supportsPopups: boolean,
+  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;
+}