@paypal/checkout-components 5.0.412 → 5.0.414

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.412",
+  "version": "5.0.414",
   "description": "PayPal Checkout components, for integrating checkout products.",
   "main": "index.js",
   "scripts": {
@@ -123,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.2"
+    "@paypal/sdk-logos": "^2.3.7"
   },
   "lint-staged": {
     "**/*": "prettier --write --ignore-unknown"

package/src/constants/button.js

@@ -118,3 +118,9 @@ export const MESSAGE_ALIGN = {
   LEFT: ("left": "left"),
   RIGHT: ("right": "right"),
 };
+
+// Mark variation options (generic for future funding source support)
+export const MARK_VARIATIONS = {
+  WORDMARK: ("wordmark": "wordmark"),
+  MONOGRAM: ("monogram": "monogram"),
+};

package/src/funding/common.jsx

@@ -256,6 +256,8 @@ export const DEFAULT_APM_FUNDING_CONFIG: FundingSourceConfig = {
     BUTTON_COLOR.SILVER,
     BUTTON_COLOR.WHITE,
     BUTTON_COLOR.BLACK,
+    BUTTON_COLOR.REBRAND_BLACK,
+    BUTTON_COLOR.REBRAND_WHITE,
   ],
 
   logoColors: {
@@ -263,6 +265,8 @@ export const DEFAULT_APM_FUNDING_CONFIG: FundingSourceConfig = {
     [BUTTON_COLOR.SILVER]: LOGO_COLOR.BLACK,
     [BUTTON_COLOR.WHITE]: LOGO_COLOR.BLACK,
     [BUTTON_COLOR.BLACK]: LOGO_COLOR.WHITE,
+    [BUTTON_COLOR.REBRAND_BLACK]: LOGO_COLOR.WHITE,
+    [BUTTON_COLOR.REBRAND_WHITE]: LOGO_COLOR.BLACK,
   },
 
   textColors: {
@@ -270,6 +274,8 @@ export const DEFAULT_APM_FUNDING_CONFIG: FundingSourceConfig = {
     [BUTTON_COLOR.BLACK]: TEXT_COLOR.WHITE,
     [BUTTON_COLOR.SILVER]: TEXT_COLOR.BLACK,
     [BUTTON_COLOR.WHITE]: TEXT_COLOR.BLACK,
+    [BUTTON_COLOR.REBRAND_BLACK]: TEXT_COLOR.WHITE,
+    [BUTTON_COLOR.REBRAND_WHITE]: TEXT_COLOR.BLACK,
   },
 
   secondaryColors: {

package/src/funding/funding.js

@@ -24,6 +24,7 @@ type IsFundingEligibleOptions = {|
   flow: $Values<typeof BUTTON_FLOW>,
   fundingEligibility: FundingEligibilityType,
   enableFunding?: $ReadOnlyArray<?$Values<typeof FUNDING>>,
+  disableFunding?: $ReadOnlyArray<?$Values<typeof FUNDING>>,
   components: $ReadOnlyArray<$Values<typeof COMPONENTS>>,
   onShippingChange: ?Function,
   onShippingAddressChange: ?Function,
@@ -75,6 +76,7 @@ export function isFundingEligible(
     fundingSource,
     fundingEligibility,
     enableFunding,
+    disableFunding,
     components,
     onShippingChange,
     onShippingAddressChange,
@@ -93,10 +95,12 @@ export function isFundingEligible(
   }: IsFundingEligibleOptions
 ): boolean {
   // Temporary: Force credit to be eligible if the experiment is enabled
+  // but honor merchant opt-out via disableFunding
   if (
     source === FUNDING.CREDIT &&
     experiment?.paypalCreditButtonCreateVaultSetupTokenExists &&
-    flow === BUTTON_FLOW.VAULT_WITHOUT_PURCHASE
+    flow === BUTTON_FLOW.VAULT_WITHOUT_PURCHASE &&
+    !(disableFunding || []).includes(FUNDING.CREDIT)
   ) {
     return true;
   }
@@ -212,6 +216,7 @@ export function determineEligibleFunding({
   platform,
   fundingEligibility,
   enableFunding,
+  disableFunding,
   components,
   onShippingChange,
   onShippingAddressChange,
@@ -234,6 +239,7 @@ export function determineEligibleFunding({
   platform: $Values<typeof PLATFORM>,
   fundingEligibility: FundingEligibilityType,
   enableFunding?: $ReadOnlyArray<?$Values<typeof FUNDING>>,
+  disableFunding?: $ReadOnlyArray<?$Values<typeof FUNDING>>,
   components: $ReadOnlyArray<$Values<typeof COMPONENTS>>,
   onShippingChange?: ?Function,
   onShippingAddressChange?: ?Function,
@@ -261,6 +267,7 @@ export function determineEligibleFunding({
       fundingSource,
       fundingEligibility,
       enableFunding,
+      disableFunding,
       components,
       onShippingChange,
       onShippingAddressChange,

package/src/funding/funding.test.js

@@ -431,5 +431,74 @@ describe("Funding eligibility", () => {
         expect(result2).toBe(true);
       });
     });
+
+    describe("createVaultSetupToken credit experiment", () => {
+      const creditExperimentOptions = {
+        ...defaultMockFundingOptions,
+        fundingSource: FUNDING.CREDIT,
+        flow: BUTTON_FLOW.VAULT_WITHOUT_PURCHASE,
+        experiment: {
+          paypalCreditButtonCreateVaultSetupTokenExists: true,
+        },
+        fundingEligibility: {
+          ...defaultMockFundingOptions.fundingEligibility,
+          credit: {
+            eligible: false,
+            branded: false,
+            vaultable: false,
+          },
+        },
+      };
+
+      beforeEach(() => {
+        vi.mocked(getFundingConfig).mockReturnValue({
+          ...vi.mocked(getFundingConfig)(),
+          [FUNDING.CREDIT]: {
+            enabled: true,
+            automatic: true,
+          },
+        });
+      });
+
+      test("should force credit eligible when experiment is enabled and disableFunding does not include credit", () => {
+        const result = isFundingEligible(FUNDING.CREDIT, {
+          ...creditExperimentOptions,
+          disableFunding: [],
+        });
+
+        expect(result).toBe(true);
+      });
+
+      test("should not force credit eligible when merchant has disableFunding=credit", () => {
+        const result = isFundingEligible(FUNDING.CREDIT, {
+          ...creditExperimentOptions,
+          disableFunding: [FUNDING.CREDIT],
+        });
+
+        expect(result).toBe(false);
+      });
+
+      test("should not force credit eligible when experiment is disabled", () => {
+        const result = isFundingEligible(FUNDING.CREDIT, {
+          ...creditExperimentOptions,
+          disableFunding: [],
+          experiment: {
+            paypalCreditButtonCreateVaultSetupTokenExists: false,
+          },
+        });
+
+        expect(result).toBe(false);
+      });
+
+      test("should not force credit eligible when flow is not VAULT_WITHOUT_PURCHASE", () => {
+        const result = isFundingEligible(FUNDING.CREDIT, {
+          ...creditExperimentOptions,
+          disableFunding: [],
+          flow: BUTTON_FLOW.PURCHASE,
+        });
+
+        expect(result).toBe(false);
+      });
+    });
   });
 });

package/src/funding/itau/config.jsx

@@ -8,11 +8,14 @@ import {
 } from "@paypal/sdk-logos/src";
 
 import { BUTTON_COLOR, BUTTON_LAYOUT, DEFAULT } from "../../constants";
-import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from "../common";
+import {
+  DEFAULT_APM_FUNDING_CONFIG,
+  type FundingSourceConfig,
+} from "../common";
 
 export function getItauConfig(): FundingSourceConfig {
   return {
-    ...DEFAULT_FUNDING_CONFIG,
+    ...DEFAULT_APM_FUNDING_CONFIG,
 
     layouts: [BUTTON_LAYOUT.HORIZONTAL, BUTTON_LAYOUT.VERTICAL],
 
@@ -24,22 +27,32 @@ export function getItauConfig(): FundingSourceConfig {
       return ItauLogoInlineSVG({ logoColor, optional });
     },
 
-    colors: [BUTTON_COLOR.DARKBLUE, BUTTON_COLOR.BLUE, BUTTON_COLOR.BLACK],
+    colors: [
+      BUTTON_COLOR.DEFAULT,
+      BUTTON_COLOR.DARKBLUE,
+      BUTTON_COLOR.BLUE,
+      BUTTON_COLOR.BLACK,
+      BUTTON_COLOR.REBRAND_BLACK,
+      BUTTON_COLOR.REBRAND_WHITE,
+    ],
 
     logoColors: {
+      [BUTTON_COLOR.DEFAULT]: LOGO_COLOR.WHITE,
       [BUTTON_COLOR.DARKBLUE]: LOGO_COLOR.WHITE,
       [BUTTON_COLOR.BLUE]: LOGO_COLOR.WHITE,
       [BUTTON_COLOR.BLACK]: LOGO_COLOR.WHITE,
+      [BUTTON_COLOR.REBRAND_BLACK]: LOGO_COLOR.WHITE,
+      [BUTTON_COLOR.REBRAND_WHITE]: LOGO_COLOR.BLACK,
     },
 
     secondaryColors: {
-      ...DEFAULT_FUNDING_CONFIG.secondaryColors,
+      ...DEFAULT_APM_FUNDING_CONFIG.secondaryColors,
 
-      [DEFAULT]: BUTTON_COLOR.DARKBLUE,
-      [BUTTON_COLOR.GOLD]: BUTTON_COLOR.DARKBLUE,
+      [DEFAULT]: BUTTON_COLOR.DEFAULT,
+      [BUTTON_COLOR.GOLD]: BUTTON_COLOR.DEFAULT,
       [BUTTON_COLOR.BLUE]: BUTTON_COLOR.BLUE,
-      [BUTTON_COLOR.SILVER]: BUTTON_COLOR.DARKBLUE,
-      [BUTTON_COLOR.WHITE]: BUTTON_COLOR.DARKBLUE,
+      [BUTTON_COLOR.SILVER]: BUTTON_COLOR.DEFAULT,
+      [BUTTON_COLOR.WHITE]: BUTTON_COLOR.DEFAULT,
     },
   };
 }

package/src/funding/paylater/config.jsx

@@ -22,8 +22,7 @@ import css from "./style.scoped.scss";
 
 function getLabelText(
   fundingEligibility: FundingEligibilityType,
-  locale?: LocaleType,
-  shouldApplyRebrandedStyles?: boolean
+  locale?: LocaleType
 ): ?string {
   const { paylater } = fundingEligibility;
   const { lang } = locale || {};
@@ -68,10 +67,12 @@ function getLabelText(
   }
 
   if (
-    paylater?.products?.payIn4?.eligible &&
-    paylater?.products?.payIn4?.variant === "FR"
+    (paylater?.products?.payIn4?.eligible &&
+      paylater?.products?.payIn4?.variant === "FR") ||
+    (paylater?.products?.paylater?.eligible &&
+      paylater?.products?.paylater?.variant === "FR")
   ) {
-    labelText = shouldApplyRebrandedStyles ? "4X" : "4X PayPal";
+    labelText = "Payer en plusieurs fois";
   }
 
   return labelText;
@@ -136,13 +137,7 @@ export function getPaylaterConfig(): FundingSourceConfig {
           ) : (
             <PPRebrandLogoInlineSVG logoColor={logoColorPP} />
           )}
-          <Text>
-            {getLabelText(
-              fundingEligibility,
-              locale,
-              shouldApplyRebrandedStyles
-            ) || "Pay Later"}
-          </Text>
+          <Text>{getLabelText(fundingEligibility, locale) || "Pay Later"}</Text>
         </Style>
       );
     },

package/src/funding/paypal/monogramMark.jsx

@@ -0,0 +1,10 @@
+/* @flow */
+/** @jsx node */
+
+import { node, type ComponentNode } from "@krakenjs/jsx-pragmatic/src";
+import { PPRebrandLogoExternalImage } from "@paypal/sdk-logos/src";
+import { LOGO_COLOR } from "@paypal/sdk-logos/src/constants";
+
+export function PayPalMonogramMark(): ComponentNode<{| logoColor: string |}> {
+  return <PPRebrandLogoExternalImage logoColor={LOGO_COLOR.BLUE} />;
+}

package/src/funding/paypal/monogramMark.test.jsx

@@ -0,0 +1,24 @@
+/* @flow */
+import { describe, test, expect } from "vitest";
+
+import { PayPalMonogramMark } from "./monogramMark";
+
+describe("PayPalMonogramMark", () => {
+  test("should render PayPal monogram mark component", () => {
+    const markComponent = PayPalMonogramMark();
+
+    expect(markComponent).toBeDefined();
+    expect(markComponent.type).toBe("component");
+    expect(markComponent.props).toBeDefined();
+    expect(markComponent.props.logoColor).toBe("blue");
+  });
+
+  test("should return ChildType for type compatibility", () => {
+    const markComponent = PayPalMonogramMark();
+
+    // Should be compatible with ChildType (no type errors)
+    expect(typeof markComponent).toBe("object");
+    expect(markComponent.type).toBeDefined();
+    expect(markComponent.props).toBeDefined();
+  });
+});

package/src/funding/sepa/config.jsx

@@ -4,9 +4,10 @@
 import {
   SepaLogoInlineSVG,
   SepaLogoExternalImage,
+  LOGO_COLOR,
 } from "@paypal/sdk-logos/src";
 
-import { BUTTON_LAYOUT } from "../../constants";
+import { BUTTON_COLOR, BUTTON_LAYOUT, TEXT_COLOR } from "../../constants";
 import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from "../common";
 
 export function getSepaConfig(): FundingSourceConfig {
@@ -15,6 +16,33 @@ export function getSepaConfig(): FundingSourceConfig {
 
     layouts: [BUTTON_LAYOUT.VERTICAL],
 
+    colors: [
+      BUTTON_COLOR.DEFAULT,
+      BUTTON_COLOR.SILVER,
+      BUTTON_COLOR.BLACK,
+      BUTTON_COLOR.WHITE,
+      BUTTON_COLOR.REBRAND_BLACK,
+      BUTTON_COLOR.REBRAND_WHITE,
+    ],
+
+    logoColors: {
+      [BUTTON_COLOR.DEFAULT]: LOGO_COLOR.BLACK,
+      [BUTTON_COLOR.SILVER]: LOGO_COLOR.BLACK,
+      [BUTTON_COLOR.WHITE]: LOGO_COLOR.BLACK,
+      [BUTTON_COLOR.BLACK]: LOGO_COLOR.WHITE,
+      [BUTTON_COLOR.REBRAND_BLACK]: LOGO_COLOR.WHITE,
+      [BUTTON_COLOR.REBRAND_WHITE]: LOGO_COLOR.BLACK,
+    },
+
+    textColors: {
+      [BUTTON_COLOR.DEFAULT]: TEXT_COLOR.BLACK,
+      [BUTTON_COLOR.SILVER]: TEXT_COLOR.BLACK,
+      [BUTTON_COLOR.WHITE]: TEXT_COLOR.BLACK,
+      [BUTTON_COLOR.BLACK]: TEXT_COLOR.WHITE,
+      [BUTTON_COLOR.REBRAND_BLACK]: TEXT_COLOR.WHITE,
+      [BUTTON_COLOR.REBRAND_WHITE]: TEXT_COLOR.BLACK,
+    },
+
     Logo: ({ logoColor, optional }) => {
       if (__WEB__) {
         return SepaLogoExternalImage({ logoColor, optional });

package/src/marks/component.jsx

@@ -19,6 +19,7 @@ import {
 import { getRememberedFunding } from "@paypal/funding-components/src";
 import {
   getEnableFunding,
+  getDisableFunding,
   getComponents,
   getFundingEligibility,
   getEnv,
@@ -29,7 +30,7 @@ import type {
   OnShippingAddressChange,
   OnShippingOptionsChange,
 } from "../ui/buttons/props";
-import { BUTTON_LAYOUT, BUTTON_FLOW } from "../constants";
+import { BUTTON_LAYOUT, BUTTON_FLOW, MARK_VARIATIONS } from "../constants";
 import { determineEligibleFunding, isFundingEligible } from "../funding";
 import {
   supportsVenmoPopups,
@@ -52,6 +53,7 @@ type MarksInstance = {|
 
 type MarksProps = {|
   fundingSource?: ?$Values<typeof FUNDING>,
+  markVariation?: ?$Values<typeof MARK_VARIATIONS>,
   onShippingChange?: OnShippingChange,
   onShippingAddressChange?: OnShippingAddressChange,
   onShippingOptionsChange?: OnShippingOptionsChange,
@@ -64,6 +66,7 @@ export type MarksComponent = (MarksProps) => MarksInstance;
 export const getMarksComponent: () => MarksComponent = memoize(() => {
   function Marks({
     fundingSource,
+    markVariation,
     onShippingChange,
     onShippingAddressChange,
     onShippingOptionsChange,
@@ -76,6 +79,7 @@ export const getMarksComponent: () => MarksComponent = memoize(() => {
     const remembered = getRememberedFunding();
     const layout = BUTTON_LAYOUT.VERTICAL;
     const enableFunding = getEnableFunding();
+    const disableFunding = getDisableFunding();
     const components = getComponents();
     const flow = BUTTON_FLOW.PURCHASE;
     const applePaySupport = fundingEligibility?.applepay?.eligible
@@ -101,6 +105,7 @@ export const getMarksComponent: () => MarksComponent = memoize(() => {
       fundingSource,
       fundingEligibility,
       enableFunding,
+      disableFunding,
       components,
       platform,
       remembered,
@@ -132,6 +137,7 @@ export const getMarksComponent: () => MarksComponent = memoize(() => {
         fundingSource,
         fundingEligibility,
         enableFunding,
+        disableFunding,
         components,
         onShippingChange,
         onShippingAddressChange,
@@ -163,6 +169,7 @@ export const getMarksComponent: () => MarksComponent = memoize(() => {
                 <MarksElementRebrand
                   fundingEligibility={fundingEligibility}
                   fundingSources={fundingSources}
+                  markVariation={markVariation}
                   height={height}
                   experiment={experiment}
                   env={env}

package/src/marks/templateRebrand.jsx

@@ -12,10 +12,12 @@ import { toPx } from "@krakenjs/belter/src";
 
 import type { Experiment } from "../types";
 import { getFundingConfig } from "../funding";
-import { CLASS } from "../constants";
+import { CLASS, MARK_VARIATIONS } from "../constants";
+import { PayPalMonogramMark } from "../funding/paypal/monogramMark";
 
 type MarkOptions = {|
   fundingSource: $Values<typeof FUNDING>,
+  markVariation?: ?$Values<typeof MARK_VARIATIONS>,
   fundingEligibility: FundingEligibilityType,
   experiment: Experiment,
   env: $Values<typeof ENV>,
@@ -23,6 +25,7 @@ type MarkOptions = {|
 
 function Mark({
   fundingSource,
+  markVariation,
   fundingEligibility,
   experiment,
   env,
@@ -53,7 +56,8 @@ function Mark({
     backgroundClasses += " paypal-mark-rebrand-own-border-and-padding";
   }
 
-  return (
+  // Helper function to render wordmark (Logo)
+  const renderWordmark = () => (
     <div class={backgroundClasses}>
       {marksDefined && MarkLogo ? (
         <MarkLogo shouldApplyRebrandedStyles={true} />
@@ -68,11 +72,30 @@ function Mark({
       )}
     </div>
   );
+
+  // Helper function to render PayPal monogram
+  const renderPayPalMonogram = () => (
+    <div class="paypal-mark-rebrand paypal-mark-rebrand-white">
+      <PayPalMonogramMark />
+    </div>
+  );
+
+  // Handle PayPal variations - only check for monogram, everything else defaults to wordmark
+  if (
+    fundingSource === FUNDING.PAYPAL &&
+    markVariation === MARK_VARIATIONS.MONOGRAM
+  ) {
+    return renderPayPalMonogram();
+  }
+
+  // Default logic for all other cases (handles undefined, null, "wordmark", invalid values)
+  return renderWordmark();
 }
 
 type MarksElementOptions = {|
   fundingEligibility: FundingEligibilityType,
   fundingSources: $ReadOnlyArray<$Values<typeof FUNDING>>,
+  markVariation?: ?$Values<typeof MARK_VARIATIONS>,
   height: number,
   experiment: Experiment,
   env: $Values<typeof ENV>,
@@ -81,6 +104,7 @@ type MarksElementOptions = {|
 export function MarksElementRebrand({
   fundingEligibility,
   fundingSources,
+  markVariation,
   experiment,
   env,
 }: MarksElementOptions): ElementNode {
@@ -160,6 +184,11 @@ export function MarksElementRebrand({
                     .paypal-mark-rebrand .paypal-logo:last-child {
                         margin-right: 0px;
                     }
+
+                    .paypal-mark-rebrand .paypal-logo-paypal-rebrand {
+                        padding-top: 2px;
+                        margin-right: ${toPx(rebrandHeight / 5)};
+                    }
                 `}
       </style>
       <div class="paypal-marks-rebrand">
@@ -167,6 +196,7 @@ export function MarksElementRebrand({
           <Mark
             fundingEligibility={fundingEligibility}
             fundingSource={fundingSource}
+            markVariation={markVariation}
             experiment={experiment}
             env={env}
           />

package/src/marks/templateRebrand.test.jsx

@@ -0,0 +1,101 @@
+/* @noflow */
+import { describe, test, expect, vi } from "vitest";
+import { FUNDING, ENV } from "@paypal/sdk-constants/src";
+
+import { MARK_VARIATIONS } from "../constants";
+
+import { MarksElementRebrand } from "./templateRebrand";
+
+// Mock dependencies
+vi.mock("@paypal/sdk-client/src", () => ({
+  getLocale: vi.fn(() => ({ country: "US", lang: "en" })),
+}));
+
+vi.mock("../funding", () => ({
+  getFundingConfig: vi.fn(() => ({
+    [FUNDING.PAYPAL]: {
+      Logo: vi.fn(() => ({ type: "PayPalLogo", props: {} })),
+      Mark: vi.fn(() => ({ type: "PayPalMark", props: {} })),
+    },
+    [FUNDING.VENMO]: {
+      Logo: vi.fn(() => ({ type: "VenmoLogo", props: {} })),
+    },
+    [FUNDING.CREDIT]: {
+      Logo: vi.fn(() => ({ type: "CreditLogo", props: {} })),
+    },
+  })),
+}));
+
+vi.mock("../funding/paypal/monogramMark", () => ({
+  PayPalMonogramMark: vi.fn(() => ({ type: "PayPalMonogramMark", props: {} })),
+}));
+
+describe("templateRebrand Mark variation logic", () => {
+  const baseProps = {
+    fundingEligibility: { paypal: { eligible: true, branded: true } },
+    experiment: { isPaypalRebrandEnabled: true },
+    env: ENV.SANDBOX,
+    height: 32,
+  };
+
+  // Helper to get the Mark component props
+  const getMarkProps = (fundingSource, markVariation) => {
+    const element = MarksElementRebrand({
+      ...baseProps,
+      fundingSources: [fundingSource],
+      markVariation,
+    });
+
+    const marksDiv = element.children.find(
+      (child) => child?.props?.class === "paypal-marks-rebrand"
+    );
+
+    return marksDiv?.children?.[0]?.props;
+  };
+
+  // 1. Monogram renders when variationName: "monogram" with FUNDING.PAYPAL
+  test("renders monogram when markVariation is 'monogram' with FUNDING.PAYPAL", () => {
+    const props = getMarkProps(FUNDING.PAYPAL, MARK_VARIATIONS.MONOGRAM);
+
+    expect(props.fundingSource).toBe(FUNDING.PAYPAL);
+    expect(props.markVariation).toBe(MARK_VARIATIONS.MONOGRAM);
+  });
+
+  // 2. Wordmark renders when variationName is undefined or "wordmark"
+  test("renders wordmark when markVariation is undefined", () => {
+    const props = getMarkProps(FUNDING.PAYPAL, undefined);
+
+    expect(props.fundingSource).toBe(FUNDING.PAYPAL);
+    expect(props.markVariation).toBeUndefined();
+  });
+
+  test("renders wordmark when markVariation is 'wordmark'", () => {
+    const props = getMarkProps(FUNDING.PAYPAL, MARK_VARIATIONS.WORDMARK);
+
+    expect(props.fundingSource).toBe(FUNDING.PAYPAL);
+    expect(props.markVariation).toBe(MARK_VARIATIONS.WORDMARK);
+  });
+
+  // 3. Non-PayPal funding sources ignore markVariation entirely
+  test("ignores markVariation for FUNDING.VENMO", () => {
+    const props = getMarkProps(FUNDING.VENMO, MARK_VARIATIONS.MONOGRAM);
+
+    expect(props.fundingSource).toBe(FUNDING.VENMO);
+    expect(props.markVariation).toBe(MARK_VARIATIONS.MONOGRAM);
+  });
+
+  test("ignores markVariation for FUNDING.CREDIT", () => {
+    const props = getMarkProps(FUNDING.CREDIT, MARK_VARIATIONS.MONOGRAM);
+
+    expect(props.fundingSource).toBe(FUNDING.CREDIT);
+    expect(props.markVariation).toBe(MARK_VARIATIONS.MONOGRAM);
+  });
+
+  // 4. Fallback to wordmark for unrecognized markVariation values
+  test("falls back to wordmark for unrecognized markVariation values", () => {
+    const props = getMarkProps(FUNDING.PAYPAL, "invalid-variation");
+
+    expect(props.fundingSource).toBe(FUNDING.PAYPAL);
+    expect(props.markVariation).toBe("invalid-variation");
+  });
+});

package/src/ui/buttons/buttons.jsx

@@ -143,6 +143,7 @@ export function Buttons(props: ButtonsProps): ElementNode {
     components,
     content,
     customerId,
+    disableFunding,
     displayOnly,
     enableFunding,
     env,
@@ -181,6 +182,7 @@ export function Buttons(props: ButtonsProps): ElementNode {
     platform,
     fundingEligibility,
     enableFunding,
+    disableFunding,
     components,
     onShippingChange,
     onShippingAddressChange,