diff --git a/changelog.txt b/changelog.txt
index 0000b895a..6d1a31312 100644
--- a/changelog.txt
+++ b/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.
diff --git a/client/blocks/credit-card/index.js b/client/blocks/credit-card/index.js
index 29f761f33..3156d9ef0 100644
--- a/client/blocks/credit-card/index.js
+++ b/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: ,
@@ -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;
diff --git a/client/blocks/express-checkout/index.js b/client/blocks/express-checkout/index.js
index 27222319d..03f748ee2 100644
--- a/client/blocks/express-checkout/index.js
+++ b/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 {
diff --git a/client/blocks/payment-request/index.js b/client/blocks/payment-request/index.js
index ad0c903bf..80947a4fb 100644
--- a/client/blocks/payment-request/index.js
+++ b/client/blocks/payment-request/index.js
@@ -13,6 +13,13 @@ const ApplePayPreview = () => ;
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;
diff --git a/client/blocks/upe/index.js b/client/blocks/upe/index.js
index 189fed2ca..a3d5155e4 100644
--- a/client/blocks/upe/index.js
+++ b/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 ?? [],
},
} );
} );
diff --git a/includes/class-wc-stripe-blocks-support.php b/includes/class-wc-stripe-blocks-support.php
index fa93dcdda..c3de59740 100644
--- a/includes/class-wc-stripe-blocks-support.php
+++ b/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.
*
diff --git a/readme.txt b/readme.txt
index ac8b5b0f0..bb94ab969 100644
--- a/readme.txt
+++ b/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.