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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.412-alpha-84b7728.0",
+  "version": "5.0.412",
   "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/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/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/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({

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

@@ -11,6 +11,7 @@ import {
   getColorForABTest,
   getDefaultColorForFundingSource,
   throwErrorForInvalidButtonColor,
+  hasInvalidScriptOptionsForFullRedesign,
   determineRandomButtonColor,
   getColorABTestFromStorage,
 } from "./props";
@@ -127,6 +128,47 @@ describe("determineRandomButtonColor", () => {
   });
 });
 
+describe("hasInvalidScriptOptionsForFullRedesign", () => {
+  const validFundingSources = [
+    FUNDING.PAYPAL,
+    FUNDING.PAYLATER,
+    FUNDING.CREDIT,
+    FUNDING.CARD,
+    FUNDING.VENMO,
+  ];
+  const invalidFundingSources = [FUNDING.APPLEPAY, FUNDING.IDEAL];
+
+  // Test valid funding sources
+  validFundingSources.forEach((fundingSource) => {
+    it(`should return false for fundingSource: ${fundingSource}`, () => {
+      const result = hasInvalidScriptOptionsForFullRedesign({
+        fundingSource,
+      });
+
+      expect(result).toBe(false);
+    });
+  });
+
+  // Test invalid funding sources
+  invalidFundingSources.forEach((fundingSource) => {
+    it(`should return true for fundingSource: ${fundingSource}`, () => {
+      const result = hasInvalidScriptOptionsForFullRedesign({
+        fundingSource,
+      });
+
+      expect(result).toBe(true);
+    });
+  });
+
+  it("should return true when funding source is null", () => {
+    const result = hasInvalidScriptOptionsForFullRedesign({
+      fundingSource: null,
+    });
+
+    expect(result).toBe(true);
+  });
+});
+
 describe("throwErrorForInvalidButtonColor", () => {
   it("should throw error with appropriate message for invalid color", () => {
     expect(() => {

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

@@ -4,10 +4,6 @@ import { ENV } from "@paypal/sdk-constants/src";
 import { LOGO_CLASS } from "@paypal/sdk-logos/src";
 
 import { CLASS } from "../../../constants";
-import {
-  REBRAND_LABEL_HEIGHT_RATIO,
-  REBRAND_LOGO_TRANSLATE_Y,
-} from "../config";
 
 const MIN_VAULT_BUTTON_WIDTH = 250;
 
@@ -108,8 +104,8 @@ export const buttonStyle = `
 
     .${CLASS.BUTTON} .${CLASS.SPINNER} {
         position: absolute;
-        height: 50%;
-        aspect-ratio: 1;
+        height: 40px;
+        width: 40px;
         top: 50%;
         left: 50%;
         transform: translateX(-50%) translateY(-50%);
@@ -175,7 +171,7 @@ export const buttonRebrandStyle = `
         align-items: center;
         justify-content: center;
         flex-wrap: nowrap;
-        height: ${REBRAND_LABEL_HEIGHT_RATIO * 100}%;
+        height: 76%;
         min-width: 0px;
         position: relative;
     }
@@ -204,19 +200,6 @@ export const buttonRebrandStyle = `
         height: 100%;
     }
 
-    .${CLASS.BUTTON_REBRAND} .${CLASS.BUTTON_LABEL} > .${CLASS.LOGO_REBRAND} {
-        // transform: translateY(${REBRAND_LOGO_TRANSLATE_Y}%);
-        transform: translateY(10%); //update me!!
-    }
-
-    .${CLASS.BUTTON_REBRAND}[data-funding-source=wechatpay] .${CLASS.TEXT},
-    .${CLASS.BUTTON_REBRAND}[data-funding-source=satispay] .${CLASS.TEXT},
-    .${CLASS.BUTTON_REBRAND}[data-funding-source=giropay] .${CLASS.TEXT},
-    .${CLASS.BUTTON_REBRAND}[data-funding-source=paidy] .${CLASS.TEXT},
-    .${CLASS.BUTTON_REBRAND}[data-funding-source=trustly] .${CLASS.TEXT} {
-        transform: translateY(-1px);
-    }
-
     .${CLASS.BUTTON_REBRAND} .${CLASS.TAGLINE} {
         max-width: 100%;
         font-size: initial;
@@ -224,6 +207,5 @@ export const buttonRebrandStyle = `
         display: block;
         text-align: center;
         width: auto;
-        margin-top: 8px;
     }
 `;

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

@@ -151,7 +151,7 @@ export const buttonColorStyle = `
     .${CLASS.BUTTON_REBRAND}:focus {
         outline: none;
     }
-
+    
     .${CLASS.BUTTON_REBRAND}:focus::after {
         content: '';
         position: absolute;
@@ -160,7 +160,7 @@ export const buttonColorStyle = `
         bottom: 3px;
         left: 3px;
         border: 0.125rem solid #FFFFFF;
-        border-radius: max(0px, calc(var(--btn-radius, 4px) - 3px));
+        border-radius: inherit;
         box-shadow: 0 0 0 0.2rem #0066F5;
         pointer-events: none;
     }
@@ -249,14 +249,6 @@ export const buttonColorStyle = `
         background: #E62601;
     }
 
-    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.ITAU}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT} {
-        background: #003087;
-    }
-
-    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.SEPA}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT} {
-        background: #eee;
-    }
-
     /* APM button hover actions */
     .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BANCONTACT}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:hover,
     .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BLIK}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:hover,
@@ -275,62 +267,52 @@ export const buttonColorStyle = `
     .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.PAYU}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:hover,
     .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.SATISPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:hover,
     .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.PAIDY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:hover,
-    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.WECHATPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:hover,
-    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.ITAU}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:hover {
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.WECHATPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:hover {
         filter: brightness(1.2);
         overflow: inherit;
     }
 
-    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.SEPA}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:hover {
-        filter: brightness(0.95);
-        overflow: inherit;
-    }
-
-    /* APM button on focus actions (legacy only) */
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BLIK}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BANCONTACT}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BOLETO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BOLETOBANCARIO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.EPS}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.GIROPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.IDEAL}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MERCADOPAGO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MULTIBANCO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MYBANK}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.OXXO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.P24}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.SOFORT}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.TRUSTLY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.PAYU}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.SATISPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.PAIDY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.WECHATPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.ITAU}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.SEPA}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus {
+    /* APM button on focus actions */
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BLIK}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BANCONTACT}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BOLETO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BOLETOBANCARIO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.EPS}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.GIROPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.IDEAL}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MERCADOPAGO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MULTIBANCO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MYBANK}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.OXXO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.P24}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.SOFORT}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.TRUSTLY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.PAYU}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.SATISPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.PAIDY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.WECHATPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus {
         outline: none;
     }
 
-    /* APM button after focus actions (legacy only) */
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BLIK}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BANCONTACT}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BOLETO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BOLETOBANCARIO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.EPS}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.GIROPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.IDEAL}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MERCADOPAGO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MULTIBANCO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MYBANK}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.OXXO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.P24}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.SOFORT}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.TRUSTLY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.PAYU}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.SATISPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.PAIDY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.WECHATPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.ITAU}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
-    .${CLASS.BUTTON}:not(.${CLASS.BUTTON_REBRAND})[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.SEPA}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after {
+    /* APM button after focus actions */
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BLIK}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BANCONTACT}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BOLETO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.BOLETOBANCARIO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.EPS}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.GIROPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.IDEAL}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MERCADOPAGO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MULTIBANCO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MYBANK}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.OXXO}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.P24}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.SOFORT}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.TRUSTLY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.PAYU}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.SATISPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.PAIDY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.WECHATPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:focus::after {
         content: '';
         position: absolute;
         top: 5px;