Show ECE button in settings preview

changelog.txt

@@ -15,6 +15,7 @@
 * Tweak - Add error logging in ECE critical Ajax requests.
 * Add - Add support for Stripe Link payments via the new Stripe Checkout Element on the block cart and block checkout pages.
 * Add - Add support for Stripe Link payments via the new Stripe Checkout Element on the product, cart, checkout and pay for order pages.
+* Add - Show ECE button preview on settings page.
 * Tweak - Remove the subscription order notes added each time a source wasn't migrated.
 
 = 8.8.1 - 2024-10-28 =

client/entrypoints/payment-request-settings/__tests__/payment-request-settings-locations.test.js

@@ -55,6 +55,8 @@ const getMockPaymentRequestLocations = (
 ];
 
 describe( 'PaymentRequestsSettingsSection', () => {
+	const globalValues = global.wc_stripe_payment_request_settings_params;
+
 	beforeEach( () => {
 		usePaymentRequestEnabledSettings.mockReturnValue(
 			getMockPaymentRequestEnabledSettings( true, jest.fn() )
@@ -63,6 +65,18 @@ describe( 'PaymentRequestsSettingsSection', () => {
 		usePaymentRequestLocations.mockReturnValue(
 			getMockPaymentRequestLocations( true, true, true, jest.fn() )
 		);
+
+		global.wc_stripe_payment_request_settings_params = {
+			...globalValues,
+			key: 'pk_test_123',
+			locale: 'en',
+			is_ece_enabled: true,
+		};
+	} );
+
+	afterEach( () => {
+		jest.clearAllMocks();
+		global.wc_stripe_payment_request_settings_params = globalValues;
 	} );
 
 	it( 'should enable express checkout locations when express checkout is enabled', () => {

client/entrypoints/payment-request-settings/__tests__/payment-request-settings.test.js

@@ -57,6 +57,7 @@ const getMockPaymentRequestLocations = (
 ];
 
 describe( 'PaymentRequestsSettingsSection', () => {
+	const globalValues = global.wc_stripe_payment_request_settings_params;
 	beforeEach( () => {
 		usePaymentRequestEnabledSettings.mockReturnValue(
 			getMockPaymentRequestEnabledSettings( true, jest.fn() )
@@ -65,6 +66,18 @@ describe( 'PaymentRequestsSettingsSection', () => {
 		usePaymentRequestLocations.mockReturnValue(
 			getMockPaymentRequestLocations( true, true, true, jest.fn() )
 		);
+
+		global.wc_stripe_payment_request_settings_params = {
+			...globalValues,
+			key: 'pk_test_123',
+			locale: 'en',
+			is_ece_enabled: true,
+		};
+	} );
+
+	afterEach( () => {
+		jest.clearAllMocks();
+		global.wc_stripe_payment_request_settings_params = globalValues;
 	} );
 
 	it( 'renders settings with defaults', () => {

client/entrypoints/payment-request-settings/express-checkout-button-preview.js

@@ -0,0 +1,116 @@
+/* global wc_stripe_payment_request_settings_params */
+
+import { __ } from '@wordpress/i18n';
+import { useState, useMemo } from 'react';
+import { Elements, ExpressCheckoutElement } from '@stripe/react-stripe-js';
+import { loadStripe } from '@stripe/stripe-js';
+import { getDefaultBorderRadius } from 'wcstripe/express-checkout/utils';
+import InlineNotice from 'components/inline-notice';
+
+const buttonSizeToPxMap = {
+	small: 40,
+	default: 48,
+	large: 56,
+};
+
+const ExpressCheckoutPreviewComponent = ( { buttonType, theme, size } ) => {
+	const [ canRenderButtons, setCanRenderButtons ] = useState( true );
+
+	/* eslint-disable camelcase */
+	const stripePromise = useMemo( () => {
+		return loadStripe( wc_stripe_payment_request_settings_params.key, {
+			locale: wc_stripe_payment_request_settings_params.locale,
+		} );
+	}, [] );
+	/* eslint-enable camelcase */
+
+	const options = {
+		mode: 'payment',
+		amount: 1000,
+		currency: 'usd',
+		appearance: {
+			variables: {
+				borderRadius: `${ getDefaultBorderRadius() }px`,
+				spacingUnit: '6px',
+			},
+		},
+	};
+
+	const height = buttonSizeToPxMap[ size ] || buttonSizeToPxMap.medium;
+
+	const mapThemeConfigToButtonTheme = ( paymentMethod, buttonTheme ) => {
+		switch ( buttonTheme ) {
+			case 'dark':
+				return 'black';
+			case 'light':
+				return 'white';
+			case 'light-outline':
+				if ( paymentMethod === 'googlePay' ) {
+					return 'white';
+				}
+
+				return 'white-outline';
+			default:
+				return 'black';
+		}
+	};
+
+	const type = buttonType === 'default' ? 'plain' : buttonType;
+
+	const buttonOptions = {
+		buttonHeight: Math.min( Math.max( height, 40 ), 55 ),
+		buttonTheme: {
+			googlePay: mapThemeConfigToButtonTheme( 'googlePay', theme ),
+			applePay: mapThemeConfigToButtonTheme( 'applePay', theme ),
+		},
+		buttonType: {
+			googlePay: type,
+			applePay: type,
+		},
+		paymentMethods: {
+			link: 'never',
+			googlePay: 'always',
+			applePay: 'always',
+		},
+		layout: { overflow: 'never' },
+	};
+
+	const onReady = ( { availablePaymentMethods } ) => {
+		if ( availablePaymentMethods ) {
+			setCanRenderButtons( true );
+		} else {
+			setCanRenderButtons( false );
+		}
+	};
+
+	if ( canRenderButtons ) {
+		return (
+			<div
+				key={ `${ buttonType }-${ theme }` }
+				style={ { minHeight: `${ height }px`, width: '100%' } }
+			>
+				<Elements stripe={ stripePromise } options={ options }>
+					<ExpressCheckoutElement
+						options={ buttonOptions }
+						onClick={ () => {} }
+						onReady={ onReady }
+					/>
+				</Elements>
+			</div>
+		);
+	}
+
+	return (
+		<InlineNotice icon status="error" isDismissible={ false }>
+			{ __(
+				'Failed to preview the Apple Pay or Google Pay button. ' +
+					'Ensure your store uses HTTPS on a publicly available domain ' +
+					"and you're viewing this page in a Safari or Chrome browser. " +
+					'Your device must be configured to use Apple Pay or Google Pay.',
+				'woocommerce-gateway-stripe'
+			) }
+		</InlineNotice>
+	);
+};
+
+export default ExpressCheckoutPreviewComponent;

client/entrypoints/payment-request-settings/payment-request-settings-section.js

@@ -1,3 +1,5 @@
+/* global wc_stripe_payment_request_settings_params */
+
 import { ADMIN_URL, getSetting } from '@woocommerce/settings';
 import { __ } from '@wordpress/i18n';
 import React, { useMemo } from 'react';
@@ -11,6 +13,7 @@ import interpolateComponents from 'interpolate-components';
 import { Elements } from '@stripe/react-stripe-js';
 import { loadStripe } from '@stripe/stripe-js';
 import PaymentRequestButtonPreview from './payment-request-button-preview';
+import ExpressCheckoutPreviewComponent from './express-checkout-button-preview';
 import {
 	usePaymentRequestEnabledSettings,
 	usePaymentRequestLocations,
@@ -130,6 +133,8 @@ const PaymentRequestsSettingsSection = () => {
 	const accountId = useAccount().data?.account?.id;
 	const [ publishableKey ] = useAccountKeysPublishableKey();
 	const [ testPublishableKey ] = useAccountKeysTestPublishableKey();
+	const isECEEnabled =
+		wc_stripe_payment_request_settings_params.is_ece_enabled; // eslint-disable-line camelcase
 
 	const stripePromise = useMemo( () => {
 		return loadStripe(
@@ -260,9 +265,18 @@ const PaymentRequestsSettingsSection = () => {
 				/>
 				<p>{ __( 'Preview', 'woocommerce-gateway-stripe' ) }</p>
 				<LoadableAccountSection numLines={ 7 }>
-					<Elements stripe={ stripePromise }>
-						<PaymentRequestButtonPreview />
-					</Elements>
+					{ isECEEnabled ? (
+						<ExpressCheckoutPreviewComponent
+							stripe={ stripePromise }
+							buttonType={ buttonType }
+							theme={ theme }
+							size={ size }
+						/>
+					) : (
+						<Elements stripe={ stripePromise }>
+							<PaymentRequestButtonPreview />
+						</Elements>
+					) }
 				</LoadableAccountSection>
 			</CardBody>
 		</Card>

includes/admin/class-wc-stripe-payment-requests-controller.php

@@ -39,6 +39,18 @@ public function admin_scripts() {
 		);
 		wp_enqueue_script( 'wc-stripe-payment-request-settings' );
 
+		$stripe_settings = WC_Stripe_Helper::get_stripe_settings();
+		$params          = [
+			'key'            => 'yes' === $stripe_settings['testmode'] ? $stripe_settings['test_publishable_key'] : $stripe_settings['publishable_key'],
+			'locale'         => WC_Stripe_Helper::convert_wc_locale_to_stripe_locale( get_locale() ),
+			'is_ece_enabled' => WC_Stripe_Feature_Flags::is_stripe_ece_enabled(),
+		];
+		wp_localize_script(
+			'wc-stripe-payment-request-settings',
+			'wc_stripe_payment_request_settings_params',
+			$params
+		);
+
 		wp_register_style(
 			'wc-stripe-payment-request-settings',
 			plugins_url( 'build/payment_requests_settings.css', WC_STRIPE_MAIN_FILE ),

readme.txt

@@ -125,6 +125,7 @@ If you get stuck, you can ask for help in the [Plugin Forum](https://wordpress.o
 * Tweak - Add error logging in ECE critical Ajax requests.
 * Add - Add support for Stripe Link payments via the new Stripe Checkout Element on the block cart and block checkout pages.
 * Add - Add support for Stripe Link payments via the new Stripe Checkout Element on the product, cart, checkout and pay for order pages.
+* Add - Show ECE button preview on settings page.
 * Tweak - Remove the subscription order notes added each time a source wasn't migrated.
 
 [See changelog for all versions](https://raw.githubusercontent.com/woocommerce/woocommerce-gateway-stripe/trunk/changelog.txt).