Fix incompatible notice in editor due missing style properties (#3564)

* Fix incompatible notice in editor due mssing style properties

* Passing the style param only when rendering methods in the editor

* Changelog and readme entries

* Minor JS fix

Author: wjrosa

changelog.txt

@@ -1,6 +1,7 @@
 *** Changelog ***
 
 = 9.1.0 - xxxx-xx-xx =
+* Fix - Fixes the incompatibility notice in editor due missing style property when instantiating Stripe payment methods. 
 * Dev - Updates the GitHub caching action (`actions/cache`) to v4 due deprecation.
 * Fix - Don't update canceled order status to on-hold when a dispute is opened.
 * Fix - Correctly sets the dispute opened note when a dispute does not require any further action.

client/blocks/credit-card/index.js

@@ -39,6 +39,15 @@ const StripeLabel = ( props ) => {
 };
 
 const cardIcons = getStripeCreditCardIcons();
+const supports = {
+	// Use `false` as fallback values in case server provided configuration is missing.
+	showSavedCards: getBlocksConfiguration()?.showSavedCards ?? false,
+	showSaveOption: getBlocksConfiguration()?.showSaveOption ?? false,
+	features: getBlocksConfiguration()?.supports ?? [],
+};
+if ( getBlocksConfiguration().isAdmin ?? false ) {
+	supports.style = getBlocksConfiguration()?.style ?? [];
+}
 const stripeCcPaymentMethod = {
 	name: PAYMENT_METHOD_NAME,
 	label: <StripeLabel />,
@@ -53,12 +62,7 @@ const stripeCcPaymentMethod = {
 		'Stripe Credit Card payment method',
 		'woocommerce-gateway-stripe'
 	),
-	supports: {
-		// Use `false` as fallback values in case server provided configuration is missing.
-		showSavedCards: getBlocksConfiguration()?.showSavedCards ?? false,
-		showSaveOption: getBlocksConfiguration()?.showSaveOption ?? false,
-		features: getBlocksConfiguration()?.supports ?? [],
-	},
+	supports,
 };
 
 export default stripeCcPaymentMethod;

client/blocks/express-checkout/index.js

@@ -14,6 +14,13 @@ import { PAYMENT_METHOD_LINK } from 'wcstripe/stripe-utils/constants';
 
 const stripePromise = loadStripe();
 
+const supports = {
+	features: getBlocksConfiguration()?.supports ?? [],
+};
+if ( getBlocksConfiguration().isAdmin ?? false ) {
+	supports.style = getBlocksConfiguration()?.style ?? [];
+}
+
 const expressCheckoutElementsGooglePay = ( api ) => ( {
 	name: PAYMENT_METHOD_EXPRESS_CHECKOUT_ELEMENT + '_googlePay',
 	title: 'WooCommerce Stripe - Google Pay',
@@ -41,9 +48,7 @@ const expressCheckoutElementsGooglePay = ( api ) => ( {
 	},
 	paymentMethodId: PAYMENT_METHOD_EXPRESS_CHECKOUT_ELEMENT,
 	gatewayId: 'stripe',
-	supports: {
-		features: getBlocksConfiguration()?.supports ?? [],
-	},
+	supports,
 } );
 
 const expressCheckoutElementsApplePay = ( api ) => ( {
@@ -73,9 +78,7 @@ const expressCheckoutElementsApplePay = ( api ) => ( {
 	},
 	paymentMethodId: PAYMENT_METHOD_EXPRESS_CHECKOUT_ELEMENT,
 	gatewayId: 'stripe',
-	supports: {
-		features: getBlocksConfiguration()?.supports ?? [],
-	},
+	supports,
 } );
 
 const expressCheckoutElementsStripeLink = ( api ) => ( {
@@ -108,9 +111,7 @@ const expressCheckoutElementsStripeLink = ( api ) => ( {
 		} );
 	},
 	paymentMethodId: PAYMENT_METHOD_EXPRESS_CHECKOUT_ELEMENT,
-	supports: {
-		features: getBlocksConfiguration()?.supports ?? [],
-	},
+	supports,
 } );
 
 export {

client/blocks/payment-request/index.js

@@ -13,6 +13,13 @@ const ApplePayPreview = () => <img src={ applePayImage } alt="" />;
 
 const componentStripePromise = loadStripe();
 
+const supports = {
+	features: getBlocksConfiguration()?.supports ?? [],
+};
+if ( getBlocksConfiguration().isAdmin ?? false ) {
+	supports.style = getBlocksConfiguration()?.style ?? [];
+}
+
 const paymentRequestPaymentMethod = {
 	name: PAYMENT_METHOD_NAME,
 	title: 'Stripe',
@@ -63,9 +70,7 @@ const paymentRequestPaymentMethod = {
 		} );
 	},
 	paymentMethodId: 'stripe',
-	supports: {
-		features: getBlocksConfiguration()?.supports ?? [],
-	},
+	supports,
 };
 
 export default paymentRequestPaymentMethod;

client/blocks/upe/index.js

@@ -56,6 +56,15 @@ Object.entries( paymentMethodsConfig )
 		}
 
 		const Icon = Icons[ iconName ];
+		const supports = {
+			// Use `false` as fallback values in case server provided configuration is missing.
+			showSavedCards: getBlocksConfiguration()?.showSavedCards ?? false,
+			showSaveOption: upeConfig.showSaveOption ?? false,
+			features: getBlocksConfiguration()?.supports ?? [],
+		};
+		if ( getBlocksConfiguration().isAdmin ?? false ) {
+			supports.style = getBlocksConfiguration()?.style ?? [];
+		}
 
 		registerPaymentMethod( {
 			name: upeMethods[ upeName ],
@@ -95,13 +104,7 @@ Object.entries( paymentMethodsConfig )
 				</>
 			),
 			ariaLabel: 'Stripe',
-			supports: {
-				// Use `false` as fallback values in case server provided configuration is missing.
-				showSavedCards:
-					getBlocksConfiguration()?.showSavedCards ?? false,
-				showSaveOption: upeConfig.showSaveOption ?? false,
-				features: getBlocksConfiguration()?.supports ?? [],
-			},
+			supports,
 		} );
 	} );
 

includes/class-wc-stripe-blocks-support.php

@@ -198,6 +198,7 @@ public function get_payment_method_data() {
 				'button'                          => [
 					'customLabel' => $this->payment_request_configuration->get_button_label(),
 				],
+				'style'                          => $this->get_style(),
 			]
 		);
 	}
@@ -250,6 +251,19 @@ private function should_show_payment_request_button() {
 		return $this->payment_request_configuration->should_show_payment_request_button();
 	}
 
+	/**
+	 * Returns an array of style properties supported by the payment method.
+	 * This method is used only when rendering the payment method in the editor.
+	 *
+	 * @return array Array of style properties.
+	 */
+	private function get_style() {
+		return [
+			'height',
+			'borderRadius',
+		];
+	}
+
 	/**
 	 * Returns true if the ECE should be shown on the current page, false otherwise.
 	 *

readme.txt

@@ -111,6 +111,7 @@ If you get stuck, you can ask for help in the [Plugin Forum](https://wordpress.o
 == Changelog ==
 
 = 9.1.0 - xxxx-xx-xx =
+* Fix - Fixes the incompatibility notice in editor due missing style property when instantiating Stripe payment methods. 
 * Dev - Updates the GitHub caching action (`actions/cache`) to v4 due deprecation.
 * Fix - Don't update canceled order status to on-hold when a dispute is opened.
 * Fix - Correctly sets the dispute opened note when a dispute does not require any further action.