Fix broken Express Checkout buttons when size is set to "Large" (#9327)

Automattic · Aug 24, 2024 · 0bb0680 · 0bb0680
1 parent f9fc6a1
commit 0bb0680
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/changelog/as-fix-max-height-allowed b/changelog/as-fix-max-height-allowed
@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Ensure 55px is the maximum height for Apple Pay button.
diff --git a/client/express-checkout/blocks/components/express-checkout-component.js b/client/express-checkout/blocks/components/express-checkout-component.js
@@ -40,7 +40,11 @@ const adjustButtonHeights = ( buttonOptions, expressPaymentMethod ) => {
 	// Apple Pay has a nearly imperceptible height difference. We increase it by 1px here.
 	if ( buttonOptions.buttonTheme.applePay === 'black' ) {
 		if ( expressPaymentMethod === 'applePay' ) {
-			buttonOptions.buttonHeight = buttonOptions.buttonHeight + 0.4;
+			// The maximum allowed size is 55px.
+			buttonOptions.buttonHeight = Math.min(
+				buttonOptions.buttonHeight + 0.4,
+				55
+			);
 		}
 	}
 

diff --git a/client/express-checkout/blocks/components/express-checkout-container.js b/client/express-checkout/blocks/components/express-checkout-container.js
@@ -27,9 +27,11 @@ const ExpressCheckoutContainer = ( props ) => {
 	};
 
 	return (
-		<Elements stripe={ stripePromise } options={ options }>
-			<ExpressCheckoutComponent { ...props } />
-		</Elements>
+		<div style={ { minHeight: '40px' } }>
+			<Elements stripe={ stripePromise } options={ options }>
+				<ExpressCheckoutComponent { ...props } />
+			</Elements>
+		</div>
 	);
 };