Show Express Checkout button previews in editor

changelog/fix-show-preview-for-express-checkout-buttons-in-editor

@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Show Express Checkout button previews in template editor

client/tokenized-express-checkout/blocks/components/express-checkout-button-preview.js

@@ -0,0 +1,112 @@
+/**
+ * External dependencies
+ */
+import { useEffect, useMemo, useRef } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { getExpressCheckoutButtonAppearance } from 'wcpay/express-checkout/utils';
+
+const ExpressCheckoutButtonPreview = ( {
+	expressPaymentMethod,
+	options,
+	buttonAttributes,
+} ) => {
+	const appearance = useMemo(
+		() => getExpressCheckoutButtonAppearance( buttonAttributes ),
+		[ buttonAttributes ]
+	);
+	const ref = useRef( null );
+	const renderGooglePayButtonPromise = useRef( null );
+
+	const theme = options.buttonTheme[ expressPaymentMethod ];
+	const borderRadius = appearance.variables.borderRadius;
+
+	useEffect( () => {
+		if (
+			ref.current &&
+			expressPaymentMethod === 'googlePay' &&
+			! renderGooglePayButtonPromise.current
+		) {
+			renderGooglePayButtonPromise.current = ( async () => {
+				const targetDocument = ref.current.ownerDocument;
+				const targetWindow = targetDocument.defaultView;
+				if ( ! targetWindow.google?.payments?.api?.PaymentsClient ) {
+					await new Promise( ( resolve ) => {
+						const script = document.createElement( 'script' );
+						script.src = 'https://pay.google.com/gp/p/js/pay.js';
+						script.onload = resolve;
+						targetDocument.head.appendChild( script );
+					} );
+				}
+
+				const googlePayClient = new targetWindow.google.payments.api.PaymentsClient(
+					{
+						environment: 'TEST',
+					}
+				);
+
+				const buttonColor = theme === 'black' ? 'black' : 'white'; // There is no 'outline' theme in Google Pay.
+
+				const button = googlePayClient.createButton( {
+					buttonType: 'plain',
+					buttonColor,
+					buttonRadius: parseFloat( borderRadius ),
+					buttonSizeMode: 'fill',
+					onClick: () => {},
+				} );
+				ref.current.appendChild( button );
+			} )();
+		}
+	}, [ ref, theme, expressPaymentMethod, borderRadius ] );
+
+	useEffect( () => {
+		ref.current
+			?.querySelector( 'button' )
+			?.style?.setProperty( 'border-radius', borderRadius );
+	}, [ ref, borderRadius ] );
+
+	if ( expressPaymentMethod === 'googlePay' ) {
+		return (
+			<div
+				ref={ ref }
+				style={ {
+					height: `${ options.buttonHeight }px`,
+					width: '100%',
+				} }
+			/>
+		);
+	}
+
+	const buttonStyle = {
+		height: `${ options.buttonHeight }px`,
+		borderRadius,
+	};
+
+	if ( expressPaymentMethod === 'applePay' ) {
+		buttonStyle.WebkitAppearance = '-apple-pay-button';
+		if ( theme === 'black' ) {
+			buttonStyle.ApplePayButtonStyle = 'black';
+		} else if ( theme === 'outline' ) {
+			buttonStyle.ApplePayButtonStyle = 'white-outline';
+		} else {
+			buttonStyle.ApplePayButtonStyle = 'white';
+		}
+
+		return (
+			<div>
+				<button
+					type="button"
+					id={ `express-checkout-button-preview-${ expressPaymentMethod }` }
+					className="express-checkout-button-preview"
+					style={ buttonStyle }
+				/>
+			</div>
+		);
+	}
+
+	return null;
+};
+
+export default ExpressCheckoutButtonPreview;

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

@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { ExpressCheckoutElement } from '@stripe/react-stripe-js';
 /**
  * Internal dependencies
@@ -11,6 +12,9 @@ import {
 } from '../../event-handlers';
 import { useExpressCheckout } from '../hooks/use-express-checkout';
 import { PAYMENT_METHOD_NAME_EXPRESS_CHECKOUT_ELEMENT } from 'wcpay/checkout/constants';
+import ExpressCheckoutButtonPreview from './express-checkout-button-preview';
+
+const FALLBACK_BUTTON_WAIT_TIME = 3000; // 3 seconds
 
 const getPaymentMethodsOverride = ( enabledPaymentMethod ) => {
 	const allDisabled = {
@@ -93,6 +97,8 @@ const ExpressCheckoutComponent = ( {
 		onClose,
 		setExpressPaymentError,
 	} );
+	const [ showFallbackButton, setShowFallbackButton ] = useState( false );
+	const onElementsReadyCalled = useRef( false );
 	const onClickHandler = ! isPreview ? onButtonClick : () => {};
 	const onShippingAddressChange = ( event ) =>
 		shippingAddressChangeHandler( event, elements );
@@ -101,6 +107,7 @@ const ExpressCheckoutComponent = ( {
 		shippingRateChangeHandler( event, elements );
 
 	const onElementsReady = ( event ) => {
+		onElementsReadyCalled.current = true;
 		const paymentMethodContainer = document.getElementById(
 			`express-payment-method-${ PAYMENT_METHOD_NAME_EXPRESS_CHECKOUT_ELEMENT }_${ expressPaymentMethod }`
 		);
@@ -118,29 +125,53 @@ const ExpressCheckoutComponent = ( {
 		onReady( event );
 	};
 
-	// The Cart & Checkout blocks provide unified styles across all buttons,
-	// which should override the extension specific settings.
-	const withBlockOverride = () => {
-		const override = {};
-		if ( typeof buttonAttributes !== 'undefined' ) {
-			override.buttonHeight = Number( buttonAttributes.height );
-		}
+	const checkoutElementOptions = useMemo( () => {
+		// The Cart & Checkout blocks provide unified styles across all buttons,
+		// which should override the extension specific settings.
+		const withBlockOverride = () => {
+			const override = {};
+			if ( typeof buttonAttributes !== 'undefined' ) {
+				override.buttonHeight = Number( buttonAttributes.height );
+			}
+			return {
+				...buttonOptions,
+				...override,
+			};
+		};
 		return {
-			...buttonOptions,
-			...override,
+			...withBlockOverride(),
+			...adjustButtonHeights( withBlockOverride(), expressPaymentMethod ),
+			...getPaymentMethodsOverride( expressPaymentMethod ),
 		};
-	};
+	}, [ expressPaymentMethod, buttonAttributes, buttonOptions ] );
+
+	useEffect( () => {
+		if ( ! isPreview || onElementsReadyCalled.current ) {
+			return;
+		}
+
+		const handle = setTimeout( () => {
+			if ( ! onElementsReadyCalled.current ) {
+				setShowFallbackButton( true );
+			}
+		}, FALLBACK_BUTTON_WAIT_TIME );
+
+		return () => clearTimeout( handle );
+	}, [ isPreview, onElementsReadyCalled ] );
+
+	if ( showFallbackButton ) {
+		return (
+			<ExpressCheckoutButtonPreview
+				expressPaymentMethod={ expressPaymentMethod }
+				buttonAttributes={ buttonAttributes }
+				options={ checkoutElementOptions }
+			/>
+		);
+	}
 
 	return (
 		<ExpressCheckoutElement
-			options={ {
-				...withBlockOverride(),
-				...adjustButtonHeights(
-					withBlockOverride(),
-					expressPaymentMethod
-				),
-				...getPaymentMethodsOverride( expressPaymentMethod ),
-			} }
+			options={ checkoutElementOptions }
 			onClick={ onClickHandler }
 			onConfirm={ onConfirm }
 			onReady={ onElementsReady }

client/tokenized-express-checkout/blocks/express-checkout-element.scss

@@ -21,3 +21,25 @@
 	margin-left: 1px !important;
 	width: 99% !important;
 }
+
+// Preview button
+@supports not ( -webkit-appearance: -apple-pay-button ) {
+	/* stylelint-disable-next-line selector-id-pattern */
+	#express-payment-method-woocommerce_payments_express_checkout_applePay:has( #express-checkout-button-preview-applePay ) {
+		display: none;
+	}
+}
+
+.express-checkout-button-preview {
+	width: 100%;
+	background-repeat: no-repeat;
+	background-position: center;
+	background-origin: content-box;
+	background-size: contain;
+	padding: 11px 15%;
+	box-sizing: border-box;
+	box-shadow: none;
+	border: none;
+	outline: 1px solid #3c4043;
+	outline-offset: -1px;
+}