Fix incompatible notice in editor due missing style properties

changelog.txt

@@ -1,6 +1,7 @@
 *** Changelog ***
 
 = 8.9.0 - xxxx-xx-xx =
+* Fix - Fixes the incompatibility notice in editor due missing style property when instantiating Stripe payment methods. 
 * Fix - Fix issues when detaching payment methods on staging sites (with the new checkout experience enabled).
 * Fix - Display a notice if taxes vary by customer's billing address when checking out using the Stripe Express Checkout Element.
 * Tweak - Makes the new Stripe Express Checkout Element enabled by default.

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

@@ -13,6 +13,13 @@ import { checkPaymentMethodIsAvailable } from 'wcstripe/express-checkout/utils/c
 
 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',
@@ -36,9 +43,7 @@ const expressCheckoutElementsGooglePay = ( api ) => ( {
 	},
 	paymentMethodId: PAYMENT_METHOD_EXPRESS_CHECKOUT_ELEMENT,
 	gatewayId: 'stripe',
-	supports: {
-		features: getBlocksConfiguration()?.supports ?? [],
-	},
+	supports,
 } );
 
 const expressCheckoutElementsApplePay = ( api ) => ( {
@@ -64,9 +69,7 @@ const expressCheckoutElementsApplePay = ( api ) => ( {
 	},
 	paymentMethodId: PAYMENT_METHOD_EXPRESS_CHECKOUT_ELEMENT,
 	gatewayId: 'stripe',
-	supports: {
-		features: getBlocksConfiguration()?.supports ?? [],
-	},
+	supports,
 } );
 
 const expressCheckoutElementsStripeLink = ( api ) => ( {
@@ -90,9 +93,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

@@ -45,6 +45,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 ],
@@ -90,6 +99,7 @@ Object.entries( paymentMethodsConfig )
 					getBlocksConfiguration()?.showSavedCards ?? false,
 				showSaveOption: upeConfig.showSaveOption ?? false,
 				features: getBlocksConfiguration()?.supports ?? [],
+				style: getBlocksConfiguration()?.style ?? [],
 			},
 		} );
 	} );

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

@@ -197,6 +197,7 @@ public function get_payment_method_data() {
 				'button'                         => [
 					'customLabel' => $this->payment_request_configuration->get_button_label(),
 				],
+				'style'                          => $this->get_style(),
 			]
 		);
 	}
@@ -249,6 +250,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 ==
 
 = 8.9.0 - xxxx-xx-xx =
+* Fix - Fixes the incompatibility notice in editor due missing style property when instantiating Stripe payment methods. 
 * Fix - Fix issues when detaching payment methods on staging sites (with the new checkout experience enabled).
 * Fix - Display a notice if taxes vary by customer's billing address when checking out using the Stripe Express Checkout Element.
 * Tweak - Makes the new Stripe Express Checkout Element enabled by default.