@paypal/checkout-components 5.0.416 → 5.0.420

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

@@ -2,7 +2,7 @@
 import { describe, expect, it, beforeEach, vi } from "vitest";
 import { FUNDING } from "@paypal/sdk-constants";
 
-import { BUTTON_COLOR } from "../../constants";
+import { BUTTON_COLOR, BUTTON_LAYOUT, BUTTON_SHAPE } from "../../constants";
 
 import {
   getButtonColor,
@@ -13,8 +13,20 @@ import {
   throwErrorForInvalidButtonColor,
   determineRandomButtonColor,
   getColorABTestFromStorage,
+  getBrandVersion,
+  normalizeButtonStyle,
 } from "./props";
 
+describe("getBrandVersion", () => {
+  it("should return v2 when rebrand styles are applied", () => {
+    expect(getBrandVersion({ shouldApplyRebrandedStyles: true })).toBe("v2");
+  });
+
+  it("should return v1 when rebrand styles are not applied", () => {
+    expect(getBrandVersion({ shouldApplyRebrandedStyles: false })).toBe("v1");
+  });
+});
+
 describe("getColorABTestFromStorage", () => {
   it("should return null when storage state has no colorABTest value", () => {
     const storageState = {
@@ -43,7 +55,7 @@ describe("getColorABTestFromStorage", () => {
   it("should return value when storage state has colorABTest with value property", () => {
     const mockStoredValue = {
       shouldApplyRebrandedStyles: true,
-      color: BUTTON_COLOR.REBRAND_BLUE,
+      color: BUTTON_COLOR.BLUE,
       sessionID: "test-session",
     };
 
@@ -70,7 +82,7 @@ describe("determineRandomButtonColor", () => {
     mathRandomSpy.mockRestore();
   });
 
-  it("should return rebrand blue when random value is less than 0.33", () => {
+  it("should return rebrand blue when random value is less than 0.5", () => {
     mathRandomSpy.mockReturnValue(0);
 
     const result = determineRandomButtonColor({
@@ -79,26 +91,13 @@ describe("determineRandomButtonColor", () => {
 
     expect(result).toEqual({
       shouldApplyRebrandedStyles: true,
-      color: BUTTON_COLOR.REBRAND_BLUE,
-      isButtonColorABTestMerchant: true,
-    });
-  });
-
-  it("should return rebrand darkblue when random value is between 0.33 and 0.67", () => {
-    mathRandomSpy.mockReturnValue(0.4);
-
-    const result = determineRandomButtonColor({
-      buttonColorInput: BUTTON_COLOR.GOLD,
-    });
-
-    expect(result).toEqual({
-      shouldApplyRebrandedStyles: true,
-      color: BUTTON_COLOR.REBRAND_DARKBLUE,
+      color: BUTTON_COLOR.BLUE,
       isButtonColorABTestMerchant: true,
+      brandVersion: "v2",
     });
   });
 
-  it("should return provided buttonColorInput when random value is above 0.67", () => {
+  it("should return provided buttonColorInput when random value is above 0.5", () => {
     mathRandomSpy.mockReturnValue(0.8);
 
     const result = determineRandomButtonColor({
@@ -109,6 +108,7 @@ describe("determineRandomButtonColor", () => {
       shouldApplyRebrandedStyles: false,
       color: BUTTON_COLOR.BLACK,
       isButtonColorABTestMerchant: true,
+      brandVersion: "v1",
     });
   });
 
@@ -123,6 +123,7 @@ describe("determineRandomButtonColor", () => {
       shouldApplyRebrandedStyles: false,
       color: BUTTON_COLOR.GOLD,
       isButtonColorABTestMerchant: true,
+      brandVersion: "v1",
     });
   });
 });
@@ -171,55 +172,46 @@ describe("throwErrorForInvalidButtonColor", () => {
       });
     }).toThrow(/paypal/i);
   });
-
-  it("should filter out rebranded colors from error message", () => {
-    // Define a local helper function to capture error message
-    function getErrorMessage(fn): string {
-      try {
-        fn();
-        return "";
-      } catch (err) {
-        return err.message;
-      }
-    }
-
-    const errorMessage = getErrorMessage(() => {
-      throwErrorForInvalidButtonColor({
-        fundingSource: FUNDING.PAYPAL,
-        fundingSourceColors: [
-          BUTTON_COLOR.GOLD,
-          BUTTON_COLOR.BLUE,
-          BUTTON_COLOR.REBRAND_BLUE, // This should be filtered out
-        ],
-        invalidButtonColor: BUTTON_COLOR.BLACK,
-      });
-    });
-
-    // Check that the error message contains gold and blue
-    expect(errorMessage).toMatch(/gold/i);
-    expect(errorMessage).toMatch(/blue/i);
-
-    // Check that the error message doesn't contain rebrand_blue
-    expect(errorMessage).not.toMatch(/rebrand_blue/i);
-  });
 });
 
 describe("getDefaultColorForFundingSource", () => {
   beforeEach(() => {
     // Mock getFundingConfig to return consistent test data
-    vi.mock("../../funding", () => ({
-      getFundingConfig: () => ({
-        [FUNDING.PAYPAL]: {
-          colors: [BUTTON_COLOR.GOLD, BUTTON_COLOR.BLUE, BUTTON_COLOR.WHITE],
-        },
-        [FUNDING.VENMO]: {
-          colors: [BUTTON_COLOR.BLUE],
-        },
-        [FUNDING.PAYLATER]: {
-          colors: [BUTTON_COLOR.WHITE, BUTTON_COLOR.BLACK],
-        },
-      }),
-    }));
+    vi.mock("../../funding", async (importOriginal) => {
+      const actual = await importOriginal();
+      return {
+        ...actual,
+        getFundingConfig: () => ({
+          [FUNDING.PAYPAL]: {
+            colors: [
+              BUTTON_COLOR.GOLD,
+              BUTTON_COLOR.BLUE,
+              BUTTON_COLOR.SILVER,
+              BUTTON_COLOR.WHITE,
+            ],
+            colorsRebrand: [
+              BUTTON_COLOR.BLUE,
+              BUTTON_COLOR.BLACK,
+              BUTTON_COLOR.WHITE,
+            ],
+            layouts: [BUTTON_LAYOUT.VERTICAL, BUTTON_LAYOUT.HORIZONTAL],
+            shapes: [BUTTON_SHAPE.RECT, BUTTON_SHAPE.PILL, BUTTON_SHAPE.SHARP],
+            logoColors: {},
+            logoColorsRebrand: {},
+            textColors: {},
+            textColorsRebrand: {},
+            secondaryColors: {},
+            secondaryColorsRebrand: {},
+          },
+          [FUNDING.VENMO]: {
+            colors: [BUTTON_COLOR.BLUE],
+          },
+          [FUNDING.PAYLATER]: {
+            colors: [BUTTON_COLOR.WHITE, BUTTON_COLOR.BLACK],
+          },
+        }),
+      };
+    });
   });
 
   afterEach(() => {
@@ -229,6 +221,7 @@ describe("getDefaultColorForFundingSource", () => {
   it("should return the first color in the funding source config when style.color is undefined", () => {
     const result = getDefaultColorForFundingSource({
       fundingSource: FUNDING.PAYPAL,
+      shouldApplyRebrandedStyles: false,
       // $FlowFixMe
       style: {},
     });
@@ -239,6 +232,7 @@ describe("getDefaultColorForFundingSource", () => {
   it("should return style.color if it is valid for the funding source", () => {
     const result = getDefaultColorForFundingSource({
       fundingSource: FUNDING.PAYPAL,
+      shouldApplyRebrandedStyles: false,
       // $FlowFixMe
       style: { color: BUTTON_COLOR.BLUE },
     });
@@ -250,6 +244,7 @@ describe("getDefaultColorForFundingSource", () => {
     expect(() => {
       getDefaultColorForFundingSource({
         fundingSource: FUNDING.PAYPAL,
+        shouldApplyRebrandedStyles: false,
         // $FlowFixMe
         style: { color: BUTTON_COLOR.BLACK },
       });
@@ -259,18 +254,21 @@ describe("getDefaultColorForFundingSource", () => {
   it("should return different default colors for different funding sources", () => {
     const paypalResult = getDefaultColorForFundingSource({
       fundingSource: FUNDING.PAYPAL,
+      shouldApplyRebrandedStyles: false,
       // $FlowFixMe
       style: {},
     });
 
     const venmoResult = getDefaultColorForFundingSource({
       fundingSource: FUNDING.VENMO,
+      shouldApplyRebrandedStyles: false,
       // $FlowFixMe
       style: {},
     });
 
     const paylaterResult = getDefaultColorForFundingSource({
       fundingSource: FUNDING.PAYLATER,
+      shouldApplyRebrandedStyles: false,
       // $FlowFixMe
       style: {},
     });
@@ -283,6 +281,7 @@ describe("getDefaultColorForFundingSource", () => {
   it("should default to GOLD for smart stack (fundingSource is undefined)", () => {
     const result = getDefaultColorForFundingSource({
       fundingSource: FUNDING.IDEAL,
+      shouldApplyRebrandedStyles: false,
       // $FlowFixMe
       style: {},
     });
@@ -293,6 +292,7 @@ describe("getDefaultColorForFundingSource", () => {
   it("should return style.color if provided for smart stack (fundingSource is undefined)", () => {
     const result = getDefaultColorForFundingSource({
       fundingSource: FUNDING.IDEAL,
+      shouldApplyRebrandedStyles: false,
       // $FlowFixMe
       style: { color: BUTTON_COLOR.BLACK },
     });
@@ -303,6 +303,7 @@ describe("getDefaultColorForFundingSource", () => {
   it("should handle null style", () => {
     const result = getDefaultColorForFundingSource({
       fundingSource: FUNDING.PAYPAL,
+      shouldApplyRebrandedStyles: false,
       style: null,
     });
 
@@ -312,6 +313,7 @@ describe("getDefaultColorForFundingSource", () => {
   it("should handle undefined fundingSource", () => {
     const result = getDefaultColorForFundingSource({
       fundingSource: undefined,
+      shouldApplyRebrandedStyles: false,
       // $FlowFixMe
       style: {},
     });
@@ -324,9 +326,10 @@ describe("getColorForABTest", () => {
   it("should return color from storage if sessionID matches", () => {
     const mockSessionID = "test-session-123";
     const mockStoredValue = {
-      color: BUTTON_COLOR.REBRAND_BLUE,
+      color: BUTTON_COLOR.BLUE,
       shouldApplyRebrandedStyles: true,
       sessionID: mockSessionID,
+      brandVersion: "v2",
     };
 
     const storageState = {
@@ -342,8 +345,9 @@ describe("getColorForABTest", () => {
     });
 
     expect(result).toEqual({
-      color: BUTTON_COLOR.REBRAND_BLUE,
+      color: BUTTON_COLOR.BLUE,
       shouldApplyRebrandedStyles: true,
+      brandVersion: "v2",
     });
     expect(storageState.get).toHaveBeenCalledWith("colorABTest");
     expect(storageState.set).not.toHaveBeenCalled();
@@ -352,7 +356,7 @@ describe("getColorForABTest", () => {
   it("should generate new color and save it if sessionID does not match", () => {
     const mockSessionID = "new-session-456";
     const mockStoredValue = {
-      color: BUTTON_COLOR.REBRAND_BLUE,
+      color: BUTTON_COLOR.BLUE,
       shouldApplyRebrandedStyles: true,
       sessionID: "old-session-123",
     };
@@ -439,7 +443,7 @@ describe("getColorForABTest", () => {
 });
 
 describe("getColorForFullRedesign", () => {
-  it("should map BLUE to REBRAND_BLUE", () => {
+  it("should keep BLUE as BLUE", () => {
     const result = getColorForFullRedesign({
       // $FlowFixMe
       style: { color: BUTTON_COLOR.BLUE },
@@ -447,13 +451,14 @@ describe("getColorForFullRedesign", () => {
     });
 
     expect(result).toEqual({
-      color: BUTTON_COLOR.REBRAND_BLUE,
+      color: BUTTON_COLOR.BLUE,
       shouldApplyRebrandedStyles: true,
       isButtonColorABTestMerchant: false,
+      brandVersion: "v2",
     });
   });
 
-  it("should map DARKBLUE to REBRAND_BLUE", () => {
+  it("should map DARKBLUE to BLUE", () => {
     const result = getColorForFullRedesign({
       // $FlowFixMe
       style: { color: BUTTON_COLOR.DARKBLUE },
@@ -461,13 +466,14 @@ describe("getColorForFullRedesign", () => {
     });
 
     expect(result).toEqual({
-      color: BUTTON_COLOR.REBRAND_BLUE,
+      color: BUTTON_COLOR.BLUE,
       shouldApplyRebrandedStyles: true,
       isButtonColorABTestMerchant: false,
+      brandVersion: "v2",
     });
   });
 
-  it("should map GOLD to REBRAND_BLUE", () => {
+  it("should map GOLD to BLUE", () => {
     const result = getColorForFullRedesign({
       // $FlowFixMe
       style: { color: BUTTON_COLOR.GOLD },
@@ -475,23 +481,25 @@ describe("getColorForFullRedesign", () => {
     });
 
     expect(result).toEqual({
-      color: BUTTON_COLOR.REBRAND_BLUE,
+      color: BUTTON_COLOR.BLUE,
       shouldApplyRebrandedStyles: true,
       isButtonColorABTestMerchant: false,
+      brandVersion: "v2",
     });
   });
 
-  it("should handle REBRAND colors directly without remapping them", () => {
+  it("should map SILVER to WHITE", () => {
     const result = getColorForFullRedesign({
       // $FlowFixMe
-      style: { color: BUTTON_COLOR.REBRAND_DARKBLUE },
+      style: { color: BUTTON_COLOR.SILVER },
       fundingSource: FUNDING.PAYPAL,
     });
 
     expect(result).toEqual({
-      color: BUTTON_COLOR.REBRAND_DARKBLUE,
+      color: BUTTON_COLOR.WHITE,
       shouldApplyRebrandedStyles: true,
       isButtonColorABTestMerchant: false,
+      brandVersion: "v2",
     });
   });
 
@@ -534,9 +542,10 @@ describe("getColorForFullRedesign", () => {
     });
 
     expect(result).toEqual({
-      color: BUTTON_COLOR.REBRAND_BLUE,
+      color: BUTTON_COLOR.BLUE,
       shouldApplyRebrandedStyles: true,
       isButtonColorABTestMerchant: false,
+      brandVersion: "v2",
     });
   });
 
@@ -676,6 +685,7 @@ describe("getButtonColor", () => {
       color: BUTTON_COLOR.GOLD,
       shouldApplyRebrandedStyles: false,
       isButtonColorABTestMerchant: false,
+      brandVersion: "v1",
     });
   });
 
@@ -699,9 +709,10 @@ describe("getButtonColor", () => {
     });
 
     expect(result).toEqual({
-      color: BUTTON_COLOR.REBRAND_BLUE,
+      color: BUTTON_COLOR.BLUE,
       shouldApplyRebrandedStyles: true,
       isButtonColorABTestMerchant: false,
+      brandVersion: "v2",
     });
   });
 
@@ -754,6 +765,7 @@ describe("getButtonColor", () => {
       color: BUTTON_COLOR.BLUE,
       shouldApplyRebrandedStyles: false,
       isButtonColorABTestMerchant: false,
+      brandVersion: "v1",
     });
   });
 
@@ -779,6 +791,7 @@ describe("getButtonColor", () => {
       color: BUTTON_COLOR.WHITE,
       shouldApplyRebrandedStyles: false,
       isButtonColorABTestMerchant: false,
+      brandVersion: "v1",
     });
   });
 
@@ -791,6 +804,7 @@ describe("getButtonColor", () => {
       color: BUTTON_COLOR.GOLD,
       shouldApplyRebrandedStyles: false,
       isButtonColorABTestMerchant: false,
+      brandVersion: "v1",
     });
   });
 });
@@ -822,3 +836,51 @@ describe("HideSubmitButtonProps type validation", () => {
     expect(validButtonProps.hideSubmitButtonForCardForm).toBe(false);
   });
 });
+
+describe("normalizeButtonStyle requestedButtonColor", () => {
+  it("should preserve the merchant-provided color as requestedButtonColor when rebrand maps it to a different color", () => {
+    const result = normalizeButtonStyle(
+      // $FlowFixMe
+      {
+        fundingSource: FUNDING.PAYPAL,
+        buttonColor: {
+          color: BUTTON_COLOR.BLUE,
+          shouldApplyRebrandedStyles: true,
+          brandVersion: "v2",
+          isButtonColorABTestMerchant: false,
+        },
+      },
+      // $FlowFixMe
+      { color: BUTTON_COLOR.GOLD }
+    );
+
+    // Merchant configured gold — rebrand maps it to blue
+    expect(result.requestedButtonColor).toBe(BUTTON_COLOR.GOLD);
+    expect(result.color).toBe(BUTTON_COLOR.BLUE);
+    expect(result.shouldApplyRebrandedStyles).toBe(true);
+    expect(result.brandVersion).toBe("v2");
+  });
+
+  it("should preserve merchant silver as requestedButtonColor when rebrand maps it to white", () => {
+    const result = normalizeButtonStyle(
+      // $FlowFixMe
+      {
+        fundingSource: FUNDING.PAYPAL,
+        buttonColor: {
+          color: BUTTON_COLOR.WHITE,
+          shouldApplyRebrandedStyles: true,
+          brandVersion: "v2",
+          isButtonColorABTestMerchant: false,
+        },
+      },
+      // $FlowFixMe
+      { color: BUTTON_COLOR.SILVER }
+    );
+
+    // Merchant configured silver — rebrand maps it to white
+    expect(result.requestedButtonColor).toBe(BUTTON_COLOR.SILVER);
+    expect(result.color).toBe(BUTTON_COLOR.WHITE);
+    expect(result.shouldApplyRebrandedStyles).toBe(true);
+    expect(result.brandVersion).toBe("v2");
+  });
+});

package/src/ui/buttons/styles/color.js

@@ -44,85 +44,85 @@ export const buttonColorStyle = `
         border-top-color: transparent;
     }
 
-    .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.REBRAND_BLUE},
-    .${CLASS.BUTTON_ROW}.${CLASS.COLOR}-${BUTTON_COLOR.REBRAND_BLUE} .menu-button {
+    .${CLASS.BUTTON}.${CLASS.BUTTON_REBRAND}.${CLASS.COLOR}-${BUTTON_COLOR.BLUE},
+    .${CLASS.BUTTON_ROW}.${CLASS.BUTTON_REBRAND}.${CLASS.COLOR}-${BUTTON_COLOR.BLUE} .menu-button {
         background: #60CDFF;
     }
 
     @media (hover:hover) {
-        .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.REBRAND_BLUE}:hover {
+        .${CLASS.BUTTON}.${CLASS.BUTTON_REBRAND}.${CLASS.COLOR}-${BUTTON_COLOR.BLUE}:hover {
             background: #54B4E0;
             overflow: inherit;
         }
 
-        .${CLASS.BUTTON_REBRAND}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.VENMO}].${CLASS.COLOR}-${BUTTON_COLOR.REBRAND_BLUE}:hover {
+        .${CLASS.BUTTON}.${CLASS.BUTTON_REBRAND}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.VENMO}].${CLASS.COLOR}-${BUTTON_COLOR.BLUE}:hover {
             background: #0073E0;
         }
     }
-    
+
     @media (hover:hover) {
-        .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.REBRAND_BLUE}:active {
+        .${CLASS.BUTTON}.${CLASS.BUTTON_REBRAND}.${CLASS.COLOR}-${BUTTON_COLOR.BLUE}:active {
             background: #3DB5FF;
             overflow: inherit;
         }
 
-        .${CLASS.BUTTON_REBRAND}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.VENMO}].${CLASS.COLOR}-${BUTTON_COLOR.REBRAND_BLUE}:active {
+        .${CLASS.BUTTON}.${CLASS.BUTTON_REBRAND}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.VENMO}].${CLASS.COLOR}-${BUTTON_COLOR.BLUE}:active {
             background: #0074FF;
         }
     }
 
-    .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.REBRAND_DARKBLUE},
-    .${CLASS.BUTTON_ROW}.${CLASS.COLOR}-${BUTTON_COLOR.REBRAND_DARKBLUE} .menu-button {
+    .${CLASS.BUTTON}.${CLASS.BUTTON_REBRAND}.${CLASS.COLOR}-${BUTTON_COLOR.DARKBLUE},
+    .${CLASS.BUTTON_ROW}.${CLASS.BUTTON_REBRAND}.${CLASS.COLOR}-${BUTTON_COLOR.DARKBLUE} .menu-button {
         background: #002991;
     }
 
     @media (hover:hover) {
-        .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.REBRAND_DARKBLUE}:hover {
+        .${CLASS.BUTTON}.${CLASS.BUTTON_REBRAND}.${CLASS.COLOR}-${BUTTON_COLOR.DARKBLUE}:hover {
             background: #0038BA;
             overflow: inherit;
         }
     }
-    
+
     @media (hover:hover) {
-        .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.REBRAND_DARKBLUE}:active {
+        .${CLASS.BUTTON}.${CLASS.BUTTON_REBRAND}.${CLASS.COLOR}-${BUTTON_COLOR.DARKBLUE}:active {
             background: #0057D9;
             overflow: inherit;
         }
     }
 
-    .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.REBRAND_BLACK},
-    .${CLASS.BUTTON_ROW}.${CLASS.COLOR}-${BUTTON_COLOR.REBRAND_BLACK} .menu-button {
+    .${CLASS.BUTTON}.${CLASS.BUTTON_REBRAND}.${CLASS.COLOR}-${BUTTON_COLOR.BLACK},
+    .${CLASS.BUTTON_ROW}.${CLASS.BUTTON_REBRAND}.${CLASS.COLOR}-${BUTTON_COLOR.BLACK} .menu-button {
         background: #000000;
     }
 
     @media (hover:hover) {
-        .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.REBRAND_BLACK}:hover {
+        .${CLASS.BUTTON}.${CLASS.BUTTON_REBRAND}.${CLASS.COLOR}-${BUTTON_COLOR.BLACK}:hover {
             background: #333333;
             overflow: inherit;
         }
     }
-    
+
     @media (hover:hover) {
-        .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.REBRAND_BLACK}:active {
+        .${CLASS.BUTTON}.${CLASS.BUTTON_REBRAND}.${CLASS.COLOR}-${BUTTON_COLOR.BLACK}:active {
             background: #696969;
             overflow: inherit;
         }
     }
 
-    .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.REBRAND_WHITE},
-    .${CLASS.BUTTON_ROW}.${CLASS.COLOR}-${BUTTON_COLOR.REBRAND_WHITE} .menu-button {
+    .${CLASS.BUTTON}.${CLASS.BUTTON_REBRAND}.${CLASS.COLOR}-${BUTTON_COLOR.WHITE},
+    .${CLASS.BUTTON_ROW}.${CLASS.BUTTON_REBRAND}.${CLASS.COLOR}-${BUTTON_COLOR.WHITE} .menu-button {
         background: #FFFFFF;
     }
 
     @media (hover:hover) {
-        .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.REBRAND_WHITE}:hover {
+        .${CLASS.BUTTON}.${CLASS.BUTTON_REBRAND}.${CLASS.COLOR}-${BUTTON_COLOR.WHITE}:hover {
             background: #F2F2F2;
             overflow: inherit;
         }
     }
-    
+
     @media (hover:hover) {
-        .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.REBRAND_WHITE}:active {
+        .${CLASS.BUTTON}.${CLASS.BUTTON_REBRAND}.${CLASS.COLOR}-${BUTTON_COLOR.WHITE}:active {
             background: #E9E9E9;
             overflow: inherit;
         }
@@ -178,8 +178,8 @@ export const buttonColorStyle = `
         background: #0070ba;
     }
 
-    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.VENMO}].${CLASS.COLOR}-${BUTTON_COLOR.BLUE}, 
-    .${CLASS.BUTTON_REBRAND}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.VENMO}].${CLASS.COLOR}-${BUTTON_COLOR.REBRAND_BLUE} {
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.VENMO}].${CLASS.COLOR}-${BUTTON_COLOR.BLUE},
+    .${CLASS.BUTTON}.${CLASS.BUTTON_REBRAND}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.VENMO}].${CLASS.COLOR}-${BUTTON_COLOR.BLUE} {
         background: #008CFF;
     }
 
@@ -188,6 +188,12 @@ export const buttonColorStyle = `
         background: #2C2E2F;
     }
 
+    .${CLASS.BUTTON}.${CLASS.BUTTON_REBRAND}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BLIK}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT},
+    .${CLASS.BUTTON}.${CLASS.BUTTON_REBRAND}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BOLETO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT},
+    .${CLASS.BUTTON}.${CLASS.BUTTON_REBRAND}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.IDEAL}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT} {
+        background: #000000;
+    }
+
     .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BANCONTACT}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT} {
         background: linear-gradient(to right, #1E3764, #005AB9);
     }
@@ -457,8 +463,6 @@ export const buttonColorStyle = `
     }
 
     .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.WHITE},
-    .${CLASS.BUTTON_REBRAND}.${CLASS.COLOR}-${BUTTON_COLOR.REBRAND_WHITE},
-    .${CLASS.BUTTON_ROW}.${CLASS.COLOR}-${BUTTON_COLOR.REBRAND_WHITE} .menu-button,
     .${CLASS.BUTTON_ROW}.${CLASS.COLOR}-${BUTTON_COLOR.WHITE} .menu-button {
         background: #fff;
         border: 1px solid #555;

package/src/zoid/buttons/component.jsx

@@ -244,6 +244,7 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
     },
 
     eligible: ({ props }) => {
+      const buttonExperiments = props.experiment ?? getButtonExperiments();
       const {
         fundingSource,
         onShippingChange,
@@ -256,15 +257,15 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         supportsPopups = userAgentSupportsPopups(),
         supportedNativeBrowser = isSupportedNativeBrowser(),
         supportsVenmoPopups = supportsVenmoPopupsUtil(
-          props.experiment,
+          buttonExperiments,
           userAgentSupportsPopups(),
           getUserAgent()
         ),
         supportedNativeVenmoBrowser = isSupportedNativeVenmoBrowser(
-          props.experiment,
+          buttonExperiments,
           getUserAgent()
         ),
-        experiment = getButtonExperiments(),
+        experiment = buttonExperiments,
         createBillingAgreement,
         createSubscription,
         createVaultSetupToken,

package/src/zoid/buttons/prerender.jsx

@@ -66,6 +66,8 @@ export function PrerenderedButtons({
         [FPTI_KEY.CONTEXT_ID]: props.buttonSessionID,
         [FPTI_KEY.TRANSITION]: "process_button_prerender_click",
         [FPTI_KEY.CHOSEN_FUNDING]: fundingSource,
+        [FPTI_KEY.BUTTON_COLOR]: props.buttonColor?.color,
+        [FPTI_KEY.BRAND_VERSION]: props.buttonColor?.brandVersion,
       });
 
     if (eagerOrderCreation) {