@paypal/checkout-components 5.0.405 → 5.0.406

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.405",
+  "version": "5.0.406",
   "description": "PayPal Checkout components, for integrating checkout products.",
   "main": "index.js",
   "scripts": {

package/src/funding/common.jsx

@@ -73,6 +73,7 @@ export type LabelOptions = {|
   tagline: ?boolean,
   content: ?ContentType,
   experiment?: Experiment,
+  shouldApplyPayNowOrLaterLabel?: boolean,
 |};
 
 export type WalletLabelOptions = {|

package/src/funding/content.jsx

@@ -23,6 +23,7 @@ export type ContentMap = {
     Donate?: ({|
       logo: ChildType,
     |}) => ChildType /** Not available in `tr` language **/,
+    PayNowOrLater?: ({| logo: ChildType |}) => ChildType,
   |},
 };
 
@@ -379,6 +380,14 @@ export const componentContent: ContentMap = {
         </Text>
       </Fragment>
     ),
+    PayNowOrLater: ({ logo }) => (
+      <Fragment>
+        {logo}
+        <Text animate optional>
+          Pay Now or Later
+        </Text>
+      </Fragment>
+    ),
   },
   es: {
     Checkout: ({ logo }) => (

package/src/funding/paypal/template.jsx

@@ -230,9 +230,25 @@ function ButtonPersonalization(opts: LabelOptions): ?ChildType {
 }
 
 export function Label(opts: LabelOptions): ChildType {
+  const {
+    logo,
+    locale: { lang },
+    shouldApplyPayNowOrLaterLabel,
+  } = opts;
+
+  let buttonLabel = <BasicLabel {...opts} />;
+
+  if (!__WEB__) {
+    const { PayNowOrLater } = componentContent[lang];
+
+    if (shouldApplyPayNowOrLaterLabel && PayNowOrLater) {
+      buttonLabel = <PayNowOrLater logo={logo} />;
+    }
+  }
+
   return (
     <Fragment>
-      <BasicLabel {...opts} />
+      {buttonLabel}
       <ButtonPersonalization {...opts} />
     </Fragment>
   );

package/src/types.js

@@ -68,6 +68,8 @@ export type Experiment = {|
   venmoEnableWebOnNonNativeBrowser?: boolean,
   spbEagerOrderCreation?: boolean,
   paypalCreditButtonCreateVaultSetupTokenExists?: boolean,
+  isPaylaterCobrandedLabelEnabled?: boolean,
+  isPaylaterCobrandedLabelRandomizationEnabled?: boolean,
 |};
 
 export type Requires = {|

package/src/ui/buttons/button.jsx

@@ -109,7 +109,13 @@ export function Button({
   const colors = fundingConfig.colors;
   const secondaryColors = fundingConfig.secondaryColors || {};
 
-  let { color, period, label, shouldApplyRebrandedStyles } = style;
+  let {
+    color,
+    period,
+    label,
+    shouldApplyRebrandedStyles,
+    shouldApplyPayNowOrLaterLabel,
+  } = style;
 
   // if no color option is passed in via style props
   if (color === "" || typeof color === "undefined") {
@@ -189,6 +195,10 @@ export function Button({
           })
         : fundingConfig.labelText || fundingSource;
 
+    if (shouldApplyPayNowOrLaterLabel) {
+      labelText = "PayPal Pay Now or Later";
+    }
+
     if (!showPayLabel && instrument?.vendor && instrument.label) {
       labelText = instrument.secondaryInstruments
         ? `${instrument.secondaryInstruments[0].type} & ${instrument.vendor} ${instrument.label}`
@@ -234,6 +244,7 @@ export function Button({
       tagline={tagline}
       content={content}
       experiment={experiment}
+      shouldApplyPayNowOrLaterLabel={shouldApplyPayNowOrLaterLabel}
     />
   );
 

package/src/ui/buttons/props.bnpl.test.js

@@ -0,0 +1,297 @@
+/* @flow */
+import { describe, expect, it, beforeEach, vi } from "vitest";
+import { FUNDING } from "@paypal/sdk-constants";
+
+import { BUTTON_FLOW } from "../../constants";
+
+import {
+  getCobrandedBNPLLabelFlags,
+  getBNPLLabelABTestFromStorage,
+  determineRandomBNPLLabel,
+  getBNPLLabelForABTest,
+} from "./props";
+
+describe("getBNPLLabelABTestFromStorage", () => {
+  it("should return null when storage state has no bnplLabelABTest value", () => {
+    const storageState = {
+      get: vi.fn().mockReturnValue(null),
+      set: vi.fn(),
+    };
+
+    const result = getBNPLLabelABTestFromStorage(storageState);
+
+    expect(result).toBeNull();
+    expect(storageState.get).toHaveBeenCalledWith("bnplLabelABTest");
+  });
+
+  it("should return null when storage state has bnplLabelABTest but no value property", () => {
+    const storageState = {
+      get: vi.fn().mockReturnValue({ someOtherProperty: "test" }),
+      set: vi.fn(),
+    };
+
+    const result = getBNPLLabelABTestFromStorage(storageState);
+
+    expect(result).toBeNull();
+  });
+
+  it("should return value when storage state has bnplLabelABTest with value property", () => {
+    const mockStoredValue = {
+      shouldApplyPayNowOrLaterLabel: true,
+      sessionID: "test-session",
+    };
+
+    const storageState = {
+      get: vi.fn().mockReturnValue({ value: mockStoredValue }),
+      set: vi.fn(),
+    };
+
+    const result = getBNPLLabelABTestFromStorage(storageState);
+
+    expect(result).toEqual(mockStoredValue);
+  });
+});
+
+describe("determineRandomBNPLLabel", () => {
+  let mathRandomSpy;
+
+  beforeEach(() => {
+    mathRandomSpy = vi.spyOn(Math, "random");
+  });
+
+  afterEach(() => {
+    mathRandomSpy.mockRestore();
+  });
+
+  it("should return true when random value is less than 0.5", () => {
+    mathRandomSpy.mockReturnValue(0.3);
+    expect(determineRandomBNPLLabel()).toBe(true);
+  });
+
+  it("should return false when random value is greater than or equal to 0.5", () => {
+    mathRandomSpy.mockReturnValue(0.7);
+    expect(determineRandomBNPLLabel()).toBe(false);
+  });
+
+  it("should return false when random value is exactly 0.5", () => {
+    mathRandomSpy.mockReturnValue(0.5);
+    expect(determineRandomBNPLLabel()).toBe(false);
+  });
+});
+
+describe("getBNPLLabelForABTest", () => {
+  it("should return cached value when sessionID matches", () => {
+    const mockSessionID = "test-session-123";
+    const storageState = {
+      get: vi.fn().mockReturnValue({
+        value: {
+          shouldApplyPayNowOrLaterLabel: true,
+          sessionID: mockSessionID,
+        },
+      }),
+      set: vi.fn(),
+    };
+
+    const result = getBNPLLabelForABTest({
+      storageState,
+      sessionID: mockSessionID,
+    });
+
+    expect(result).toBe(true);
+    expect(storageState.set).not.toHaveBeenCalled();
+  });
+
+  it("should randomize and store when sessionID does not match", () => {
+    const storageState = {
+      get: vi.fn().mockReturnValue({
+        value: {
+          shouldApplyPayNowOrLaterLabel: true,
+          sessionID: "old-session",
+        },
+      }),
+      set: vi.fn(),
+    };
+
+    const result = getBNPLLabelForABTest({
+      storageState,
+      sessionID: "new-session",
+    });
+
+    expect(typeof result).toBe("boolean");
+    expect(storageState.set).toHaveBeenCalledWith("bnplLabelABTest", {
+      shouldApplyPayNowOrLaterLabel: result,
+      sessionID: "new-session",
+    });
+  });
+
+  it("should randomize and store when storage is empty", () => {
+    const storageState = {
+      get: vi.fn().mockReturnValue(null),
+      set: vi.fn(),
+    };
+
+    const result = getBNPLLabelForABTest({
+      storageState,
+      sessionID: "fresh-session",
+    });
+
+    expect(typeof result).toBe("boolean");
+    expect(storageState.set).toHaveBeenCalledWith("bnplLabelABTest", {
+      shouldApplyPayNowOrLaterLabel: result,
+      sessionID: "fresh-session",
+    });
+  });
+});
+
+describe("getCobrandedBNPLLabelFlags", () => {
+  const mockStorageState = {
+    get: vi.fn().mockReturnValue(null),
+    set: vi.fn(),
+  };
+
+  beforeEach(() => {
+    mockStorageState.get.mockReturnValue(null);
+    mockStorageState.set.mockClear();
+  });
+
+  // $FlowFixMe - test object intentionally omits non-relevant ButtonPropsInputs fields
+  const eligibleProps = {
+    fundingSource: FUNDING.PAYPAL,
+    fundingEligibility: {
+      paylater: { eligible: true },
+    },
+    experiment: { isPaylaterCobrandedLabelEnabled: true },
+    locale: { lang: "en", country: "US" },
+    style: {},
+    flow: BUTTON_FLOW.PURCHASE,
+    storageState: mockStorageState,
+    sessionID: "test-session-id",
+  };
+
+  it("should return eligible true and use randomization when all conditions are met", () => {
+    const { isPayNowOrLaterLabelEligible, shouldApplyPayNowOrLaterLabel } =
+      // $FlowFixMe
+      getCobrandedBNPLLabelFlags(eligibleProps);
+
+    expect(isPayNowOrLaterLabelEligible).toBe(true);
+    expect(typeof shouldApplyPayNowOrLaterLabel).toBe("boolean");
+    expect(mockStorageState.set).toHaveBeenCalledWith(
+      "bnplLabelABTest",
+      expect.objectContaining({
+        shouldApplyPayNowOrLaterLabel,
+        sessionID: "test-session-id",
+      })
+    );
+  });
+
+  it("should return false when experiment flag is disabled", () => {
+    const { isPayNowOrLaterLabelEligible } =
+      // $FlowFixMe
+      getCobrandedBNPLLabelFlags({
+        ...eligibleProps,
+        experiment: { isPaylaterCobrandedLabelEnabled: false },
+      });
+
+    expect(isPayNowOrLaterLabelEligible).toBe(false);
+  });
+
+  it("should return false when paylater is not eligible", () => {
+    const { isPayNowOrLaterLabelEligible } =
+      // $FlowFixMe
+      getCobrandedBNPLLabelFlags({
+        ...eligibleProps,
+        fundingEligibility: { paylater: { eligible: false } },
+      });
+
+    expect(isPayNowOrLaterLabelEligible).toBe(false);
+  });
+
+  it("should return false when fundingSource is not PAYPAL or undefined", () => {
+    const { isPayNowOrLaterLabelEligible } =
+      // $FlowFixMe
+      getCobrandedBNPLLabelFlags({
+        ...eligibleProps,
+        fundingSource: FUNDING.VENMO,
+      });
+
+    expect(isPayNowOrLaterLabelEligible).toBe(false);
+  });
+
+  it("should return false when a non-paypal label is set", () => {
+    const { isPayNowOrLaterLabelEligible } =
+      // $FlowFixMe
+      getCobrandedBNPLLabelFlags({
+        ...eligibleProps,
+        style: { label: "checkout" },
+      });
+
+    expect(isPayNowOrLaterLabelEligible).toBe(false);
+  });
+
+  it("should return true when label is explicitly set to paypal", () => {
+    const { isPayNowOrLaterLabelEligible } =
+      // $FlowFixMe
+      getCobrandedBNPLLabelFlags({
+        ...eligibleProps,
+        style: { label: "paypal" },
+      });
+
+    expect(isPayNowOrLaterLabelEligible).toBe(true);
+  });
+
+  it("should return false when locale does not have PayNowOrLater content", () => {
+    const { isPayNowOrLaterLabelEligible } =
+      // $FlowFixMe
+      getCobrandedBNPLLabelFlags({
+        ...eligibleProps,
+        locale: { lang: "fr", country: "FR" },
+      });
+
+    expect(isPayNowOrLaterLabelEligible).toBe(false);
+  });
+
+  it("should return false when props is null", () => {
+    const { isPayNowOrLaterLabelEligible } = getCobrandedBNPLLabelFlags(null);
+
+    expect(isPayNowOrLaterLabelEligible).toBe(false);
+  });
+
+  it("should return shouldApplyPayNowOrLaterLabel true when randomization is disabled", () => {
+    const { isPayNowOrLaterLabelEligible, shouldApplyPayNowOrLaterLabel } =
+      // $FlowFixMe
+      getCobrandedBNPLLabelFlags({
+        ...eligibleProps,
+        experiment: {
+          isPaylaterCobrandedLabelEnabled: true,
+          isPaylaterCobrandedLabelRandomizationEnabled: false,
+        },
+      });
+
+    expect(isPayNowOrLaterLabelEligible).toBe(true);
+    expect(shouldApplyPayNowOrLaterLabel).toBe(true);
+  });
+
+  it("should return shouldApplyPayNowOrLaterLabel true when eligible but no storageState", () => {
+    const { isPayNowOrLaterLabelEligible, shouldApplyPayNowOrLaterLabel } =
+      // $FlowFixMe
+      getCobrandedBNPLLabelFlags({
+        ...eligibleProps,
+        storageState: undefined,
+      });
+
+    expect(isPayNowOrLaterLabelEligible).toBe(true);
+    expect(shouldApplyPayNowOrLaterLabel).toBe(true);
+  });
+
+  it("should return shouldApplyPayNowOrLaterLabel false when not eligible regardless of randomization", () => {
+    const { isPayNowOrLaterLabelEligible, shouldApplyPayNowOrLaterLabel } =
+      // $FlowFixMe
+      getCobrandedBNPLLabelFlags({
+        ...eligibleProps,
+        fundingSource: FUNDING.VENMO,
+      });
+
+    expect(isPayNowOrLaterLabelEligible).toBe(false);
+    expect(shouldApplyPayNowOrLaterLabel).toBe(false);
+  });
+});

package/src/ui/buttons/props.js

@@ -48,6 +48,7 @@ import {
   MESSAGE_ALIGN,
 } from "../../constants";
 import { getFundingConfig, isFundingEligible } from "../../funding";
+import { componentContent } from "../../funding/content";
 import type { StateGetSet } from "../../lib/session";
 
 import { BUTTON_SIZE_STYLE } from "./config";
@@ -331,6 +332,8 @@ export type ButtonStyle = {|
   borderRadius?: number,
   shouldApplyRebrandedStyles: boolean,
   isButtonColorABTestMerchant: boolean,
+  isPayNowOrLaterLabelEligible: boolean,
+  shouldApplyPayNowOrLaterLabel: boolean,
 |};
 
 export type ButtonStyleInputs = {|
@@ -344,6 +347,7 @@ export type ButtonStyleInputs = {|
   disableMaxWidth?: boolean | void,
   disableMaxHeight?: boolean | void,
   borderRadius?: number | void,
+  shouldApplyPayNowOrLaterLabel?: boolean | void,
 |};
 
 type PersonalizationComponentProps = {|
@@ -529,6 +533,11 @@ type ColorABTestStorage = {|
   sessionID: string,
 |};
 
+type BNPLLabelABTestStorage = {|
+  shouldApplyPayNowOrLaterLabel: boolean,
+  sessionID: string,
+|};
+
 type GetButtonColorArgs = {|
   experiment: Experiment,
   fundingSource: ?$Values<typeof FUNDING>,
@@ -695,6 +704,7 @@ export type ButtonPropsInputs = {
   messageMarkup?: string | void,
   renderedButtons: $ReadOnlyArray<$Values<typeof FUNDING>>,
   buttonColor: ButtonColor,
+  storageState?: StateGetSet,
   userAgent: string,
 };
 
@@ -728,6 +738,48 @@ export function getColorABTestFromStorage(
   return null;
 }
 
+export function getBNPLLabelABTestFromStorage(
+  storageState: StateGetSet
+): ?BNPLLabelABTestStorage {
+  const sessionState = storageState.get("bnplLabelABTest");
+
+  if (sessionState && sessionState.value) {
+    return sessionState.value;
+  }
+
+  return null;
+}
+
+export function determineRandomBNPLLabel(): boolean {
+  return Math.random() < 0.5;
+}
+
+export function getBNPLLabelForABTest({
+  storageState,
+  sessionID,
+}: {|
+  storageState: StateGetSet,
+  sessionID: ?string,
+|}): boolean {
+  const bnplLabelFromStorage = getBNPLLabelABTestFromStorage(storageState);
+
+  if (bnplLabelFromStorage) {
+    const { sessionID: storedSessionID, shouldApplyPayNowOrLaterLabel } =
+      bnplLabelFromStorage;
+
+    if (storedSessionID && sessionID === storedSessionID) {
+      return shouldApplyPayNowOrLaterLabel;
+    }
+  }
+
+  const shouldApplyPayNowOrLaterLabel = determineRandomBNPLLabel();
+  storageState.set("bnplLabelABTest", {
+    shouldApplyPayNowOrLaterLabel,
+    sessionID,
+  });
+  return shouldApplyPayNowOrLaterLabel;
+}
+
 export function determineRandomButtonColor({
   buttonColorInput,
 }: {|
@@ -970,6 +1022,70 @@ export function getButtonColor({
   }
 }
 
+export function getCobrandedBNPLLabelFlags(props: ?ButtonPropsInputs): {|
+  isPayNowOrLaterLabelEligible: boolean,
+  shouldApplyPayNowOrLaterLabel: boolean,
+|} {
+  const label = props?.style?.label;
+  const lang = props?.locale?.lang;
+  const isPurchaseFlow = props?.flow === BUTTON_FLOW.PURCHASE;
+  const isEnLang = Boolean(lang && componentContent[lang]?.PayNowOrLater);
+  const isCobrandedEligibleFundingSource =
+    props?.fundingSource === FUNDING.PAYPAL ||
+    props?.fundingSource === undefined;
+  const isPaylaterEligible =
+    props?.fundingEligibility?.paylater?.eligible || false;
+  const isLabelEligible = label === undefined || label === BUTTON_LABEL.PAYPAL;
+
+  const isPaylaterCobrandedLabelEnabled =
+    props?.experiment?.isPaylaterCobrandedLabelEnabled || false;
+
+  const isPayNowOrLaterLabelEligible = Boolean(
+    isPaylaterCobrandedLabelEnabled &&
+      isCobrandedEligibleFundingSource &&
+      isPaylaterEligible &&
+      isLabelEligible &&
+      isEnLang &&
+      isPurchaseFlow
+  );
+
+  const isPaylaterCobrandedLabelRandomizationEnabled =
+    props?.experiment?.isPaylaterCobrandedLabelRandomizationEnabled ?? true;
+  const hasStorageState = Boolean(props?.storageState);
+  const hasSessionID = Boolean(props?.sessionID);
+  const shouldRunABTestRandomization =
+    isPaylaterCobrandedLabelRandomizationEnabled &&
+    hasStorageState &&
+    hasSessionID;
+
+  // SSR path: the client already computed values
+  const precomputedLabel = props?.style?.shouldApplyPayNowOrLaterLabel;
+
+  if (precomputedLabel === true || precomputedLabel === false) {
+    return {
+      isPayNowOrLaterLabelEligible,
+      shouldApplyPayNowOrLaterLabel: precomputedLabel,
+    };
+  }
+
+  // Client path: compute shouldApplyPayNowOrLaterLabel from scratch
+  let shouldApplyPayNowOrLaterLabel = false;
+
+  if (isPayNowOrLaterLabelEligible) {
+    if (shouldRunABTestRandomization && props && props.storageState) {
+      shouldApplyPayNowOrLaterLabel = getBNPLLabelForABTest({
+        storageState: props.storageState,
+        sessionID: props.sessionID,
+      });
+    } else {
+      // Randomization disabled or storageState unavailable → 100% treatment
+      shouldApplyPayNowOrLaterLabel = true;
+    }
+  }
+
+  return { isPayNowOrLaterLabelEligible, shouldApplyPayNowOrLaterLabel };
+}
+
 const getDefaultButtonPropsInput = (): ButtonPropsInputs => {
   return {};
 };
@@ -1119,6 +1235,9 @@ export function normalizeButtonStyle(
     }
   }
 
+  const { isPayNowOrLaterLabelEligible, shouldApplyPayNowOrLaterLabel } =
+    getCobrandedBNPLLabelFlags(props);
+
   return {
     label,
     layout,
@@ -1133,6 +1252,8 @@ export function normalizeButtonStyle(
     borderRadius,
     shouldApplyRebrandedStyles,
     isButtonColorABTestMerchant,
+    isPayNowOrLaterLabelEligible,
+    shouldApplyPayNowOrLaterLabel,
   };
 }
 

package/src/zoid/buttons/component.jsx

@@ -235,6 +235,7 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
           allowpaymentrequest: "allowpaymentrequest",
           scrolling: "no",
           title: `${FUNDING_BRAND_LABEL.PAYPAL}${fundingSource}`,
+          role: "presentation",
         },
       };
     },