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.