@paypal/checkout-components 5.0.412 → 5.0.414

package/src/ui/buttons/config.js

@@ -27,6 +27,22 @@ 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.05 / 0.5 = 0.10 (10%)
+const LOGO_VISUAL_OFFSET = 0.05;
+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,
@@ -53,8 +69,8 @@ type ButtonRedesignStyleMap = {
     maxHeight: number,
     minWidth: number,
     maxWidth: number,
-    gap?: number,
-    fontSize?: number,
+    gap: number,
+    fontSize: number,
   |},
 };
 
@@ -169,7 +185,7 @@ export const BUTTON_REDESIGN_STYLE: ButtonRedesignStyleMap = {
     minWidth: 50,
     maxWidth: 75,
     gap: 3,
-    fontSize: 12,
+    fontSize: 10,
   },
 
   [BUTTON_REDESIGN_SIZE.TINY]: {
@@ -179,7 +195,7 @@ export const BUTTON_REDESIGN_STYLE: ButtonRedesignStyleMap = {
     minWidth: 75,
     maxWidth: 200,
     gap: 3,
-    fontSize: 12,
+    fontSize: 10,
   },
 
   [BUTTON_REDESIGN_SIZE.SMALL]: {
@@ -188,8 +204,8 @@ export const BUTTON_REDESIGN_STYLE: ButtonRedesignStyleMap = {
     maxHeight: 35,
     minWidth: 200,
     maxWidth: 250,
-    gap: 3,
-    fontSize: 14,
+    gap: 4,
+    fontSize: 12,
   },
 
   [BUTTON_REDESIGN_SIZE.MEDIUM_SMALL]: {
@@ -199,7 +215,7 @@ export const BUTTON_REDESIGN_STYLE: ButtonRedesignStyleMap = {
     minWidth: 250,
     maxWidth: 300,
     gap: 4,
-    fontSize: 16,
+    fontSize: 14,
   },
 
   [BUTTON_REDESIGN_SIZE.MEDIUM_BIG]: {
@@ -208,8 +224,8 @@ export const BUTTON_REDESIGN_STYLE: ButtonRedesignStyleMap = {
     maxHeight: 45,
     minWidth: 300,
     maxWidth: 350,
-    gap: 4,
-    fontSize: 16,
+    gap: 5,
+    fontSize: 14,
   },
 
   [BUTTON_REDESIGN_SIZE.LARGE_SMALL]: {
@@ -219,17 +235,17 @@ export const BUTTON_REDESIGN_STYLE: ButtonRedesignStyleMap = {
     minWidth: 350,
     maxWidth: 425,
     gap: 5,
-    fontSize: 18,
+    fontSize: 16,
   },
 
   [BUTTON_REDESIGN_SIZE.LARGE_BIG]: {
-    defaultHeight: 45,
+    defaultHeight: 50,
     minHeight: 50,
     maxHeight: 55,
     minWidth: 425,
     maxWidth: 500,
     gap: 5,
-    fontSize: 20,
+    fontSize: 18,
   },
 
   [BUTTON_REDESIGN_SIZE.XL_SMALL]: {
@@ -237,28 +253,36 @@ export const BUTTON_REDESIGN_STYLE: ButtonRedesignStyleMap = {
     minHeight: 55,
     maxHeight: 60,
     minWidth: 500,
-    maxWidth: 550,
+    maxWidth: 750,
     gap: 6,
-    fontSize: 22,
+    fontSize: 18,
   },
+};
 
-  [BUTTON_REDESIGN_SIZE.XL_BIG]: {
-    defaultHeight: 55,
+export const BUTTON_REDESIGN_DISABLEMAXHEIGHT_STYLE = {
+  ...BUTTON_REDESIGN_STYLE,
+  XL_BIG: {
     minHeight: 60,
     maxHeight: 65,
-    minWidth: 550,
-    maxWidth: 650,
-    gap: 7,
-    fontSize: 24,
+    gap: 6,
+    fontSize: 20,
   },
-
-  [BUTTON_REDESIGN_SIZE.XXL]: {
-    defaultHeight: 55,
+  XXL_SMALL: {
     minHeight: 65,
-    maxHeight: 100,
-    minWidth: 650,
-    maxWidth: 750,
+    maxHeight: 70,
+    gap: 7,
+    fontSize: 22,
+  },
+  XXL_BIG: {
+    minHeight: 70,
+    maxHeight: 75,
     gap: 7,
+    fontSize: 24,
+  },
+  XXXL: {
+    minHeight: 75,
+    maxHeight: 200,
+    gap: 8,
     fontSize: 26,
   },
 };

package/src/ui/buttons/poweredBy.jsx

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

package/src/ui/buttons/props.js

@@ -473,6 +473,7 @@ export type RenderButtonProps = {|
   buttonSessionID: string,
   nonce: string,
   enableFunding?: $ReadOnlyArray<?$Values<typeof FUNDING>>,
+  disableFunding?: $ReadOnlyArray<?$Values<typeof FUNDING>>,
   components: $ReadOnlyArray<$Values<typeof COMPONENTS>>,
   onShippingChange: ?OnShippingChange,
   onShippingAddressChange: ?OnShippingAddressChange,
@@ -675,6 +676,7 @@ export type ButtonPropsInputs = {
   shopperSessionId?: string,
   nonce: string,
   enableFunding?: $ReadOnlyArray<?$Values<typeof FUNDING>>,
+  disableFunding?: $ReadOnlyArray<?$Values<typeof FUNDING>>,
   components: $ReadOnlyArray<$Values<typeof COMPONENTS>>,
   onShippingChange: ?Function,
   onShippingAddressChange: ?Function,
@@ -813,27 +815,6 @@ 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,
@@ -918,13 +899,10 @@ 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.REBRAND_BLUE,
+    [BUTTON_COLOR.DEFAULT]: BUTTON_COLOR.DEFAULT,
 
     // normalizeButtonStyle gets called multiple times and
     // it can be called after color is already be mapped to rebranded style
@@ -964,9 +942,6 @@ export function getButtonColorExperience({
 }: GetButtonColorExperienceArgs): "abTest" | "fullRebrand" | "legacy" {
   const { isPaypalRebrandEnabled, isPaypalRebrandABTestEnabled } =
     experiment || {};
-  const rejectRedesign = hasInvalidScriptOptionsForFullRedesign({
-    fundingSource,
-  });
 
   if (!isPaypalRebrandEnabled) {
     return "legacy";
@@ -977,7 +952,7 @@ export function getButtonColorExperience({
     return fundingSource === FUNDING.PAYPAL ? "abTest" : "legacy";
   }
 
-  return rejectRedesign ? "legacy" : "fullRebrand";
+  return "fullRebrand";
 }
 
 export function getButtonColor({
@@ -1372,6 +1347,7 @@ export function normalizeButtonProps(
     sessionID = uniqueID(),
     buttonSessionID = uniqueID(),
     enableFunding,
+    disableFunding,
     components = [COMPONENTS.BUTTONS],
     nonce,
     onShippingChange,
@@ -1441,6 +1417,7 @@ export function normalizeButtonProps(
         fundingSource,
         fundingEligibility,
         enableFunding,
+        disableFunding,
         experiment,
         components,
         onShippingChange,
@@ -1485,6 +1462,7 @@ export function normalizeButtonProps(
     sessionID,
     nonce,
     enableFunding,
+    disableFunding,
     components,
     onShippingChange,
     onShippingAddressChange,

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

@@ -11,7 +11,6 @@ import {
   getColorForABTest,
   getDefaultColorForFundingSource,
   throwErrorForInvalidButtonColor,
-  hasInvalidScriptOptionsForFullRedesign,
   determineRandomButtonColor,
   getColorABTestFromStorage,
 } from "./props";
@@ -128,47 +127,6 @@ 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/script.jsx

@@ -199,58 +199,13 @@ export function getComponentScript(): () => void {
       }
     }
 
-    function toggleLogos() {
-      const LOGO_CLASS = {
-        PAYPAL_LOGO: ".paypal-logo-paypal-rebrand",
-        PP_LOGO: ".paypal-logo-pp-rebrand",
-        PAYPAL_BUTTON: ".paypal-button-rebrand",
-        BUTTON_LABEL: ".paypal-button-label-container",
-      };
-
-      const paylaterButtons = getElements(LOGO_CLASS.PAYPAL_BUTTON);
-
-      for (const button of paylaterButtons) {
-        const paypalLogo = button.querySelector(LOGO_CLASS.PAYPAL_LOGO);
-        const ppLogo = button.querySelector(LOGO_CLASS.PP_LOGO);
-        const buttonLabel = button.querySelector(LOGO_CLASS.BUTTON_LABEL);
-
-        if (!buttonLabel || !paypalLogo || !ppLogo) {
-          continue;
-        }
-
-        const buttonWidth = buttonLabel.offsetWidth;
-        const gap = calculateGap(buttonLabel);
-
-        // temporarily hide PayPal logos
-        hideElement(paypalLogo);
-        hideElement(ppLogo);
-
-        const allElements = getAllChildren(buttonLabel);
-        const textElements = allElements.filter(
-          (el) => !el.classList.contains("paypal-logo-pp-rebrand")
-        );
-
-        const totalWidth = getElementsTotalWidth(textElements) + gap;
-
-        if (totalWidth > buttonWidth) {
-          hideElement(paypalLogo);
-          showElement(ppLogo);
-        } else {
-          showElement(paypalLogo);
-          hideElement(ppLogo);
-        }
-      }
-    }
-
     const setDomReady = once(
       debounce(() => {
         window.addEventListener("resize", () => {
           toggleOptionals();
-          toggleLogos();
         });
         setTimeout(() => {
           toggleOptionals();
-          toggleLogos();
         });
         if (document.body) {
           document.body.classList.add(CLASS.DOM_READY);
@@ -260,12 +215,10 @@ export function getComponentScript(): () => void {
 
     const load = () => {
       toggleOptionals();
-      toggleLogos();
       setDomReady();
     };
 
     toggleOptionals();
-    toggleLogos();
     document.addEventListener("DOMContentLoaded", load);
     window.addEventListener("load", load);
     window.addEventListener("resize", load);

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

@@ -4,6 +4,10 @@ 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;
 
@@ -104,8 +108,8 @@ export const buttonStyle = `
 
     .${CLASS.BUTTON} .${CLASS.SPINNER} {
         position: absolute;
-        height: 40px;
-        width: 40px;
+        height: 50%;
+        aspect-ratio: 1;
         top: 50%;
         left: 50%;
         transform: translateX(-50%) translateY(-50%);
@@ -171,7 +175,7 @@ export const buttonRebrandStyle = `
         align-items: center;
         justify-content: center;
         flex-wrap: nowrap;
-        height: 76%;
+        height: ${REBRAND_LABEL_HEIGHT_RATIO * 100}%;
         min-width: 0px;
         position: relative;
     }
@@ -200,12 +204,25 @@ export const buttonRebrandStyle = `
         height: 100%;
     }
 
-    .${CLASS.BUTTON_REBRAND} .${CLASS.TAGLINE} {
+    .${CLASS.BUTTON_REBRAND} .${CLASS.BUTTON_LABEL} > .${CLASS.LOGO_REBRAND} {
+        transform: translateY(${REBRAND_LOGO_TRANSLATE_Y}%);
+    }
+
+    .${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;
         font-weight: 400;
         display: block;
         text-align: center;
         width: auto;
+        margin-top: 8px;
     }
 `;

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

@@ -54,6 +54,10 @@ export const buttonColorStyle = `
             background: #54B4E0;
             overflow: inherit;
         }
+
+        .${CLASS.BUTTON_REBRAND}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.VENMO}].${CLASS.COLOR}-${BUTTON_COLOR.REBRAND_BLUE}:hover {
+            background: #0073E0;
+        }
     }
     
     @media (hover:hover) {
@@ -61,6 +65,10 @@ export const buttonColorStyle = `
             background: #3DB5FF;
             overflow: inherit;
         }
+
+        .${CLASS.BUTTON_REBRAND}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.VENMO}].${CLASS.COLOR}-${BUTTON_COLOR.REBRAND_BLUE}:active {
+            background: #0074FF;
+        }
     }
 
     .${CLASS.BUTTON}.${CLASS.COLOR}-${BUTTON_COLOR.REBRAND_DARKBLUE},
@@ -151,7 +159,7 @@ export const buttonColorStyle = `
     .${CLASS.BUTTON_REBRAND}:focus {
         outline: none;
     }
-    
+
     .${CLASS.BUTTON_REBRAND}:focus::after {
         content: '';
         position: absolute;
@@ -160,7 +168,7 @@ export const buttonColorStyle = `
         bottom: 3px;
         left: 3px;
         border: 0.125rem solid #FFFFFF;
-        border-radius: inherit;
+        border-radius: max(0px, calc(var(--btn-radius, 4px) - 3px));
         box-shadow: 0 0 0 0.2rem #0066F5;
         pointer-events: none;
     }
@@ -249,6 +257,14 @@ 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,
@@ -267,52 +283,62 @@ 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.WECHATPAY}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:hover,
+    .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.ITAU}].${CLASS.COLOR}-${BUTTON_COLOR.DEFAULT}:hover {
         filter: brightness(1.2);
         overflow: inherit;
     }
 
-    /* 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 {
+    .${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 {
         outline: none;
     }
 
-    /* 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 {
+    /* 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 {
         content: '';
         position: absolute;
         top: 5px;