From 63184d1ac9e848548e71c0fa09ff2af7f22c114a Mon Sep 17 00:00:00 2001
From: Daniel Guerra <daniel.guerra@automattic.com>
Date: Mon, 13 Jan 2025 13:03:51 -0600
Subject: [PATCH 01/16] Show Express Checkout button previews in editor when
 the elements do not load

---
 .../images/cards/google-pay-preview-dark.svg  |  1 +
 .../images/cards/google-pay-preview-light.svg |  1 +
 .../express-checkout-button-preview.js        | 61 +++++++++++++++++
 .../components/express-checkout-component.js  | 67 ++++++++++++++-----
 .../blocks/express-checkout-element.scss      | 22 ++++++
 5 files changed, 134 insertions(+), 18 deletions(-)
 create mode 100644 assets/images/cards/google-pay-preview-dark.svg
 create mode 100644 assets/images/cards/google-pay-preview-light.svg
 create mode 100644 client/tokenized-express-checkout/blocks/components/express-checkout-button-preview.js

diff --git a/assets/images/cards/google-pay-preview-dark.svg b/assets/images/cards/google-pay-preview-dark.svg
new file mode 100644
index 00000000000..b41f9203c0e
--- /dev/null
+++ b/assets/images/cards/google-pay-preview-dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="41" height="17"><g fill="none" fill-rule="evenodd"><path d="M19.526 2.635v4.083h2.518c.6 0 1.096-.202 1.488-.605.403-.402.605-.882.605-1.437 0-.544-.202-1.018-.605-1.422-.392-.413-.888-.62-1.488-.62h-2.518zm0 5.52v4.736h-1.504V1.198h3.99c1.013 0 1.873.337 2.582 1.012.72.675 1.08 1.497 1.08 2.466 0 .991-.36 1.819-1.08 2.482-.697.665-1.559.996-2.583.996h-2.485v.001zm7.668 2.287c0 .392.166.718.499.98.332.26.722.391 1.168.391.633 0 1.196-.234 1.692-.701.497-.469.744-1.019.744-1.65-.469-.37-1.123-.555-1.962-.555-.61 0-1.12.148-1.528.442-.409.294-.613.657-.613 1.093m1.946-5.815c1.112 0 1.989.297 2.633.89.642.594.964 1.408.964 2.442v4.932h-1.439v-1.11h-.065c-.622.914-1.45 1.372-2.486 1.372-.882 0-1.621-.262-2.215-.784-.594-.523-.891-1.176-.891-1.96 0-.828.313-1.486.94-1.976s1.463-.735 2.51-.735c.892 0 1.629.163 2.206.49v-.344c0-.522-.207-.966-.621-1.33a2.132 2.132 0 0 0-1.455-.547c-.84 0-1.504.353-1.995 1.062l-1.324-.834c.73-1.045 1.81-1.568 3.238-1.568m11.853.262l-5.02 11.53H34.42l1.864-4.034-3.302-7.496h1.635l2.387 5.749h.032l2.322-5.75z" fill="#FFF"/><path d="M13.448 7.134c0-.473-.04-.93-.116-1.366H6.988v2.588h3.634a3.11 3.11 0 0 1-1.344 2.042v1.68h2.169c1.27-1.17 2.001-2.9 2.001-4.944" fill="#4285F4"/><path d="M6.988 13.7c1.816 0 3.344-.595 4.459-1.621l-2.169-1.681c-.603.406-1.38.643-2.29.643-1.754 0-3.244-1.182-3.776-2.774H.978v1.731a6.728 6.728 0 0 0 6.01 3.703" fill="#34A853"/><path d="M3.212 8.267a4.034 4.034 0 0 1 0-2.572V3.964H.978A6.678 6.678 0 0 0 .261 6.98c0 1.085.26 2.11.717 3.017l2.234-1.731z" fill="#FABB05"/><path d="M6.988 2.921c.992 0 1.88.34 2.58 1.008v.001l1.92-1.918C10.324.928 8.804.262 6.989.262a6.728 6.728 0 0 0-6.01 3.702l2.234 1.731c.532-1.592 2.022-2.774 3.776-2.774" fill="#E94235"/></g></svg>
\ No newline at end of file
diff --git a/assets/images/cards/google-pay-preview-light.svg b/assets/images/cards/google-pay-preview-light.svg
new file mode 100644
index 00000000000..758d7c66103
--- /dev/null
+++ b/assets/images/cards/google-pay-preview-light.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="41" height="17"><g fill="none" fill-rule="evenodd"><path d="M19.526 2.635v4.083h2.518c.6 0 1.096-.202 1.488-.605.403-.402.605-.882.605-1.437 0-.544-.202-1.018-.605-1.422-.392-.413-.888-.62-1.488-.62h-2.518zm0 5.52v4.736h-1.504V1.198h3.99c1.013 0 1.873.337 2.582 1.012.72.675 1.08 1.497 1.08 2.466 0 .991-.36 1.819-1.08 2.482-.697.665-1.559.996-2.583.996h-2.485v.001zm7.668 2.287c0 .392.166.718.499.98.332.26.722.391 1.168.391.633 0 1.196-.234 1.692-.701.497-.469.744-1.019.744-1.65-.469-.37-1.123-.555-1.962-.555-.61 0-1.12.148-1.528.442-.409.294-.613.657-.613 1.093m1.946-5.815c1.112 0 1.989.297 2.633.89.642.594.964 1.408.964 2.442v4.932h-1.439v-1.11h-.065c-.622.914-1.45 1.372-2.486 1.372-.882 0-1.621-.262-2.215-.784-.594-.523-.891-1.176-.891-1.96 0-.828.313-1.486.94-1.976s1.463-.735 2.51-.735c.892 0 1.629.163 2.206.49v-.344c0-.522-.207-.966-.621-1.33a2.132 2.132 0 0 0-1.455-.547c-.84 0-1.504.353-1.995 1.062l-1.324-.834c.73-1.045 1.81-1.568 3.238-1.568m11.853.262l-5.02 11.53H34.42l1.864-4.034-3.302-7.496h1.635l2.387 5.749h.032l2.322-5.75z" fill="#5F6368"/><path d="M13.448 7.134c0-.473-.04-.93-.116-1.366H6.988v2.588h3.634a3.11 3.11 0 0 1-1.344 2.042v1.68h2.169c1.27-1.17 2.001-2.9 2.001-4.944" fill="#4285F4"/><path d="M6.988 13.7c1.816 0 3.344-.595 4.459-1.621l-2.169-1.681c-.603.406-1.38.643-2.29.643-1.754 0-3.244-1.182-3.776-2.774H.978v1.731a6.728 6.728 0 0 0 6.01 3.703" fill="#34A853"/><path d="M3.212 8.267a4.034 4.034 0 0 1 0-2.572V3.964H.978A6.678 6.678 0 0 0 .261 6.98c0 1.085.26 2.11.717 3.017l2.234-1.731z" fill="#FABB05"/><path d="M6.988 2.921c.992 0 1.88.34 2.58 1.008v.001l1.92-1.918C10.324.928 8.804.262 6.989.262a6.728 6.728 0 0 0-6.01 3.702l2.234 1.731c.532-1.592 2.022-2.774 3.776-2.774" fill="#E94235"/><path d="M0 0h41.285v18H0z"/></g></svg>
\ No newline at end of file
diff --git a/client/tokenized-express-checkout/blocks/components/express-checkout-button-preview.js b/client/tokenized-express-checkout/blocks/components/express-checkout-button-preview.js
new file mode 100644
index 00000000000..fb7289dd8f1
--- /dev/null
+++ b/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;
diff --git a/client/tokenized-express-checkout/blocks/components/express-checkout-component.js b/client/tokenized-express-checkout/blocks/components/express-checkout-component.js
index 9975b56d406..6c76768c6fb 100644
--- a/client/tokenized-express-checkout/blocks/components/express-checkout-component.js
+++ b/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 }
diff --git a/client/tokenized-express-checkout/blocks/express-checkout-element.scss b/client/tokenized-express-checkout/blocks/express-checkout-element.scss
index 4b4e3d5e29e..f4ef690bb3c 100644
--- a/client/tokenized-express-checkout/blocks/express-checkout-element.scss
+++ b/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;
+}

From 432fd731c5ff2e053e9eb36ffebfba0043ca2546 Mon Sep 17 00:00:00 2001
From: Daniel Guerra <daniel.guerra@automattic.com>
Date: Thu, 16 Jan 2025 10:31:03 -0600
Subject: [PATCH 02/16] Add changelog

---
 .../fix-show-preview-for-express-checkout-buttons-in-editor   | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 changelog/fix-show-preview-for-express-checkout-buttons-in-editor

diff --git a/changelog/fix-show-preview-for-express-checkout-buttons-in-editor b/changelog/fix-show-preview-for-express-checkout-buttons-in-editor
new file mode 100644
index 00000000000..86092b348d7
--- /dev/null
+++ b/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

From f2ee57806469722e8a053720013299222e9127fe Mon Sep 17 00:00:00 2001
From: Daniel Guerra <daniel.guerra@automattic.com>
Date: Thu, 16 Jan 2025 10:57:51 -0600
Subject: [PATCH 03/16] Rename component

---
 .../blocks/components/express-checkout-button-preview.js      | 4 ++--
 .../blocks/components/express-checkout-component.js           | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/tokenized-express-checkout/blocks/components/express-checkout-button-preview.js b/client/tokenized-express-checkout/blocks/components/express-checkout-button-preview.js
index fb7289dd8f1..118aed6d8eb 100644
--- a/client/tokenized-express-checkout/blocks/components/express-checkout-button-preview.js
+++ b/client/tokenized-express-checkout/blocks/components/express-checkout-button-preview.js
@@ -10,7 +10,7 @@ import GooglePayAssetDark from 'assets/images/cards/google-pay-preview-dark.svg?
 import GooglePayAssetLight from 'assets/images/cards/google-pay-preview-light.svg?asset';
 import { getExpressCheckoutButtonAppearance } from 'wcpay/express-checkout/utils';
 
-const ExpressCheckoutButtonPreviewComponent = ( {
+const ExpressCheckoutButtonPreview = ( {
 	expressPaymentMethod,
 	options,
 	buttonAttributes,
@@ -58,4 +58,4 @@ const ExpressCheckoutButtonPreviewComponent = ( {
 	);
 };
 
-export default ExpressCheckoutButtonPreviewComponent;
+export default ExpressCheckoutButtonPreview;
diff --git a/client/tokenized-express-checkout/blocks/components/express-checkout-component.js b/client/tokenized-express-checkout/blocks/components/express-checkout-component.js
index 6c76768c6fb..86c86a652fd 100644
--- a/client/tokenized-express-checkout/blocks/components/express-checkout-component.js
+++ b/client/tokenized-express-checkout/blocks/components/express-checkout-component.js
@@ -12,7 +12,7 @@ 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';
+import ExpressCheckoutButtonPreview from './express-checkout-button-preview';
 
 const FALLBACK_BUTTON_WAIT_TIME = 3000; // 3 seconds
 
@@ -161,7 +161,7 @@ const ExpressCheckoutComponent = ( {
 
 	if ( showFallbackButton ) {
 		return (
-			<ExpressCheckoutButtonPreviewComponent
+			<ExpressCheckoutButtonPreview
 				expressPaymentMethod={ expressPaymentMethod }
 				buttonAttributes={ buttonAttributes }
 				options={ checkoutElementOptions }

From 36a4544d67a8bc44292af4a5f60e5c665294ea94 Mon Sep 17 00:00:00 2001
From: Daniel Guerra <daniel.guerra@automattic.com>
Date: Thu, 16 Jan 2025 11:50:08 -0600
Subject: [PATCH 04/16] Use google pay library directly to render test buttons

---
 .../images/cards/google-pay-preview-dark.svg  |  1 -
 .../images/cards/google-pay-preview-light.svg |  1 -
 .../express-checkout-button-preview.js        | 90 ++++++++++++++-----
 3 files changed, 67 insertions(+), 25 deletions(-)
 delete mode 100644 assets/images/cards/google-pay-preview-dark.svg
 delete mode 100644 assets/images/cards/google-pay-preview-light.svg

diff --git a/assets/images/cards/google-pay-preview-dark.svg b/assets/images/cards/google-pay-preview-dark.svg
deleted file mode 100644
index b41f9203c0e..00000000000
--- a/assets/images/cards/google-pay-preview-dark.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="41" height="17"><g fill="none" fill-rule="evenodd"><path d="M19.526 2.635v4.083h2.518c.6 0 1.096-.202 1.488-.605.403-.402.605-.882.605-1.437 0-.544-.202-1.018-.605-1.422-.392-.413-.888-.62-1.488-.62h-2.518zm0 5.52v4.736h-1.504V1.198h3.99c1.013 0 1.873.337 2.582 1.012.72.675 1.08 1.497 1.08 2.466 0 .991-.36 1.819-1.08 2.482-.697.665-1.559.996-2.583.996h-2.485v.001zm7.668 2.287c0 .392.166.718.499.98.332.26.722.391 1.168.391.633 0 1.196-.234 1.692-.701.497-.469.744-1.019.744-1.65-.469-.37-1.123-.555-1.962-.555-.61 0-1.12.148-1.528.442-.409.294-.613.657-.613 1.093m1.946-5.815c1.112 0 1.989.297 2.633.89.642.594.964 1.408.964 2.442v4.932h-1.439v-1.11h-.065c-.622.914-1.45 1.372-2.486 1.372-.882 0-1.621-.262-2.215-.784-.594-.523-.891-1.176-.891-1.96 0-.828.313-1.486.94-1.976s1.463-.735 2.51-.735c.892 0 1.629.163 2.206.49v-.344c0-.522-.207-.966-.621-1.33a2.132 2.132 0 0 0-1.455-.547c-.84 0-1.504.353-1.995 1.062l-1.324-.834c.73-1.045 1.81-1.568 3.238-1.568m11.853.262l-5.02 11.53H34.42l1.864-4.034-3.302-7.496h1.635l2.387 5.749h.032l2.322-5.75z" fill="#FFF"/><path d="M13.448 7.134c0-.473-.04-.93-.116-1.366H6.988v2.588h3.634a3.11 3.11 0 0 1-1.344 2.042v1.68h2.169c1.27-1.17 2.001-2.9 2.001-4.944" fill="#4285F4"/><path d="M6.988 13.7c1.816 0 3.344-.595 4.459-1.621l-2.169-1.681c-.603.406-1.38.643-2.29.643-1.754 0-3.244-1.182-3.776-2.774H.978v1.731a6.728 6.728 0 0 0 6.01 3.703" fill="#34A853"/><path d="M3.212 8.267a4.034 4.034 0 0 1 0-2.572V3.964H.978A6.678 6.678 0 0 0 .261 6.98c0 1.085.26 2.11.717 3.017l2.234-1.731z" fill="#FABB05"/><path d="M6.988 2.921c.992 0 1.88.34 2.58 1.008v.001l1.92-1.918C10.324.928 8.804.262 6.989.262a6.728 6.728 0 0 0-6.01 3.702l2.234 1.731c.532-1.592 2.022-2.774 3.776-2.774" fill="#E94235"/></g></svg>
\ No newline at end of file
diff --git a/assets/images/cards/google-pay-preview-light.svg b/assets/images/cards/google-pay-preview-light.svg
deleted file mode 100644
index 758d7c66103..00000000000
--- a/assets/images/cards/google-pay-preview-light.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="41" height="17"><g fill="none" fill-rule="evenodd"><path d="M19.526 2.635v4.083h2.518c.6 0 1.096-.202 1.488-.605.403-.402.605-.882.605-1.437 0-.544-.202-1.018-.605-1.422-.392-.413-.888-.62-1.488-.62h-2.518zm0 5.52v4.736h-1.504V1.198h3.99c1.013 0 1.873.337 2.582 1.012.72.675 1.08 1.497 1.08 2.466 0 .991-.36 1.819-1.08 2.482-.697.665-1.559.996-2.583.996h-2.485v.001zm7.668 2.287c0 .392.166.718.499.98.332.26.722.391 1.168.391.633 0 1.196-.234 1.692-.701.497-.469.744-1.019.744-1.65-.469-.37-1.123-.555-1.962-.555-.61 0-1.12.148-1.528.442-.409.294-.613.657-.613 1.093m1.946-5.815c1.112 0 1.989.297 2.633.89.642.594.964 1.408.964 2.442v4.932h-1.439v-1.11h-.065c-.622.914-1.45 1.372-2.486 1.372-.882 0-1.621-.262-2.215-.784-.594-.523-.891-1.176-.891-1.96 0-.828.313-1.486.94-1.976s1.463-.735 2.51-.735c.892 0 1.629.163 2.206.49v-.344c0-.522-.207-.966-.621-1.33a2.132 2.132 0 0 0-1.455-.547c-.84 0-1.504.353-1.995 1.062l-1.324-.834c.73-1.045 1.81-1.568 3.238-1.568m11.853.262l-5.02 11.53H34.42l1.864-4.034-3.302-7.496h1.635l2.387 5.749h.032l2.322-5.75z" fill="#5F6368"/><path d="M13.448 7.134c0-.473-.04-.93-.116-1.366H6.988v2.588h3.634a3.11 3.11 0 0 1-1.344 2.042v1.68h2.169c1.27-1.17 2.001-2.9 2.001-4.944" fill="#4285F4"/><path d="M6.988 13.7c1.816 0 3.344-.595 4.459-1.621l-2.169-1.681c-.603.406-1.38.643-2.29.643-1.754 0-3.244-1.182-3.776-2.774H.978v1.731a6.728 6.728 0 0 0 6.01 3.703" fill="#34A853"/><path d="M3.212 8.267a4.034 4.034 0 0 1 0-2.572V3.964H.978A6.678 6.678 0 0 0 .261 6.98c0 1.085.26 2.11.717 3.017l2.234-1.731z" fill="#FABB05"/><path d="M6.988 2.921c.992 0 1.88.34 2.58 1.008v.001l1.92-1.918C10.324.928 8.804.262 6.989.262a6.728 6.728 0 0 0-6.01 3.702l2.234 1.731c.532-1.592 2.022-2.774 3.776-2.774" fill="#E94235"/><path d="M0 0h41.285v18H0z"/></g></svg>
\ No newline at end of file
diff --git a/client/tokenized-express-checkout/blocks/components/express-checkout-button-preview.js b/client/tokenized-express-checkout/blocks/components/express-checkout-button-preview.js
index 118aed6d8eb..f10ffcaf0f0 100644
--- a/client/tokenized-express-checkout/blocks/components/express-checkout-button-preview.js
+++ b/client/tokenized-express-checkout/blocks/components/express-checkout-button-preview.js
@@ -1,13 +1,11 @@
 /**
  * External dependencies
  */
-import { useMemo } from 'react';
+import { useEffect, useMemo, useRef } 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 ExpressCheckoutButtonPreview = ( {
@@ -19,14 +17,66 @@ const ExpressCheckoutButtonPreview = ( {
 		() => 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.googlePayClient ) {
+					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',
+				} );
+				ref.current.appendChild( button );
+			} )();
+		}
+	}, [ ref, theme, expressPaymentMethod, borderRadius ] );
+
+	if ( expressPaymentMethod === 'googlePay' ) {
+		return (
+			<div
+				ref={ ref }
+				style={ {
+					height: `${ options.buttonHeight }px`,
+					width: '100%',
+				} }
+			/>
+		);
+	}
 
 	const buttonStyle = {
 		height: `${ options.buttonHeight }px`,
-		borderRadius: appearance.variables.borderRadius,
+		borderRadius,
 	};
 
-	const theme = options.buttonTheme[ expressPaymentMethod ];
-
 	if ( expressPaymentMethod === 'applePay' ) {
 		buttonStyle.WebkitAppearance = '-apple-pay-button';
 		if ( theme === 'black' ) {
@@ -36,26 +86,20 @@ const ExpressCheckoutButtonPreview = ( {
 		} 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 (
+			<div>
+				<button
+					type="button"
+					id={ `express-checkout-button-preview-${ expressPaymentMethod }` }
+					className="express-checkout-button-preview"
+					style={ buttonStyle }
+				/>
+			</div>
+		);
 	}
 
-	return (
-		<button
-			type="button"
-			id={ `express-checkout-button-preview-${ expressPaymentMethod }` }
-			className="express-checkout-button-preview"
-			style={ buttonStyle }
-		/>
-	);
+	return null;
 };
 
 export default ExpressCheckoutButtonPreview;

From 5e9484066dba0442e5b1e14e5ca44149bdafd137 Mon Sep 17 00:00:00 2001
From: Daniel Guerra <daniel.guerra@automattic.com>
Date: Thu, 16 Jan 2025 12:56:12 -0600
Subject: [PATCH 05/16] Add onClick parameter

---
 .../blocks/components/express-checkout-button-preview.js         | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/tokenized-express-checkout/blocks/components/express-checkout-button-preview.js b/client/tokenized-express-checkout/blocks/components/express-checkout-button-preview.js
index f10ffcaf0f0..629070c142b 100644
--- a/client/tokenized-express-checkout/blocks/components/express-checkout-button-preview.js
+++ b/client/tokenized-express-checkout/blocks/components/express-checkout-button-preview.js
@@ -54,6 +54,7 @@ const ExpressCheckoutButtonPreview = ( {
 					buttonColor,
 					buttonRadius: parseFloat( borderRadius ),
 					buttonSizeMode: 'fill',
+					onClick: () => {},
 				} );
 				ref.current.appendChild( button );
 			} )();

From 1fe59841ff4faa5ea17fe0839552ffbc14066fcb Mon Sep 17 00:00:00 2001
From: Daniel Guerra <daniel.guerra@automattic.com>
Date: Thu, 16 Jan 2025 13:07:04 -0600
Subject: [PATCH 06/16] Apply border radius changes

---
 .../blocks/components/express-checkout-button-preview.js    | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/client/tokenized-express-checkout/blocks/components/express-checkout-button-preview.js b/client/tokenized-express-checkout/blocks/components/express-checkout-button-preview.js
index 629070c142b..01506f225c1 100644
--- a/client/tokenized-express-checkout/blocks/components/express-checkout-button-preview.js
+++ b/client/tokenized-express-checkout/blocks/components/express-checkout-button-preview.js
@@ -61,6 +61,12 @@ const ExpressCheckoutButtonPreview = ( {
 		}
 	}, [ ref, theme, expressPaymentMethod, borderRadius ] );
 
+	useEffect( () => {
+		ref.current
+			?.querySelector( 'button' )
+			?.style?.setProperty( 'border-radius', borderRadius );
+	}, [ ref, borderRadius ] );
+
 	if ( expressPaymentMethod === 'googlePay' ) {
 		return (
 			<div

From 2d27578069544d7d4f82feafd98c014c100dc01d Mon Sep 17 00:00:00 2001
From: Daniel Guerra <daniel.guerra@automattic.com>
Date: Thu, 16 Jan 2025 13:09:12 -0600
Subject: [PATCH 07/16] Use correct reference

---
 .../blocks/components/express-checkout-button-preview.js        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/tokenized-express-checkout/blocks/components/express-checkout-button-preview.js b/client/tokenized-express-checkout/blocks/components/express-checkout-button-preview.js
index 01506f225c1..b612e020280 100644
--- a/client/tokenized-express-checkout/blocks/components/express-checkout-button-preview.js
+++ b/client/tokenized-express-checkout/blocks/components/express-checkout-button-preview.js
@@ -32,7 +32,7 @@ const ExpressCheckoutButtonPreview = ( {
 			renderGooglePayButtonPromise.current = ( async () => {
 				const targetDocument = ref.current.ownerDocument;
 				const targetWindow = targetDocument.defaultView;
-				if ( ! targetWindow.googlePayClient ) {
+				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';

From 8b9986c43543b78703712214b96fff9bd6905d9b Mon Sep 17 00:00:00 2001
From: Daniel Guerra <daniel.guerra@automattic.com>
Date: Wed, 22 Jan 2025 09:57:18 -0600
Subject: [PATCH 08/16] Refactor hooks

---
 .../express-checkout-button-preview.js        | 34 +++++++--------
 .../components/express-checkout-component.js  | 43 +++++++++----------
 2 files changed, 38 insertions(+), 39 deletions(-)

diff --git a/client/tokenized-express-checkout/blocks/components/express-checkout-button-preview.js b/client/tokenized-express-checkout/blocks/components/express-checkout-button-preview.js
index b612e020280..a6a94087a27 100644
--- a/client/tokenized-express-checkout/blocks/components/express-checkout-button-preview.js
+++ b/client/tokenized-express-checkout/blocks/components/express-checkout-button-preview.js
@@ -1,36 +1,36 @@
 /**
  * External dependencies
  */
-import { useEffect, useMemo, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 
 /**
  * Internal dependencies
  */
-import { getExpressCheckoutButtonAppearance } from 'wcpay/express-checkout/utils';
+import { getExpressCheckoutButtonAppearance } from '../../utils';
 
 const ExpressCheckoutButtonPreview = ( {
 	expressPaymentMethod,
 	options,
 	buttonAttributes,
 } ) => {
-	const appearance = useMemo(
-		() => getExpressCheckoutButtonAppearance( buttonAttributes ),
-		[ buttonAttributes ]
-	);
-	const ref = useRef( null );
-	const renderGooglePayButtonPromise = useRef( null );
+	const googlePlayContainerRef = useRef( null );
+	const hasStartedLoadingGooglePlayButton = useRef( null );
 
 	const theme = options.buttonTheme[ expressPaymentMethod ];
+	const appearance = getExpressCheckoutButtonAppearance( buttonAttributes );
 	const borderRadius = appearance.variables.borderRadius;
 
 	useEffect( () => {
 		if (
-			ref.current &&
+			googlePlayContainerRef.current &&
 			expressPaymentMethod === 'googlePay' &&
-			! renderGooglePayButtonPromise.current
+			! hasStartedLoadingGooglePlayButton.current
 		) {
-			renderGooglePayButtonPromise.current = ( async () => {
-				const targetDocument = ref.current.ownerDocument;
+			hasStartedLoadingGooglePlayButton.current = true;
+			( async () => {
+				// The container may be inside an iframe, so we need to retrieve a reference to the document and window objects.
+				const targetDocument =
+					googlePlayContainerRef.current.ownerDocument;
 				const targetWindow = targetDocument.defaultView;
 				if ( ! targetWindow.google?.payments?.api?.PaymentsClient ) {
 					await new Promise( ( resolve ) => {
@@ -56,21 +56,21 @@ const ExpressCheckoutButtonPreview = ( {
 					buttonSizeMode: 'fill',
 					onClick: () => {},
 				} );
-				ref.current.appendChild( button );
+				googlePlayContainerRef.current.appendChild( button );
 			} )();
 		}
-	}, [ ref, theme, expressPaymentMethod, borderRadius ] );
+	}, [ theme, expressPaymentMethod, borderRadius ] );
 
 	useEffect( () => {
-		ref.current
+		googlePlayContainerRef.current
 			?.querySelector( 'button' )
 			?.style?.setProperty( 'border-radius', borderRadius );
-	}, [ ref, borderRadius ] );
+	}, [ borderRadius ] );
 
 	if ( expressPaymentMethod === 'googlePay' ) {
 		return (
 			<div
-				ref={ ref }
+				ref={ googlePlayContainerRef }
 				style={ {
 					height: `${ options.buttonHeight }px`,
 					width: '100%',
diff --git a/client/tokenized-express-checkout/blocks/components/express-checkout-component.js b/client/tokenized-express-checkout/blocks/components/express-checkout-component.js
index 86c86a652fd..2bd1d325c44 100644
--- a/client/tokenized-express-checkout/blocks/components/express-checkout-component.js
+++ b/client/tokenized-express-checkout/blocks/components/express-checkout-component.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { ExpressCheckoutElement } from '@stripe/react-stripe-js';
 /**
  * Internal dependencies
@@ -125,26 +125,6 @@ const ExpressCheckoutComponent = ( {
 		onReady( event );
 	};
 
-	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 {
-			...withBlockOverride(),
-			...adjustButtonHeights( withBlockOverride(), expressPaymentMethod ),
-			...getPaymentMethodsOverride( expressPaymentMethod ),
-		};
-	}, [ expressPaymentMethod, buttonAttributes, buttonOptions ] );
-
 	useEffect( () => {
 		if ( ! isPreview || onElementsReadyCalled.current ) {
 			return;
@@ -157,7 +137,26 @@ const ExpressCheckoutComponent = ( {
 		}, FALLBACK_BUTTON_WAIT_TIME );
 
 		return () => clearTimeout( handle );
-	}, [ isPreview, onElementsReadyCalled ] );
+	}, [ isPreview ] );
+
+	// 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,
+		};
+	};
+
+	const checkoutElementOptions = {
+		...withBlockOverride(),
+		...adjustButtonHeights( withBlockOverride(), expressPaymentMethod ),
+		...getPaymentMethodsOverride( expressPaymentMethod ),
+	};
 
 	if ( showFallbackButton ) {
 		return (

From 987368ad2cd694b1276180c5407dfc8ec6d20e41 Mon Sep 17 00:00:00 2001
From: Daniel Guerra <daniel.guerra@automattic.com>
Date: Wed, 22 Jan 2025 10:25:12 -0600
Subject: [PATCH 09/16] Add button types to the previews

---
 .../components/express-checkout-button-preview.js      | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/client/tokenized-express-checkout/blocks/components/express-checkout-button-preview.js b/client/tokenized-express-checkout/blocks/components/express-checkout-button-preview.js
index a6a94087a27..d5204a76a71 100644
--- a/client/tokenized-express-checkout/blocks/components/express-checkout-button-preview.js
+++ b/client/tokenized-express-checkout/blocks/components/express-checkout-button-preview.js
@@ -50,7 +50,7 @@ const ExpressCheckoutButtonPreview = ( {
 				const buttonColor = theme === 'black' ? 'black' : 'white'; // There is no 'outline' theme in Google Pay.
 
 				const button = googlePayClient.createButton( {
-					buttonType: 'plain',
+					buttonType: options.buttonType.googlePay,
 					buttonColor,
 					buttonRadius: parseFloat( borderRadius ),
 					buttonSizeMode: 'fill',
@@ -59,7 +59,12 @@ const ExpressCheckoutButtonPreview = ( {
 				googlePlayContainerRef.current.appendChild( button );
 			} )();
 		}
-	}, [ theme, expressPaymentMethod, borderRadius ] );
+	}, [
+		theme,
+		expressPaymentMethod,
+		borderRadius,
+		options.buttonType.googlePay,
+	] );
 
 	useEffect( () => {
 		googlePlayContainerRef.current
@@ -82,6 +87,7 @@ const ExpressCheckoutButtonPreview = ( {
 	const buttonStyle = {
 		height: `${ options.buttonHeight }px`,
 		borderRadius,
+		ApplePayButtonType: options.buttonType.applePay,
 	};
 
 	if ( expressPaymentMethod === 'applePay' ) {

From bc6a1a05dfa6236e63d6f38091fa8a1c27f0f662 Mon Sep 17 00:00:00 2001
From: Daniel Guerra <daniel.guerra@automattic.com>
Date: Wed, 22 Jan 2025 11:25:25 -0600
Subject: [PATCH 10/16] Always display the preview component when isPreview is
 true

---
 .../components/express-checkout-component.js  | 22 +------------------
 1 file changed, 1 insertion(+), 21 deletions(-)

diff --git a/client/tokenized-express-checkout/blocks/components/express-checkout-component.js b/client/tokenized-express-checkout/blocks/components/express-checkout-component.js
index 2bd1d325c44..84a53e2846d 100644
--- a/client/tokenized-express-checkout/blocks/components/express-checkout-component.js
+++ b/client/tokenized-express-checkout/blocks/components/express-checkout-component.js
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { useEffect, useRef, useState } from 'react';
 import { ExpressCheckoutElement } from '@stripe/react-stripe-js';
 /**
  * Internal dependencies
@@ -14,8 +13,6 @@ 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 = {
 		amazonPay: 'never',
@@ -97,8 +94,6 @@ const ExpressCheckoutComponent = ( {
 		onClose,
 		setExpressPaymentError,
 	} );
-	const [ showFallbackButton, setShowFallbackButton ] = useState( false );
-	const onElementsReadyCalled = useRef( false );
 	const onClickHandler = ! isPreview ? onButtonClick : () => {};
 	const onShippingAddressChange = ( event ) =>
 		shippingAddressChangeHandler( event, elements );
@@ -107,7 +102,6 @@ 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 }`
 		);
@@ -125,20 +119,6 @@ const ExpressCheckoutComponent = ( {
 		onReady( event );
 	};
 
-	useEffect( () => {
-		if ( ! isPreview || onElementsReadyCalled.current ) {
-			return;
-		}
-
-		const handle = setTimeout( () => {
-			if ( ! onElementsReadyCalled.current ) {
-				setShowFallbackButton( true );
-			}
-		}, FALLBACK_BUTTON_WAIT_TIME );
-
-		return () => clearTimeout( handle );
-	}, [ isPreview ] );
-
 	// The Cart & Checkout blocks provide unified styles across all buttons,
 	// which should override the extension specific settings.
 	const withBlockOverride = () => {
@@ -158,7 +138,7 @@ const ExpressCheckoutComponent = ( {
 		...getPaymentMethodsOverride( expressPaymentMethod ),
 	};
 
-	if ( showFallbackButton ) {
+	if ( isPreview ) {
 		return (
 			<ExpressCheckoutButtonPreview
 				expressPaymentMethod={ expressPaymentMethod }

From aaa14f8360a03b9652de92516ef97254b75c55e1 Mon Sep 17 00:00:00 2001
From: Daniel Guerra <daniel.guerra@automattic.com>
Date: Wed, 22 Jan 2025 11:31:49 -0600
Subject: [PATCH 11/16] Remove unnecessary styles

---
 .../components/express-checkout-button-preview.js | 15 ++++++++-------
 .../blocks/express-checkout-element.scss          | 14 --------------
 2 files changed, 8 insertions(+), 21 deletions(-)

diff --git a/client/tokenized-express-checkout/blocks/components/express-checkout-button-preview.js b/client/tokenized-express-checkout/blocks/components/express-checkout-button-preview.js
index d5204a76a71..16cf421d7d1 100644
--- a/client/tokenized-express-checkout/blocks/components/express-checkout-button-preview.js
+++ b/client/tokenized-express-checkout/blocks/components/express-checkout-button-preview.js
@@ -84,14 +84,15 @@ const ExpressCheckoutButtonPreview = ( {
 		);
 	}
 
-	const buttonStyle = {
-		height: `${ options.buttonHeight }px`,
-		borderRadius,
-		ApplePayButtonType: options.buttonType.applePay,
-	};
-
 	if ( expressPaymentMethod === 'applePay' ) {
-		buttonStyle.WebkitAppearance = '-apple-pay-button';
+		const buttonStyle = {
+			height: `${ options.buttonHeight }px`,
+			borderRadius,
+			ApplePayButtonType: options.buttonType.applePay,
+			WebkitAppearance: '-apple-pay-button',
+			width: '100%',
+		};
+
 		if ( theme === 'black' ) {
 			buttonStyle.ApplePayButtonStyle = 'black';
 		} else if ( theme === 'outline' ) {
diff --git a/client/tokenized-express-checkout/blocks/express-checkout-element.scss b/client/tokenized-express-checkout/blocks/express-checkout-element.scss
index f4ef690bb3c..47a547db7c2 100644
--- a/client/tokenized-express-checkout/blocks/express-checkout-element.scss
+++ b/client/tokenized-express-checkout/blocks/express-checkout-element.scss
@@ -29,17 +29,3 @@
 		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;
-}

From 3fa843ef6ff774484aa5f0613bee5d6540e62abe Mon Sep 17 00:00:00 2001
From: Daniel Guerra <daniel.guerra@automattic.com>
Date: Fri, 24 Jan 2025 10:28:16 -0600
Subject: [PATCH 12/16] Fix issue with outline theme

---
 .../blocks/components/express-checkout-button-preview.js    | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/client/tokenized-express-checkout/blocks/components/express-checkout-button-preview.js b/client/tokenized-express-checkout/blocks/components/express-checkout-button-preview.js
index 16cf421d7d1..4f35e95164c 100644
--- a/client/tokenized-express-checkout/blocks/components/express-checkout-button-preview.js
+++ b/client/tokenized-express-checkout/blocks/components/express-checkout-button-preview.js
@@ -93,10 +93,8 @@ const ExpressCheckoutButtonPreview = ( {
 			width: '100%',
 		};
 
-		if ( theme === 'black' ) {
-			buttonStyle.ApplePayButtonStyle = 'black';
-		} else if ( theme === 'outline' ) {
-			buttonStyle.ApplePayButtonStyle = 'white-outline';
+		if ( [ 'black', 'white', 'white-outline' ].includes( theme ) ) {
+			buttonStyle.ApplePayButtonStyle = theme;
 		} else {
 			buttonStyle.ApplePayButtonStyle = 'white';
 		}

From 03012525c9d1419598e6f888c3eb6dd09291d0f6 Mon Sep 17 00:00:00 2001
From: Daniel Guerra <daniel.guerra@automattic.com>
Date: Fri, 24 Jan 2025 11:44:56 -0600
Subject: [PATCH 13/16] Separate components

---
 .../express-checkout-button-preview.js        | 102 ++++++++++--------
 1 file changed, 60 insertions(+), 42 deletions(-)

diff --git a/client/tokenized-express-checkout/blocks/components/express-checkout-button-preview.js b/client/tokenized-express-checkout/blocks/components/express-checkout-button-preview.js
index 4f35e95164c..76cb9ea30b1 100644
--- a/client/tokenized-express-checkout/blocks/components/express-checkout-button-preview.js
+++ b/client/tokenized-express-checkout/blocks/components/express-checkout-button-preview.js
@@ -8,22 +8,15 @@ import { useEffect, useRef } from 'react';
  */
 import { getExpressCheckoutButtonAppearance } from '../../utils';
 
-const ExpressCheckoutButtonPreview = ( {
-	expressPaymentMethod,
-	options,
-	buttonAttributes,
-} ) => {
+const GooglePayButtonPreview = ( { options, buttonAttributes, theme } ) => {
 	const googlePlayContainerRef = useRef( null );
 	const hasStartedLoadingGooglePlayButton = useRef( null );
-
-	const theme = options.buttonTheme[ expressPaymentMethod ];
 	const appearance = getExpressCheckoutButtonAppearance( buttonAttributes );
 	const borderRadius = appearance.variables.borderRadius;
 
 	useEffect( () => {
 		if (
 			googlePlayContainerRef.current &&
-			expressPaymentMethod === 'googlePay' &&
 			! hasStartedLoadingGooglePlayButton.current
 		) {
 			hasStartedLoadingGooglePlayButton.current = true;
@@ -59,12 +52,7 @@ const ExpressCheckoutButtonPreview = ( {
 				googlePlayContainerRef.current.appendChild( button );
 			} )();
 		}
-	}, [
-		theme,
-		expressPaymentMethod,
-		borderRadius,
-		options.buttonType.googlePay,
-	] );
+	}, [ theme, borderRadius, options.buttonType.googlePay ] );
 
 	useEffect( () => {
 		googlePlayContainerRef.current
@@ -72,42 +60,72 @@ const ExpressCheckoutButtonPreview = ( {
 			?.style?.setProperty( 'border-radius', borderRadius );
 	}, [ borderRadius ] );
 
+	return (
+		<div
+			ref={ googlePlayContainerRef }
+			id="express-checkout-button-preview-googlePay"
+			style={ {
+				height: `${ options.buttonHeight }px`,
+				width: '100%',
+			} }
+		/>
+	);
+};
+
+const ApplePayButtonPreview = ( { options, buttonAttributes, theme } ) => {
+	const appearance = getExpressCheckoutButtonAppearance( buttonAttributes );
+	const borderRadius = appearance.variables.borderRadius;
+
+	const buttonStyle = {
+		height: `${ options.buttonHeight }px`,
+		borderRadius,
+		ApplePayButtonType: options.buttonType.applePay,
+		WebkitAppearance: '-apple-pay-button',
+		width: '100%',
+	};
+
+	if ( [ 'black', 'white', 'white-outline' ].includes( theme ) ) {
+		buttonStyle.ApplePayButtonStyle = theme;
+	} else {
+		buttonStyle.ApplePayButtonStyle = 'white';
+	}
+
+	return (
+		<div>
+			<button
+				type="button"
+				id="express-checkout-button-preview-applePay"
+				className="express-checkout-button-preview"
+				style={ buttonStyle }
+			/>
+		</div>
+	);
+};
+
+const ExpressCheckoutButtonPreview = ( {
+	expressPaymentMethod,
+	options,
+	buttonAttributes,
+} ) => {
+	const theme = options.buttonTheme[ expressPaymentMethod ];
+
 	if ( expressPaymentMethod === 'googlePay' ) {
 		return (
-			<div
-				ref={ googlePlayContainerRef }
-				style={ {
-					height: `${ options.buttonHeight }px`,
-					width: '100%',
-				} }
+			<GooglePayButtonPreview
+				options={ options }
+				buttonAttributes={ buttonAttributes }
+				theme={ theme }
 			/>
 		);
 	}
 
 	if ( expressPaymentMethod === 'applePay' ) {
-		const buttonStyle = {
-			height: `${ options.buttonHeight }px`,
-			borderRadius,
-			ApplePayButtonType: options.buttonType.applePay,
-			WebkitAppearance: '-apple-pay-button',
-			width: '100%',
-		};
-
-		if ( [ 'black', 'white', 'white-outline' ].includes( theme ) ) {
-			buttonStyle.ApplePayButtonStyle = theme;
-		} else {
-			buttonStyle.ApplePayButtonStyle = 'white';
-		}
-
 		return (
-			<div>
-				<button
-					type="button"
-					id={ `express-checkout-button-preview-${ expressPaymentMethod }` }
-					className="express-checkout-button-preview"
-					style={ buttonStyle }
-				/>
-			</div>
+			<ApplePayButtonPreview
+				options={ options }
+				buttonAttributes={ buttonAttributes }
+				theme={ theme }
+			/>
 		);
 	}
 

From d22ea91cca88a1eae0bc51a9d4f08617ad674bd2 Mon Sep 17 00:00:00 2001
From: Daniel Guerra <daniel.guerra@automattic.com>
Date: Fri, 24 Jan 2025 11:47:00 -0600
Subject: [PATCH 14/16] Remove conditional assignment for onClick handler

---
 .../blocks/components/express-checkout-component.js            | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/client/tokenized-express-checkout/blocks/components/express-checkout-component.js b/client/tokenized-express-checkout/blocks/components/express-checkout-component.js
index 84a53e2846d..0ed67fa1813 100644
--- a/client/tokenized-express-checkout/blocks/components/express-checkout-component.js
+++ b/client/tokenized-express-checkout/blocks/components/express-checkout-component.js
@@ -94,7 +94,6 @@ const ExpressCheckoutComponent = ( {
 		onClose,
 		setExpressPaymentError,
 	} );
-	const onClickHandler = ! isPreview ? onButtonClick : () => {};
 	const onShippingAddressChange = ( event ) =>
 		shippingAddressChangeHandler( event, elements );
 
@@ -151,7 +150,7 @@ const ExpressCheckoutComponent = ( {
 	return (
 		<ExpressCheckoutElement
 			options={ checkoutElementOptions }
-			onClick={ onClickHandler }
+			onClick={ onButtonClick }
 			onConfirm={ onConfirm }
 			onReady={ onElementsReady }
 			onCancel={ onCancel }

From f26c0ad1426bb154bcf5b0c83567d6d5418587d0 Mon Sep 17 00:00:00 2001
From: Daniel Guerra <daniel.guerra@automattic.com>
Date: Thu, 30 Jan 2025 07:47:07 -0600
Subject: [PATCH 15/16] Only use the preview components if the express payment
 method is supported

---
 .../components/express-checkout-button-preview.js    |  2 ++
 .../blocks/components/express-checkout-component.js  | 12 +++++++++---
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/client/tokenized-express-checkout/blocks/components/express-checkout-button-preview.js b/client/tokenized-express-checkout/blocks/components/express-checkout-button-preview.js
index 76cb9ea30b1..f7103875833 100644
--- a/client/tokenized-express-checkout/blocks/components/express-checkout-button-preview.js
+++ b/client/tokenized-express-checkout/blocks/components/express-checkout-button-preview.js
@@ -8,6 +8,8 @@ import { useEffect, useRef } from 'react';
  */
 import { getExpressCheckoutButtonAppearance } from '../../utils';
 
+export const SUPPORTED_PREVIEW_PAYMENT_METHODS = [ 'googlePay', 'applePay' ];
+
 const GooglePayButtonPreview = ( { options, buttonAttributes, theme } ) => {
 	const googlePlayContainerRef = useRef( null );
 	const hasStartedLoadingGooglePlayButton = useRef( null );
diff --git a/client/tokenized-express-checkout/blocks/components/express-checkout-component.js b/client/tokenized-express-checkout/blocks/components/express-checkout-component.js
index 0ed67fa1813..b794b083e0b 100644
--- a/client/tokenized-express-checkout/blocks/components/express-checkout-component.js
+++ b/client/tokenized-express-checkout/blocks/components/express-checkout-component.js
@@ -11,7 +11,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';
+import ExpressCheckoutButtonPreview, {
+	SUPPORTED_PREVIEW_PAYMENT_METHODS,
+} from './express-checkout-button-preview';
 
 const getPaymentMethodsOverride = ( enabledPaymentMethod ) => {
 	const allDisabled = {
@@ -94,6 +96,7 @@ const ExpressCheckoutComponent = ( {
 		onClose,
 		setExpressPaymentError,
 	} );
+	const onClickHandler = ! isPreview ? onButtonClick : () => {};
 	const onShippingAddressChange = ( event ) =>
 		shippingAddressChangeHandler( event, elements );
 
@@ -137,7 +140,10 @@ const ExpressCheckoutComponent = ( {
 		...getPaymentMethodsOverride( expressPaymentMethod ),
 	};
 
-	if ( isPreview ) {
+	if (
+		isPreview &&
+		SUPPORTED_PREVIEW_PAYMENT_METHODS.includes( expressPaymentMethod )
+	) {
 		return (
 			<ExpressCheckoutButtonPreview
 				expressPaymentMethod={ expressPaymentMethod }
@@ -150,7 +156,7 @@ const ExpressCheckoutComponent = ( {
 	return (
 		<ExpressCheckoutElement
 			options={ checkoutElementOptions }
-			onClick={ onButtonClick }
+			onClick={ onClickHandler }
 			onConfirm={ onConfirm }
 			onReady={ onElementsReady }
 			onCancel={ onCancel }

From 120794a1075867a12af6baa1c3ca6b6cec9e4fd2 Mon Sep 17 00:00:00 2001
From: Daniel Guerra <daniel.guerra@automattic.com>
Date: Thu, 27 Feb 2025 12:08:45 -0600
Subject: [PATCH 16/16] Implement previews for non-tokenized ECE

---
 .../express-checkout-button-preview.js        | 137 ++++++++++++++++++
 .../components/express-checkout-component.js  |  31 +++-
 .../blocks/express-checkout-element.scss      |   8 +
 3 files changed, 168 insertions(+), 8 deletions(-)
 create mode 100644 client/express-checkout/blocks/components/express-checkout-button-preview.js

diff --git a/client/express-checkout/blocks/components/express-checkout-button-preview.js b/client/express-checkout/blocks/components/express-checkout-button-preview.js
new file mode 100644
index 00000000000..f7103875833
--- /dev/null
+++ b/client/express-checkout/blocks/components/express-checkout-button-preview.js
@@ -0,0 +1,137 @@
+/**
+ * External dependencies
+ */
+import { useEffect, useRef } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { getExpressCheckoutButtonAppearance } from '../../utils';
+
+export const SUPPORTED_PREVIEW_PAYMENT_METHODS = [ 'googlePay', 'applePay' ];
+
+const GooglePayButtonPreview = ( { options, buttonAttributes, theme } ) => {
+	const googlePlayContainerRef = useRef( null );
+	const hasStartedLoadingGooglePlayButton = useRef( null );
+	const appearance = getExpressCheckoutButtonAppearance( buttonAttributes );
+	const borderRadius = appearance.variables.borderRadius;
+
+	useEffect( () => {
+		if (
+			googlePlayContainerRef.current &&
+			! hasStartedLoadingGooglePlayButton.current
+		) {
+			hasStartedLoadingGooglePlayButton.current = true;
+			( async () => {
+				// The container may be inside an iframe, so we need to retrieve a reference to the document and window objects.
+				const targetDocument =
+					googlePlayContainerRef.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: options.buttonType.googlePay,
+					buttonColor,
+					buttonRadius: parseFloat( borderRadius ),
+					buttonSizeMode: 'fill',
+					onClick: () => {},
+				} );
+				googlePlayContainerRef.current.appendChild( button );
+			} )();
+		}
+	}, [ theme, borderRadius, options.buttonType.googlePay ] );
+
+	useEffect( () => {
+		googlePlayContainerRef.current
+			?.querySelector( 'button' )
+			?.style?.setProperty( 'border-radius', borderRadius );
+	}, [ borderRadius ] );
+
+	return (
+		<div
+			ref={ googlePlayContainerRef }
+			id="express-checkout-button-preview-googlePay"
+			style={ {
+				height: `${ options.buttonHeight }px`,
+				width: '100%',
+			} }
+		/>
+	);
+};
+
+const ApplePayButtonPreview = ( { options, buttonAttributes, theme } ) => {
+	const appearance = getExpressCheckoutButtonAppearance( buttonAttributes );
+	const borderRadius = appearance.variables.borderRadius;
+
+	const buttonStyle = {
+		height: `${ options.buttonHeight }px`,
+		borderRadius,
+		ApplePayButtonType: options.buttonType.applePay,
+		WebkitAppearance: '-apple-pay-button',
+		width: '100%',
+	};
+
+	if ( [ 'black', 'white', 'white-outline' ].includes( theme ) ) {
+		buttonStyle.ApplePayButtonStyle = theme;
+	} else {
+		buttonStyle.ApplePayButtonStyle = 'white';
+	}
+
+	return (
+		<div>
+			<button
+				type="button"
+				id="express-checkout-button-preview-applePay"
+				className="express-checkout-button-preview"
+				style={ buttonStyle }
+			/>
+		</div>
+	);
+};
+
+const ExpressCheckoutButtonPreview = ( {
+	expressPaymentMethod,
+	options,
+	buttonAttributes,
+} ) => {
+	const theme = options.buttonTheme[ expressPaymentMethod ];
+
+	if ( expressPaymentMethod === 'googlePay' ) {
+		return (
+			<GooglePayButtonPreview
+				options={ options }
+				buttonAttributes={ buttonAttributes }
+				theme={ theme }
+			/>
+		);
+	}
+
+	if ( expressPaymentMethod === 'applePay' ) {
+		return (
+			<ApplePayButtonPreview
+				options={ options }
+				buttonAttributes={ buttonAttributes }
+				theme={ theme }
+			/>
+		);
+	}
+
+	return null;
+};
+
+export default ExpressCheckoutButtonPreview;
diff --git a/client/express-checkout/blocks/components/express-checkout-component.js b/client/express-checkout/blocks/components/express-checkout-component.js
index bccfee2eb93..02d99524acd 100644
--- a/client/express-checkout/blocks/components/express-checkout-component.js
+++ b/client/express-checkout/blocks/components/express-checkout-component.js
@@ -11,6 +11,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, {
+	SUPPORTED_PREVIEW_PAYMENT_METHODS,
+} from './express-checkout-button-preview';
 
 const getPaymentMethodsOverride = ( enabledPaymentMethod ) => {
 	const allDisabled = {
@@ -131,16 +134,28 @@ const ExpressCheckoutComponent = ( {
 		};
 	};
 
+	const checkoutElementOptions = {
+		...withBlockOverride(),
+		...adjustButtonHeights( withBlockOverride(), expressPaymentMethod ),
+		...getPaymentMethodsOverride( expressPaymentMethod ),
+	};
+
+	if (
+		isPreview &&
+		SUPPORTED_PREVIEW_PAYMENT_METHODS.includes( expressPaymentMethod )
+	) {
+		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 }
diff --git a/client/express-checkout/blocks/express-checkout-element.scss b/client/express-checkout/blocks/express-checkout-element.scss
index 4b4e3d5e29e..47a547db7c2 100644
--- a/client/express-checkout/blocks/express-checkout-element.scss
+++ b/client/express-checkout/blocks/express-checkout-element.scss
@@ -21,3 +21,11 @@
 	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;
+	}
+}