@paypal/checkout-components 5.0.383 → 5.0.385

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,
@@ -32,10 +33,11 @@ import { BUTTON_LAYOUT, BUTTON_FLOW } from "../constants";
 import { determineEligibleFunding, isFundingEligible } from "../funding";
 import {
   isSupportedNativeBrowser,
-  getVenmoEligibility,
+  getButtonExperiments,
 } from "../zoid/buttons/util";
 
 import { MarksElement } from "./template";
+import { MarksElementRebrand } from "./templateRebrand";
 
 const DEFAULT_HEIGHT = 20;
 
@@ -50,6 +52,7 @@ type MarksProps = {|
   onShippingAddressChange?: OnShippingAddressChange,
   onShippingOptionsChange?: OnShippingOptionsChange,
   displayOnly?: $ReadOnlyArray<$Values<typeof DISPLAY_ONLY_VALUES>>,
+  userAgent: string,
 |};
 
 export type MarksComponent = (MarksProps) => MarksInstance;
@@ -61,6 +64,7 @@ export const getMarksComponent: () => MarksComponent = memoize(() => {
     onShippingAddressChange,
     onShippingOptionsChange,
     displayOnly,
+    userAgent = getUserAgent(),
   }: MarksProps = {}): MarksInstance {
     const height = DEFAULT_HEIGHT;
     const fundingEligibility = getFundingEligibility();
@@ -75,7 +79,8 @@ export const getMarksComponent: () => MarksComponent = memoize(() => {
       : false;
     const supportsPopups = userAgentSupportsPopups();
     const supportedNativeBrowser = isSupportedNativeBrowser();
-    const experiment = getVenmoEligibility();
+    const experiment = getButtonExperiments();
+
     const hasShippingCallback = Boolean(
       onShippingChange || onShippingAddressChange || onShippingOptionsChange
     );
@@ -97,6 +102,7 @@ export const getMarksComponent: () => MarksComponent = memoize(() => {
       supportedNativeBrowser,
       experiment,
       displayOnly,
+      userAgent,
     });
     const env = getEnv();
 
@@ -121,6 +127,7 @@ export const getMarksComponent: () => MarksComponent = memoize(() => {
         supportedNativeBrowser,
         experiment,
         displayOnly,
+        userAgent,
       });
     };
 
@@ -130,16 +137,28 @@ export const getMarksComponent: () => MarksComponent = memoize(() => {
           throw new Error(`${fundingSource || "marks"} not eligible`);
         }
 
+        const isRebrandEnabled = experiment?.isPaypalRebrandEnabled;
+
         getElement(container).appendChild(
           (
             <div>
-              <MarksElement
-                fundingEligibility={fundingEligibility}
-                fundingSources={fundingSources}
-                height={height}
-                experiment={experiment}
-                env={env}
-              />
+              {isRebrandEnabled ? (
+                <MarksElementRebrand
+                  fundingEligibility={fundingEligibility}
+                  fundingSources={fundingSources}
+                  height={height}
+                  experiment={experiment}
+                  env={env}
+                />
+              ) : (
+                <MarksElement
+                  fundingEligibility={fundingEligibility}
+                  fundingSources={fundingSources}
+                  height={height}
+                  experiment={experiment}
+                  env={env}
+                />
+              )}
             </div>
           ).render(dom({ doc: document }))
         );

package/src/marks/template.jsx

@@ -33,19 +33,14 @@ function Mark({
     throw new Error(`Can not find funding config for ${fundingSource}`);
   }
 
-  const { Logo } = fundingConfig;
+  const { Logo, shouldUseMarkForRebrandOnly } = fundingConfig;
   const MarkLogo = fundingConfig.Mark;
   const marksDefined = typeof MarkLogo !== "undefined";
 
   return (
     <div class="paypal-mark">
-      {marksDefined && MarkLogo ? (
-        <MarkLogo
-          fundingEligibility={fundingEligibility}
-          locale={getLocale()}
-          experiment={experiment}
-          env={env}
-        />
+      {marksDefined && MarkLogo && !shouldUseMarkForRebrandOnly ? (
+        <MarkLogo />
       ) : (
         <Logo
           fundingEligibility={fundingEligibility}

package/src/marks/templateRebrand.jsx

@@ -0,0 +1,177 @@
+/* @flow */
+/** @jsx node */
+
+import { FUNDING, ENV } from "@paypal/sdk-constants/src";
+import {
+  node,
+  type ChildNodeType,
+  type ElementNode,
+} from "@krakenjs/jsx-pragmatic/src";
+import { getLocale, type FundingEligibilityType } from "@paypal/sdk-client/src";
+import { toPx } from "@krakenjs/belter/src";
+
+import type { Experiment } from "../types";
+import { getFundingConfig } from "../funding";
+import { CLASS } from "../constants";
+
+type MarkOptions = {|
+  fundingSource: $Values<typeof FUNDING>,
+  fundingEligibility: FundingEligibilityType,
+  experiment: Experiment,
+  env: $Values<typeof ENV>,
+|};
+
+function Mark({
+  fundingSource,
+  fundingEligibility,
+  experiment,
+  env,
+}: MarkOptions): ChildNodeType {
+  const fundingConfig = getFundingConfig()[fundingSource];
+
+  if (!fundingConfig) {
+    throw new Error(`Can not find funding config for ${fundingSource}`);
+  }
+
+  const { Logo } = fundingConfig;
+  const MarkLogo = fundingConfig.Mark;
+  const marksDefined = typeof MarkLogo !== "undefined";
+
+  let backgroundClasses = "paypal-mark-rebrand";
+
+  const hasBlueBackground =
+    fundingSource === FUNDING.PAYPAL ||
+    fundingSource === FUNDING.PAYLATER ||
+    fundingSource === FUNDING.CREDIT;
+
+  backgroundClasses += hasBlueBackground
+    ? " paypal-mark-rebrand-blue"
+    : " paypal-mark-rebrand-white";
+
+  const shouldUseOwnBorderAndPadding = fundingSource === FUNDING.APPLEPAY;
+  if (shouldUseOwnBorderAndPadding) {
+    backgroundClasses += " paypal-mark-rebrand-own-border-and-padding";
+  }
+
+  return (
+    <div class={backgroundClasses}>
+      {marksDefined && MarkLogo ? (
+        <MarkLogo shouldApplyRebrandedStyles={true} />
+      ) : (
+        <Logo
+          fundingEligibility={fundingEligibility}
+          locale={getLocale()}
+          experiment={experiment}
+          env={env}
+          shouldApplyRebrandedStyles={true}
+        />
+      )}
+    </div>
+  );
+}
+
+type MarksElementOptions = {|
+  fundingEligibility: FundingEligibilityType,
+  fundingSources: $ReadOnlyArray<$Values<typeof FUNDING>>,
+  height: number,
+  experiment: Experiment,
+  env: $Values<typeof ENV>,
+|};
+
+export function MarksElementRebrand({
+  fundingEligibility,
+  fundingSources,
+  experiment,
+  env,
+}: MarksElementOptions): ElementNode {
+  // Rebrand dimensions: 32px height, 48px width
+  const rebrandHeight = 32;
+  const rebrandWidth = 48;
+
+  return (
+    <div>
+      <style>
+        {`
+                    .${CLASS.TEXT} {
+                        font-family: PayPal Pro Book, system-ui, -apple-system, Roboto, "Segoe UI", Helvetica-Neue, Helvetica, Arial, sans-serif;
+                        font-size: 12px;
+                        vertical-align: middle;
+                    }
+
+                    .paypal-marks-rebrand {
+                      display: flex;
+                    }
+
+                    .paypal-mark-rebrand {
+                        display: inline-flex;
+                        align-items: center;
+                        justify-content: center;
+                        border-radius: 3px;
+                        margin: ${toPx(rebrandHeight / 5)};
+                        position: relative;
+                        width: ${toPx(rebrandWidth)};
+                        height: ${toPx(rebrandHeight)};
+                        padding: 3px;
+                        box-sizing: border-box;
+                        overflow: hidden;
+                    }
+
+                    .paypal-mark-rebrand:last-child {
+                        margin-right: none;
+                    }
+
+                    .paypal-mark-rebrand-white {
+                        background: #fff;
+                        border: 1px solid #E6E6E6;
+                    }
+
+                    .paypal-mark-rebrand-blue {
+                        background: #60CDFF;
+                        border: 1px solid #60CDFF;
+                    }
+
+                    .paypal-mark-rebrand-own-border-and-padding {
+                        border: none;
+                        padding: 0px;
+                    }
+
+                    .paypal-mark-rebrand img {
+                        max-width: 100%;
+                        max-height: 100%;
+                        width: auto;
+                        height: auto;
+                        object-fit: contain;
+                        display: block;
+                    }
+
+                    .paypal-button-card {
+                        display: inline-block;
+                        margin-right: ${toPx(rebrandHeight / 4)};
+                    }
+
+                    .paypal-button-card:last-child {
+                        margin-right: 0px;
+                    }
+
+                    .paypal-mark-rebrand .paypal-logo {
+                        margin-right: ${toPx(rebrandHeight / 5)};
+                    }
+
+                    .paypal-mark-rebrand .paypal-logo:last-child {
+                        margin-right: 0px;
+                    }
+                `}
+      </style>
+      <div class="paypal-marks-rebrand">
+        {fundingSources.map((fundingSource) => (
+          <Mark
+            fundingEligibility={fundingEligibility}
+            fundingSource={fundingSource}
+            experiment={experiment}
+            env={env}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

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;