Implement actual ECE buttons in Block editor (#9650)

Co-authored-by: Kristófer Reykjalín <[email protected]>

changelog/update-9417-ece-in-block-editor

@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Use preview versions of the actual ECE buttons in the Block editor.

client/express-checkout/blocks/components/express-checkout-component.js

@@ -76,6 +76,7 @@ const ExpressCheckoutComponent = ( {
 	onClose,
 	expressPaymentMethod = '',
 	buttonAttributes,
+	isPreview = false,
 } ) => {
 	const {
 		buttonOptions,
@@ -92,7 +93,7 @@ const ExpressCheckoutComponent = ( {
 		onClose,
 		setExpressPaymentError,
 	} );
-
+	const onClickHandler = ! isPreview ? onButtonClick : () => {};
 	const onShippingAddressChange = ( event ) =>
 		shippingAddressChangeHandler( api, event, elements );
 
@@ -140,7 +141,7 @@ const ExpressCheckoutComponent = ( {
 				),
 				...getPaymentMethodsOverride( expressPaymentMethod ),
 			} }
-			onClick={ onButtonClick }
+			onClick={ onClickHandler }
 			onConfirm={ onConfirm }
 			onReady={ onElementsReady }
 			onCancel={ onCancel }

client/express-checkout/blocks/components/express-checkout-container.js

@@ -15,7 +15,7 @@ import {
 import '../express-checkout-element.scss';
 
 const ExpressCheckoutContainer = ( props ) => {
-	const { api, billing, buttonAttributes } = props;
+	const { api, billing, buttonAttributes, isPreview } = props;
 
 	const stripePromise = useMemo( () => {
 		return api.loadStripeForExpressCheckout();
@@ -24,8 +24,8 @@ const ExpressCheckoutContainer = ( props ) => {
 	const options = {
 		mode: 'payment',
 		paymentMethodCreation: 'manual',
-		amount: billing.cartTotal.value,
-		currency: billing.currency.code.toLowerCase(),
+		amount: ! isPreview ? billing.cartTotal.value : 10,
+		currency: ! isPreview ? billing.currency.code.toLowerCase() : 'usd',
 		appearance: getExpressCheckoutButtonAppearance( buttonAttributes ),
 		locale: getExpressCheckoutData( 'stripe' )?.locale ?? 'en',
 	};

client/express-checkout/blocks/index.js

@@ -8,9 +8,7 @@ import { __ } from '@wordpress/i18n';
  */
 import { PAYMENT_METHOD_NAME_EXPRESS_CHECKOUT_ELEMENT } from 'wcpay/checkout/constants';
 import { getConfig } from 'wcpay/utils/checkout';
-import ApplePayPreview from './components/apple-pay-preview';
 import ExpressCheckoutContainer from './components/express-checkout-container';
-import GooglePayPreview from './components/google-pay-preview';
 import { checkPaymentMethodIsAvailable } from '../utils/checkPaymentMethodIsAvailable';
 
 const expressCheckoutElementApplePay = ( api ) => ( {
@@ -25,9 +23,16 @@ const expressCheckoutElementApplePay = ( api ) => ( {
 	content: (
 		<ExpressCheckoutContainer api={ api } expressPaymentMethod="applePay" />
 	),
-	edit: <ApplePayPreview />,
+	edit: (
+		<ExpressCheckoutContainer
+			api={ api }
+			expressPaymentMethod="applePay"
+			isPreview
+		/>
+	),
 	supports: {
 		features: getConfig( 'features' ),
+		style: [ 'height', 'borderRadius' ],
 	},
 	canMakePayment: ( { cart } ) => {
 		if ( typeof wcpayExpressCheckoutParams === 'undefined' ) {
@@ -56,9 +61,16 @@ const expressCheckoutElementGooglePay = ( api ) => {
 				expressPaymentMethod="googlePay"
 			/>
 		),
-		edit: <GooglePayPreview />,
+		edit: (
+			<ExpressCheckoutContainer
+				api={ api }
+				expressPaymentMethod="googlePay"
+				isPreview
+			/>
+		),
 		supports: {
 			features: getConfig( 'features' ),
+			style: [ 'height', 'borderRadius' ],
 		},
 		canMakePayment: ( { cart } ) => {
 			if ( typeof wcpayExpressCheckoutParams === 'undefined' ) {

client/express-checkout/utils/index.ts

@@ -109,7 +109,13 @@ export const getExpressCheckoutData = <
 >(
 	key: K
 ) => {
-	return window.wcpayExpressCheckoutParams?.[ key ] ?? null;
+	if ( typeof window.wcpayExpressCheckoutParams !== 'undefined' ) {
+		return window.wcpayExpressCheckoutParams[ key ] ?? null;
+	} else if ( typeof window.wc?.wcSettings !== 'undefined' ) {
+		return window.wc.wcSettings.getSetting( 'ece_data' )?.[ key ] ?? null;
+	}
+
+	return null;
 };
 
 /**

client/globals.d.ts

@@ -3,6 +3,7 @@
  */
 import type { MccsDisplayTreeItem, Country } from 'onboarding/types';
 import { PaymentMethodToPluginsMap } from './components/duplicate-notice';
+import { WCPayExpressCheckoutParams } from './express-checkout/utils';
 
 declare global {
 	const wcpaySettings: {
@@ -138,6 +139,7 @@ declare global {
 	};
 
 	const wc: {
+		wcSettings: typeof wcSettingsModule;
 		tracks: {
 			recordEvent: (
 				eventName: string,
@@ -186,6 +188,21 @@ declare global {
 		siteTitle: string;
 	};
 
+	interface WcSettings {
+		ece_data?: WCPayExpressCheckoutParams;
+		woocommerce_payments_data: typeof wcpaySettings;
+	}
+
+	const wcSettingsModule: {
+		getSetting: <
+			K extends keyof WcSettings,
+			T extends WcSettings[ K ] | undefined
+		>(
+			setting: K,
+			fallback?: T
+		) => WcSettings[ K ] | T;
+	};
+
 	interface Window {
 		wcpaySettings: typeof wcpaySettings;
 		wc: typeof wc;

includes/express-checkout/class-wc-payments-express-checkout-button-handler.php

@@ -11,6 +11,8 @@
 	exit;
 }
 
+use Automattic\WooCommerce\Blocks\Package;
+use Automattic\WooCommerce\Blocks\Assets\AssetDataRegistry;
 use WCPay\Fraud_Prevention\Fraud_Prevention_Service;
 
 /**
@@ -99,6 +101,10 @@ public function init() {
 		add_action( 'woocommerce_checkout_order_processed', [ $this->express_checkout_helper, 'add_order_payment_method_title' ], 10, 2 );
 
 		$this->express_checkout_ajax_handler->init();
+
+		if ( is_admin() && current_user_can( 'manage_woocommerce' ) ) {
+			$this->register_ece_data_for_block_editor();
+		}
 	}
 
 	/**
@@ -447,4 +453,23 @@ public function filter_gateway_title( $title, $id ) {
 
 		return $title;
 	}
+
+	/**
+	 * Add ECE data to `wcSettings` to allow it to be accessed by the front-end JS script in the Block editor.
+	 *
+	 * @return void
+	 */
+	private function register_ece_data_for_block_editor() {
+		$data_registry = Package::container()->get( AssetDataRegistry::class );
+
+		if ( $data_registry->exists( 'ece_data' ) ) {
+			return;
+		}
+
+		$ece_data = [
+			'button' => $this->get_button_settings(),
+		];
+
+		$data_registry->add( 'ece_data', $ece_data );
+	}
 }