Fix WooPay button preview in plugin settings. (#9649)

Co-authored-by: Ricardo Metring <[email protected]>
Automattic · Oct 31, 2024 · e672cc7 · e672cc7
1 parent ccff836
commit e672cc7
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/changelog/fix-9537-woopay-button-size-preview b/changelog/fix-9537-woopay-button-size-preview
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix WooPay button preview in plugin settings.
diff --git a/client/checkout/woopay/express-button/woopay-express-checkout-button.js b/client/checkout/woopay/express-button/woopay-express-checkout-button.js
@@ -68,10 +68,11 @@ export const WoopayExpressCheckoutButton = ( {
 	// If we are on the checkout block, we receive button attributes which overwrite the extension specific settings
 	if ( typeof buttonAttributes !== 'undefined' ) {
 		buttonHeight = buttonAttributes.height || buttonHeight;
-		borderRadius = buttonAttributes.borderRadius || borderRadius;
+		borderRadius = buttonAttributes.borderRadius ?? borderRadius;
 	}
 
-	const buttonSize = buttonSizeMap.get( buttonHeight );
+	const buttonSize =
+		buttonSizeMap.get( buttonHeight?.toString() ) || 'medium';
 
 	const buttonText =
 		ButtonTypeTextMap[ buttonType || 'default' ] ??

diff --git a/client/settings/express-checkout-settings/payment-request-button-preview.js b/client/settings/express-checkout-settings/payment-request-button-preview.js
@@ -43,7 +43,10 @@ const WooPayButtonPreview = ( { size, buttonType, theme, radius } ) => (
 				buttonSizeToPxMap[ size ] || buttonSizeToPxMap.medium
 			}px`,
 			size,
-			radius,
+		} }
+		buttonAttributes={ {
+			height: buttonSizeToPxMap[ size ] || buttonSizeToPxMap.medium,
+			borderRadius: radius,
 		} }
 	/>
 );