Merge release/8.7.1 into trunk

changelog.txt

@@ -1,5 +1,8 @@
 *** WooPayments Changelog ***
 
+= 8.7.1 - 2025-01-14 =
+* Fix - Broaden billing field queries from form-scoped to document-scoped
+
 = 8.7.0 - 2024-12-25 =
 * Add - Add seller_message to failed order notes
 * Add - Add WooPay Klaviyo newsletter integration.

client/checkout/classic/event-handlers.js

@@ -76,7 +76,7 @@ jQuery( function ( $ ) {
 	} );
 
 	$checkoutForm.on( generateCheckoutEventNames(), function () {
-		if ( isBillingInformationMissing( this ) ) {
+		if ( isBillingInformationMissing() ) {
 			return;
 		}
 

client/checkout/utils/test/upe.test.js

@@ -36,6 +36,7 @@ function buildForm( fields ) {
 		input.value = field.value;
 		form.appendChild( input );
 	} );
+	document.body.appendChild( form );
 	return form;
 }
 
@@ -57,6 +58,11 @@ describe( 'UPE checkout utils', () => {
 		} );
 
 		beforeEach( () => {
+			const existingCheckoutForm = document.querySelector( 'form' );
+			if ( existingCheckoutForm ) {
+				existingCheckoutForm.remove();
+			}
+
 			getUPEConfig.mockImplementation( ( argument ) => {
 				if ( argument === 'enabledBillingFields' ) {
 					return {
@@ -99,7 +105,7 @@ describe( 'UPE checkout utils', () => {
 		} );
 
 		it( 'should return false when the billing information is not missing', () => {
-			const form = buildForm( [
+			buildForm( [
 				{ id: 'billing_first_name', value: 'Test' },
 				{ id: 'billing_last_name', value: 'User' },
 				{ id: 'billing_email', value: '[email protected]' },
@@ -108,11 +114,11 @@ describe( 'UPE checkout utils', () => {
 				{ id: 'billing_city', value: 'Anytown' },
 				{ id: 'billing_postcode', value: '12345' },
 			] );
-			expect( isBillingInformationMissing( form ) ).toBe( false );
+			expect( isBillingInformationMissing() ).toBe( false );
 		} );
 
 		it( 'should return true when the billing information is missing', () => {
-			const form = buildForm( [
+			buildForm( [
 				{ id: 'billing_first_name', value: 'Test' },
 				{ id: 'billing_last_name', value: 'User' },
 				{ id: 'billing_email', value: '[email protected]' },
@@ -121,11 +127,11 @@ describe( 'UPE checkout utils', () => {
 				{ id: 'billing_city', value: 'Anytown' },
 				{ id: 'billing_postcode', value: '' },
 			] );
-			expect( isBillingInformationMissing( form ) ).toBe( true );
+			expect( isBillingInformationMissing() ).toBe( true );
 		} );
 
 		it( 'should use the defaults when there is no specific locale data for a country', () => {
-			const form = buildForm( [
+			buildForm( [
 				{ id: 'billing_first_name', value: 'Test' },
 				{ id: 'billing_last_name', value: 'User' },
 				{ id: 'billing_email', value: '[email protected]' },
@@ -134,11 +140,11 @@ describe( 'UPE checkout utils', () => {
 				{ id: 'billing_city', value: 'Anytown' },
 				{ id: 'billing_postcode', value: '' },
 			] );
-			expect( isBillingInformationMissing( form ) ).toBe( true );
+			expect( isBillingInformationMissing() ).toBe( true );
 		} );
 
 		it( 'should return false when the locale data for a country has no required fields', () => {
-			const form = buildForm( [
+			buildForm( [
 				{ id: 'billing_first_name', value: 'Test' },
 				{ id: 'billing_last_name', value: 'User' },
 				{ id: 'billing_email', value: '[email protected]' },
@@ -147,7 +153,7 @@ describe( 'UPE checkout utils', () => {
 				{ id: 'billing_city', value: 'Anytown' },
 				{ id: 'billing_postcode', value: '' },
 			] );
-			expect( isBillingInformationMissing( form ) ).toBe( true );
+			expect( isBillingInformationMissing() ).toBe( true );
 		} );
 	} );
 

client/checkout/utils/upe.js

@@ -404,17 +404,18 @@ function getParsedLocale() {
 	}
 }
 
-export const isBillingInformationMissing = ( form ) => {
+export const isBillingInformationMissing = () => {
 	const enabledBillingFields = getUPEConfig( 'enabledBillingFields' );
 
 	// first name and last name are kinda special - we just need one of them to be at checkout
 	const name = `${
-		form.querySelector(
+		document.querySelector(
 			`#${ SHORTCODE_BILLING_ADDRESS_FIELDS.first_name }`
 		)?.value || ''
 	} ${
-		form.querySelector( `#${ SHORTCODE_BILLING_ADDRESS_FIELDS.last_name }` )
-			?.value || ''
+		document.querySelector(
+			`#${ SHORTCODE_BILLING_ADDRESS_FIELDS.last_name }`
+		)?.value || ''
 	}`.trim();
 	if (
 		! name &&
@@ -435,14 +436,15 @@ export const isBillingInformationMissing = ( form ) => {
 	const country = billingFieldsToValidate.includes(
 		SHORTCODE_BILLING_ADDRESS_FIELDS.country
 	)
-		? form.querySelector( `#${ SHORTCODE_BILLING_ADDRESS_FIELDS.country }` )
-				?.value
+		? document.querySelector(
+				`#${ SHORTCODE_BILLING_ADDRESS_FIELDS.country }`
+		  )?.value
 		: null;
 
 	// We need to just find one field with missing information. If even only one is missing, just return early.
 	return Boolean(
 		billingFieldsToValidate.find( ( fieldName ) => {
-			const field = form.querySelector( `#${ fieldName }` );
+			const field = document.querySelector( `#${ fieldName }` );
 			let isRequired = enabledBillingFields[ fieldName ]?.required;
 			const locale = getParsedLocale();
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "woocommerce-payments",
-  "version": "8.7.0",
+  "version": "8.7.1",
   "main": "webpack.config.js",
   "author": "Automattic",
   "license": "GPL-3.0-or-later",

readme.txt

@@ -4,7 +4,7 @@ Tags: woocommerce payments, apple pay, credit card, google pay, payment, payment
 Requires at least: 6.0
 Tested up to: 6.7
 Requires PHP: 7.3
-Stable tag: 8.6.1
+Stable tag: 8.7.1
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 
@@ -94,6 +94,10 @@ Please note that our support for the checkout block is still experimental and th
 
 == Changelog ==
 
+= 8.7.1 - 2025-01-14 =
+* Fix - Broaden billing field queries from form-scoped to document-scoped
+
+
 = 8.7.0 - 2024-12-25 =
 * Add - Add seller_message to failed order notes
 * Add - Add WooPay Klaviyo newsletter integration.

woocommerce-payments.php

@@ -11,7 +11,7 @@
  * WC tested up to: 9.4.0
  * Requires at least: 6.0
  * Requires PHP: 7.3
- * Version: 8.7.0
+ * Version: 8.7.1
  * Requires Plugins: woocommerce
  *
  * @package WooCommerce\Payments