@paypal/checkout-components 5.0.412-alpha-84b7728.0 → 5.0.413

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.412-alpha-84b7728.0",
+  "version": "5.0.413",
   "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.5"
+    "@paypal/sdk-logos": "^2.3.2"
   },
   "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,8 +256,6 @@ 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: {
@@ -265,8 +263,6 @@ 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: {
@@ -274,8 +270,6 @@ 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/itau/config.jsx

@@ -24,32 +24,22 @@ export function getItauConfig(): FundingSourceConfig {
       return ItauLogoInlineSVG({ logoColor, optional });
     },
 
-    colors: [
-      BUTTON_COLOR.DEFAULT,
-      BUTTON_COLOR.DARKBLUE,
-      BUTTON_COLOR.BLUE,
-      BUTTON_COLOR.BLACK,
-      BUTTON_COLOR.REBRAND_BLACK,
-      BUTTON_COLOR.REBRAND_WHITE,
-    ],
+    colors: [BUTTON_COLOR.DARKBLUE, BUTTON_COLOR.BLUE, BUTTON_COLOR.BLACK],
 
     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]: BUTTON_COLOR.DEFAULT,
-      [BUTTON_COLOR.GOLD]: BUTTON_COLOR.DEFAULT,
+      [DEFAULT]: BUTTON_COLOR.DARKBLUE,
+      [BUTTON_COLOR.GOLD]: BUTTON_COLOR.DARKBLUE,
       [BUTTON_COLOR.BLUE]: BUTTON_COLOR.BLUE,
-      [BUTTON_COLOR.SILVER]: BUTTON_COLOR.DEFAULT,
-      [BUTTON_COLOR.WHITE]: BUTTON_COLOR.DEFAULT,
+      [BUTTON_COLOR.SILVER]: BUTTON_COLOR.DARKBLUE,
+      [BUTTON_COLOR.WHITE]: BUTTON_COLOR.DARKBLUE,
     },
   };
 }

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,10 +4,9 @@
 import {
   SepaLogoInlineSVG,
   SepaLogoExternalImage,
-  LOGO_COLOR,
 } from "@paypal/sdk-logos/src";
 
-import { BUTTON_COLOR, BUTTON_LAYOUT, TEXT_COLOR } from "../../constants";
+import { BUTTON_LAYOUT } from "../../constants";
 import { DEFAULT_FUNDING_CONFIG, type FundingSourceConfig } from "../common";
 
 export function getSepaConfig(): FundingSourceConfig {
@@ -16,33 +15,6 @@ 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/lib/appSwitchResume.js

@@ -44,7 +44,10 @@ function parseHashFragment(): {| hash: string, queryString: string |} {
     ) {
       return {
         hash: possibleAction,
-        queryString: hashString.slice(ampersandIndex + 1),
+        // Normalize embedded ? → & so parseQuery can extract all params.
+        // XOOS bug appends ?token=... inside a fragment, producing
+        // "merchantHash?token=EC-123" instead of "merchantHash&token=EC-123".
+        queryString: hashString.slice(ampersandIndex + 1).replace("?", "&"),
       };
     }
   }

package/src/lib/appSwithResume.test.js

@@ -424,6 +424,25 @@ describe("app switch resume flow", () => {
       expect(isAppSwitchResumeFlow()).toEqual(true);
     });
 
+    test("#onCancel&hash?token=... - XOOS malformed URL with token after merchant hash", () => {
+      // DTXOOS-3741: XOOS appends ?token=... after the merchant's hash fragment,
+      // producing hash?token=EC-123. The embedded ? must be normalized to & so that
+      // parseQuery can extract the token correctly.
+      vi.spyOn(window, "location", "get").mockReturnValue({
+        hash: `#onCancel&hash?token=${orderID}&button_session_id=${buttonSessionID}`,
+        search: "",
+      });
+
+      const params = getAppSwitchResumeParams();
+
+      expect(params).toEqual({
+        buttonSessionID,
+        checkoutState: "onCancel",
+        orderID,
+      });
+      expect(isAppSwitchResumeFlow()).toEqual(true);
+    });
+
     test("#onApprove?token=...&hash?param=value - native app return with ? delimiter and merchant hash containing ?", () => {
       // Native app uses ? delimiter, and merchant hash also contains ?.
       // The first ? splits action from params; the second ? is just part of param values.

package/src/marks/component.jsx

@@ -29,7 +29,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 +52,7 @@ type MarksInstance = {|
 
 type MarksProps = {|
   fundingSource?: ?$Values<typeof FUNDING>,
+  markVariation?: ?$Values<typeof MARK_VARIATIONS>,
   onShippingChange?: OnShippingChange,
   onShippingAddressChange?: OnShippingAddressChange,
   onShippingOptionsChange?: OnShippingOptionsChange,
@@ -64,6 +65,7 @@ export type MarksComponent = (MarksProps) => MarksInstance;
 export const getMarksComponent: () => MarksComponent = memoize(() => {
   function Marks({
     fundingSource,
+    markVariation,
     onShippingChange,
     onShippingAddressChange,
     onShippingOptionsChange,
@@ -163,6 +165,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/config.js

@@ -27,22 +27,6 @@ export const BUTTON_RELATIVE_STYLE = {
   VERTICAL_MARGIN: 30,
 };
 
-// Rebrand label container height as a ratio of button height (0.5 = 50%).
-// The PayPal logo's translateY is derived from this value to keep the logo
-// visually centered. If this ratio changes, the translateY percentage must
-// be recalculated: translateY = LOGO_VISUAL_OFFSET / LABEL_HEIGHT_RATIO.
-// Additionally, the Venmo and Card glyph viewBox/height in @paypal/sdk-logos
-// must be updated to match the new label container height.
-export const REBRAND_LABEL_HEIGHT_RATIO = 0.5;
-
-// Fixed visual offset of the PayPal logo as a fraction of total button height.
-// translateY percentage = LOGO_VISUAL_OFFSET / LABEL_HEIGHT_RATIO
-// Current: 0.06 / 0.5 = 0.12 (12%)
-const LOGO_VISUAL_OFFSET = 0.06;
-export const REBRAND_LOGO_TRANSLATE_Y: number = Math.round(
-  (LOGO_VISUAL_OFFSET / REBRAND_LABEL_HEIGHT_RATIO) * 100
-);
-
 type ButtonStyleMap = {
   [$Values<typeof BUTTON_SIZE>]: {|
     defaultWidth: number,
@@ -69,8 +53,8 @@ type ButtonRedesignStyleMap = {
     maxHeight: number,
     minWidth: number,
     maxWidth: number,
-    gap: number,
-    fontSize: number,
+    gap?: number,
+    fontSize?: number,
   |},
 };
 
@@ -185,7 +169,7 @@ export const BUTTON_REDESIGN_STYLE: ButtonRedesignStyleMap = {
     minWidth: 50,
     maxWidth: 75,
     gap: 3,
-    fontSize: 10,
+    fontSize: 12,
   },
 
   [BUTTON_REDESIGN_SIZE.TINY]: {
@@ -195,7 +179,7 @@ export const BUTTON_REDESIGN_STYLE: ButtonRedesignStyleMap = {
     minWidth: 75,
     maxWidth: 200,
     gap: 3,
-    fontSize: 10,
+    fontSize: 12,
   },
 
   [BUTTON_REDESIGN_SIZE.SMALL]: {
@@ -204,8 +188,8 @@ export const BUTTON_REDESIGN_STYLE: ButtonRedesignStyleMap = {
     maxHeight: 35,
     minWidth: 200,
     maxWidth: 250,
-    gap: 4,
-    fontSize: 12,
+    gap: 3,
+    fontSize: 14,
   },
 
   [BUTTON_REDESIGN_SIZE.MEDIUM_SMALL]: {
@@ -215,7 +199,7 @@ export const BUTTON_REDESIGN_STYLE: ButtonRedesignStyleMap = {
     minWidth: 250,
     maxWidth: 300,
     gap: 4,
-    fontSize: 14,
+    fontSize: 16,
   },
 
   [BUTTON_REDESIGN_SIZE.MEDIUM_BIG]: {
@@ -224,8 +208,8 @@ export const BUTTON_REDESIGN_STYLE: ButtonRedesignStyleMap = {
     maxHeight: 45,
     minWidth: 300,
     maxWidth: 350,
-    gap: 5,
-    fontSize: 14,
+    gap: 4,
+    fontSize: 16,
   },
 
   [BUTTON_REDESIGN_SIZE.LARGE_SMALL]: {
@@ -235,17 +219,17 @@ export const BUTTON_REDESIGN_STYLE: ButtonRedesignStyleMap = {
     minWidth: 350,
     maxWidth: 425,
     gap: 5,
-    fontSize: 16,
+    fontSize: 18,
   },
 
   [BUTTON_REDESIGN_SIZE.LARGE_BIG]: {
-    defaultHeight: 50,
+    defaultHeight: 45,
     minHeight: 50,
     maxHeight: 55,
     minWidth: 425,
     maxWidth: 500,
     gap: 5,
-    fontSize: 18,
+    fontSize: 20,
   },
 
   [BUTTON_REDESIGN_SIZE.XL_SMALL]: {
@@ -253,36 +237,28 @@ export const BUTTON_REDESIGN_STYLE: ButtonRedesignStyleMap = {
     minHeight: 55,
     maxHeight: 60,
     minWidth: 500,
-    maxWidth: 750,
+    maxWidth: 550,
     gap: 6,
-    fontSize: 18,
+    fontSize: 22,
   },
-};
 
-export const BUTTON_REDESIGN_DISABLEMAXHEIGHT_STYLE = {
-  ...BUTTON_REDESIGN_STYLE,
-  XL_BIG: {
+  [BUTTON_REDESIGN_SIZE.XL_BIG]: {
+    defaultHeight: 55,
     minHeight: 60,
     maxHeight: 65,
-    gap: 6,
-    fontSize: 20,
-  },
-  XXL_SMALL: {
-    minHeight: 65,
-    maxHeight: 70,
-    gap: 7,
-    fontSize: 22,
-  },
-  XXL_BIG: {
-    minHeight: 70,
-    maxHeight: 75,
+    minWidth: 550,
+    maxWidth: 650,
     gap: 7,
     fontSize: 24,
   },
-  XXXL: {
-    minHeight: 75,
-    maxHeight: 200,
-    gap: 8,
+
+  [BUTTON_REDESIGN_SIZE.XXL]: {
+    defaultHeight: 55,
+    minHeight: 65,
+    maxHeight: 100,
+    minWidth: 650,
+    maxWidth: 750,
+    gap: 7,
     fontSize: 26,
   },
 };

package/src/ui/buttons/poweredBy.jsx

@@ -9,7 +9,6 @@ import { CLASS, BUTTON_COLOR_REBRAND } from "../../constants";
 import { Text } from "../text";
 
 import { buttonContent } from "./content";
-import { REBRAND_LOGO_TRANSLATE_Y } from "./config";
 
 const POWERED_BY_PAYPAL_STYLE = `
     .${CLASS.POWERED_BY} {
@@ -82,7 +81,7 @@ export function PoweredByPayPal({
     .${CLASS.POWERED_BY} {
         text-align: center;
         margin: 10px auto;
-        height: 12px;
+        height: 18px;
         font-family: PayPal Plain, system-ui, -apple-system, Roboto, "Segoe UI", Helvetica-Neue, Helvetica, Arial, sans-serif;
         font-size: 10px;
         font-weight: 400;
@@ -97,13 +96,9 @@ export function PoweredByPayPal({
     .${CLASS.POWERED_BY} > .${LOGO_CLASS.LOGO} {
         display: inline-block;
         vertical-align: middle;
-        height: 12px;
-        line-height: 12px;
+        height: 18px;
+        line-height: 18px;
         font-size: 10px;
-    } 
-
-    .${CLASS.POWERED_BY} > .${LOGO_CLASS.LOGO} {
-        transform: translateY(${REBRAND_LOGO_TRANSLATE_Y}%);
     }
   `;
 

package/src/ui/buttons/props.js

@@ -813,6 +813,27 @@ export function determineRandomButtonColor({
   };
 }
 
+export function hasInvalidScriptOptionsForFullRedesign({
+  fundingSource,
+}: {|
+  fundingSource?: ?$Values<typeof FUNDING>,
+|}): boolean {
+  const validFundingSourcesForRedesign = [
+    undefined,
+    FUNDING.PAYPAL,
+    FUNDING.VENMO,
+    FUNDING.PAYLATER,
+    FUNDING.CREDIT,
+    FUNDING.CARD,
+  ];
+
+  if (validFundingSourcesForRedesign.includes(fundingSource)) {
+    return false;
+  }
+
+  return true;
+}
+
 export function throwErrorForInvalidButtonColor({
   fundingSource,
   fundingSourceColors,
@@ -897,10 +918,13 @@ export function getColorForFullRedesign({
     [BUTTON_COLOR.BLUE]: BUTTON_COLOR.REBRAND_BLUE,
     [BUTTON_COLOR.DARKBLUE]: BUTTON_COLOR.REBRAND_BLUE,
     [BUTTON_COLOR.GOLD]: BUTTON_COLOR.REBRAND_BLUE,
+
+    // not mapped yet since the styles are not setup
+    // These should never be hit since legacy experience should be set
     [BUTTON_COLOR.BLACK]: BUTTON_COLOR.REBRAND_BLACK,
     [BUTTON_COLOR.WHITE]: BUTTON_COLOR.REBRAND_WHITE,
     [BUTTON_COLOR.SILVER]: BUTTON_COLOR.REBRAND_WHITE,
-    [BUTTON_COLOR.DEFAULT]: BUTTON_COLOR.DEFAULT,
+    [BUTTON_COLOR.DEFAULT]: BUTTON_COLOR.REBRAND_BLUE,
 
     // normalizeButtonStyle gets called multiple times and
     // it can be called after color is already be mapped to rebranded style
@@ -940,6 +964,9 @@ export function getButtonColorExperience({
 }: GetButtonColorExperienceArgs): "abTest" | "fullRebrand" | "legacy" {
   const { isPaypalRebrandEnabled, isPaypalRebrandABTestEnabled } =
     experiment || {};
+  const rejectRedesign = hasInvalidScriptOptionsForFullRedesign({
+    fundingSource,
+  });
 
   if (!isPaypalRebrandEnabled) {
     return "legacy";
@@ -950,7 +977,7 @@ export function getButtonColorExperience({
     return fundingSource === FUNDING.PAYPAL ? "abTest" : "legacy";
   }
 
-  return "fullRebrand";
+  return rejectRedesign ? "legacy" : "fullRebrand";
 }
 
 export function getButtonColor({