feat: dynamic place order button - all changes

changelog/fix-subscriptions-with-free-trial-ece

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+fix: ensure that subscriptions with free trials are consistently handled by the ECE

client/checkout/blocks/index.js

@@ -19,9 +19,8 @@ import PaymentMethodLabel from './payment-method-label';
 import request from '../utils/request';
 import enqueueFraudScripts from 'fraud-scripts';
 import {
-	expressCheckoutElementApplePay,
-	expressCheckoutElementGooglePay,
-	expressCheckoutElementAmazonPay,
+	makeExpressCheckoutElement,
+	makeDynamicPlaceOrderButton,
 } from 'wcpay/express-checkout/blocks';
 
 import { getDeferredIntentCreationUPEFields } from './payment-elements';
@@ -46,8 +45,11 @@ const api = new WCPayAPI(
 	request
 );
 
+const EXPRESS_CHECKOUT_METHODS = [ 'apple_pay', 'google_pay', 'amazon_pay' ];
+
 Object.entries( enabledPaymentMethodsConfig )
 	.filter( ( [ upeName ] ) => upeName !== 'link' )
+	.filter( ( [ upeName ] ) => ! EXPRESS_CHECKOUT_METHODS.includes( upeName ) )
 	.forEach( ( [ upeName, upeConfig ] ) => {
 		// Label component renders the payment method title using the standard
 		// PaymentMethodLabel from WooCommerce Blocks, with icons as a sibling
@@ -137,16 +139,39 @@ if (
 	getUPEConfig( 'isPaymentRequestEnabled' ) &&
 	! getUPEConfig( 'isExpressCheckoutInPaymentMethodsEnabled' )
 ) {
-	registerExpressPaymentMethod( expressCheckoutElementApplePay( api ) );
-	registerExpressPaymentMethod( expressCheckoutElementGooglePay( api ) );
+	registerExpressPaymentMethod(
+		makeExpressCheckoutElement( api, 'applePay' )
+	);
+	registerExpressPaymentMethod(
+		makeExpressCheckoutElement( api, 'googlePay' )
+	);
 }
 
 if (
 	getUPEConfig( 'isAmazonPayEnabled' ) &&
 	! getUPEConfig( 'isExpressCheckoutInPaymentMethodsEnabled' )
 ) {
-	registerExpressPaymentMethod( expressCheckoutElementAmazonPay( api ) );
+	registerExpressPaymentMethod(
+		makeExpressCheckoutElement( api, 'amazonPay' )
+	);
 }
+
+// Register dynamic place order buttons when express checkout methods
+// should appear in the payment methods list instead of as separate buttons.
+if ( getUPEConfig( 'isExpressCheckoutInPaymentMethodsEnabled' ) ) {
+	if ( getUPEConfig( 'isPaymentRequestEnabled' ) ) {
+		registerPaymentMethod( makeDynamicPlaceOrderButton( api, 'applePay' ) );
+		registerPaymentMethod(
+			makeDynamicPlaceOrderButton( api, 'googlePay' )
+		);
+	}
+	if ( getUPEConfig( 'isAmazonPayEnabled' ) ) {
+		registerPaymentMethod(
+			makeDynamicPlaceOrderButton( api, 'amazonPay' )
+		);
+	}
+}
+
 window.addEventListener( 'load', () => {
 	enqueueFraudScripts( getUPEConfig( 'fraudServices' ) );
 	addCheckoutTracking();

client/checkout/classic/__tests__/express-payment-methods.test.js

@@ -0,0 +1,117 @@
+/**
+ * Internal dependencies
+ */
+import { initExpressPaymentMethods } from '../express-payment-methods';
+import { getUPEConfig } from 'wcpay/utils/checkout';
+
+jest.mock( 'wcpay/utils/checkout', () => ( {
+	getUPEConfig: jest.fn(),
+} ) );
+
+jest.mock( 'wcpay/checkout/utils/fingerprint', () => ( {
+	getFingerprint: jest.fn().mockResolvedValue( { visitorId: 'fp_123' } ),
+	appendFingerprintInputToForm: jest.fn(),
+} ) );
+
+jest.mock( 'wcpay/express-checkout/utils/payment-method-overrides', () => ( {
+	getPaymentMethodsOverride: jest.fn( () => ( {
+		paymentMethods: { applePay: 'always', googlePay: 'never' },
+	} ) ),
+} ) );
+
+describe( 'initExpressPaymentMethods', () => {
+	beforeEach( () => {
+		jest.clearAllMocks();
+
+		// Reset the global wc object
+		delete global.wc;
+	} );
+
+	test( 'does nothing when wc.customPlaceOrderButton API is not available', () => {
+		global.wc = undefined;
+
+		getUPEConfig.mockReturnValue( true );
+
+		// Should not throw
+		initExpressPaymentMethods( {} );
+	} );
+
+	test( 'does nothing when wc object exists but customPlaceOrderButton is missing', () => {
+		global.wc = {};
+
+		getUPEConfig.mockReturnValue( true );
+
+		initExpressPaymentMethods( {} );
+	} );
+
+	test( 'does nothing when feature flag is disabled', () => {
+		const mockRegister = jest.fn();
+		global.wc = {
+			customPlaceOrderButton: {
+				register: mockRegister,
+			},
+		};
+
+		getUPEConfig.mockImplementation( ( key ) => {
+			if ( key === 'isExpressCheckoutInPaymentMethodsEnabled' ) {
+				return false;
+			}
+			return null;
+		} );
+
+		initExpressPaymentMethods( {} );
+
+		expect( mockRegister ).not.toHaveBeenCalled();
+	} );
+
+	test( 'calls registerExpressPaymentMethods when API is available and feature is enabled', () => {
+		const mockRegister = jest.fn();
+		global.wc = {
+			customPlaceOrderButton: {
+				register: mockRegister,
+			},
+		};
+
+		getUPEConfig.mockImplementation( ( key ) => {
+			if ( key === 'isExpressCheckoutInPaymentMethodsEnabled' ) {
+				return true;
+			}
+			if ( key === 'currency' ) {
+				return 'usd';
+			}
+			if ( key === 'cartTotal' ) {
+				return 1000;
+			}
+			if ( key === 'paymentMethodsConfig' ) {
+				return {
+					apple_pay: {
+						isExpressCheckout: true,
+						gatewayId: 'woocommerce_payments_apple_pay',
+					},
+				};
+			}
+			return null;
+		} );
+
+		// Mock the DOM for checkExpressPaymentMethodsAvailability
+		const mockApi = {
+			getStripe: jest.fn().mockResolvedValue( {
+				elements: jest.fn().mockReturnValue( {
+					create: jest.fn().mockReturnValue( {
+						on: jest.fn(),
+						mount: jest.fn(),
+						unmount: jest.fn(),
+					} ),
+				} ),
+			} ),
+		};
+
+		initExpressPaymentMethods( mockApi );
+
+		// The function is async internally but we can verify it started
+		// by checking that the feature flag was consulted.
+		expect( getUPEConfig ).toHaveBeenCalledWith(
+			'isExpressCheckoutInPaymentMethodsEnabled'
+		);
+	} );
+} );

client/checkout/classic/event-handlers.js

@@ -4,6 +4,7 @@
  * Internal dependencies
  */
 import './style.scss';
+import { initExpressPaymentMethods } from './express-payment-methods';
 import { getUPEConfig } from 'wcpay/utils/checkout';
 import { isLinkEnabled } from '../utils/upe';
 import {
@@ -64,6 +65,9 @@ jQuery( function ( $ ) {
 		apiRequest
 	);
 
+	// Initialize express payment methods (Apple Pay, Google Pay) in the payment methods list.
+	initExpressPaymentMethods( api );
+
 	blockUI( $forms );
 	showAuthenticationModalIfRequired( api ).finally( () => {
 		unblockUI( $forms );
@@ -72,6 +76,8 @@ jQuery( function ( $ ) {
 	$( document.body ).on( 'updated_checkout', () => {
 		maybeMountStripePaymentElement( 'shortcode_checkout' );
 		injectPaymentMethodLogos();
+		// Re-check express payment method availability after checkout updates.
+		initExpressPaymentMethods( api );
 	} );
 
 	$( `[name="${ SHORTCODE_BILLING_ADDRESS_FIELDS.country }"]` ).on(
@@ -374,6 +380,14 @@ jQuery( function ( $ ) {
 
 	function processPaymentIfNotUsingSavedMethod( $form ) {
 		const paymentMethodType = getSelectedUPEGatewayPaymentMethod();
+		// Skip express checkout methods — they handle their own payment flow
+		// via the Custom Place Order Button API.
+		const paymentMethodConfig = getUPEConfig( 'paymentMethodsConfig' )?.[
+			paymentMethodType
+		];
+		if ( paymentMethodConfig?.isExpressCheckout ) {
+			return;
+		}
 		if ( ! isUsingSavedPaymentMethod( paymentMethodType ) ) {
 			return processPayment( api, $form, paymentMethodType );
 		}