Show Express Checkout button previews in editor

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

@@ -0,0 +1,61 @@
+/**
+ * External dependencies
+ */
+import { useMemo } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import GooglePayAssetDark from 'assets/images/cards/google-pay-preview-dark.svg?asset';
+import GooglePayAssetLight from 'assets/images/cards/google-pay-preview-light.svg?asset';
+import { getExpressCheckoutButtonAppearance } from 'wcpay/express-checkout/utils';
+
+const ExpressCheckoutButtonPreviewComponent = ( {
+	expressPaymentMethod,
+	options,
+	buttonAttributes,
+} ) => {
+	const appearance = useMemo(
+		() => getExpressCheckoutButtonAppearance( buttonAttributes ),
+		[ buttonAttributes ]
+	);
+
+	const buttonStyle = {
+		height: `${ options.buttonHeight }px`,
+		borderRadius: appearance.variables.borderRadius,
+	};
+
+	const theme = options.buttonTheme[ expressPaymentMethod ];
+
+	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';
+		}
+	}
+
+	if ( expressPaymentMethod === 'googlePay' ) {
+		if ( theme === 'black' ) {
+			buttonStyle.backgroundColor = 'black';
+			buttonStyle.backgroundImage = `url(${ GooglePayAssetDark })`;
+		} else {
+			buttonStyle.backgroundColor = 'white';
+			buttonStyle.backgroundImage = `url(${ GooglePayAssetLight })`;
+		}
+	}
+
+	return (
+		<button
+			type="button"
+			id={ `express-checkout-button-preview-${ expressPaymentMethod }` }
+			className="express-checkout-button-preview"
+			style={ buttonStyle }
+		/>
+	);
+};
+
+export default ExpressCheckoutButtonPreviewComponent;

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 ExpressCheckoutButtonPreviewComponent 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 (
+			<ExpressCheckoutButtonPreviewComponent
+				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;
+}