diff --git a/changelog/fix-7121-null-coalescing b/changelog/fix-7121-null-coalescing
new file mode 100644
index 00000000000..2781b4dbb75
--- /dev/null
+++ b/changelog/fix-7121-null-coalescing
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+checkout processing when fields are hidden via customizer
diff --git a/client/checkout/classic/upe-deferred-intent-creation/payment-processing.js b/client/checkout/classic/upe-deferred-intent-creation/payment-processing.js
index d3ac094d3ad..dc4dc62c5d6 100644
--- a/client/checkout/classic/upe-deferred-intent-creation/payment-processing.js
+++ b/client/checkout/classic/upe-deferred-intent-creation/payment-processing.js
@@ -112,21 +112,25 @@ function createStripePaymentMethod(
 				name: document.querySelector( '#billing_first_name' )
 					? (
 							document.querySelector( '#billing_first_name' )
-								.value +
+								?.value +
 							' ' +
-							document.querySelector( '#billing_last_name' ).value
+							document.querySelector( '#billing_last_name' )
+								?.value
 					  ).trim()
 					: undefined,
-				email: document.querySelector( '#billing_email' ).value,
-				phone: document.querySelector( '#billing_phone' ).value,
+				email: document.querySelector( '#billing_email' )?.value,
+				phone: document.querySelector( '#billing_phone' )?.value,
 				address: {
-					city: document.querySelector( '#billing_city' ).value,
-					country: document.querySelector( '#billing_country' ).value,
-					line1: document.querySelector( '#billing_address_1' ).value,
-					line2: document.querySelector( '#billing_address_2' ).value,
+					city: document.querySelector( '#billing_city' )?.value,
+					country: document.querySelector( '#billing_country' )
+						?.value,
+					line1: document.querySelector( '#billing_address_1' )
+						?.value,
+					line2: document.querySelector( '#billing_address_2' )
+						?.value,
 					postal_code: document.querySelector( '#billing_postcode' )
-						.value,
-					state: document.querySelector( '#billing_state' ).value,
+						?.value,
+					state: document.querySelector( '#billing_state' )?.value,
 				},
 			},
 		};
diff --git a/client/checkout/classic/upe-deferred-intent-creation/test/payment-processing.test.js b/client/checkout/classic/upe-deferred-intent-creation/test/payment-processing.test.js
index da225636163..87b258e8a2f 100644
--- a/client/checkout/classic/upe-deferred-intent-creation/test/payment-processing.test.js
+++ b/client/checkout/classic/upe-deferred-intent-creation/test/payment-processing.test.js
@@ -336,13 +336,12 @@ describe( 'Payment processing', () => {
 
 		const mockJqueryForm = {
 			submit: jest.fn(),
-			addClass: jest.fn( () => {
-				return {
-					block: jest.fn(),
-				};
-			} ),
-			removeClass: jest.fn(),
-			unblock: jest.fn(),
+			addClass: jest.fn( () => ( {
+				block: jest.fn(),
+			} ) ),
+			removeClass: jest.fn( () => ( {
+				unblock: jest.fn(),
+			} ) ),
 			attr: jest.fn().mockReturnValue( 'checkout' ),
 		};
 
@@ -377,13 +376,46 @@ describe( 'Payment processing', () => {
 
 		const checkoutForm = {
 			submit: jest.fn(),
-			addClass: jest.fn( () => {
-				return {
-					block: jest.fn(),
-				};
-			} ),
-			removeClass: jest.fn(),
-			unblock: jest.fn(),
+			addClass: jest.fn( () => ( {
+				block: jest.fn(),
+			} ) ),
+			removeClass: jest.fn( () => ( {
+				unblock: jest.fn(),
+			} ) ),
+			attr: jest.fn().mockReturnValue( 'checkout' ),
+		};
+
+		await processPayment( apiMock, checkoutForm, 'card' );
+
+		expect( mockCreatePaymentMethod ).toHaveBeenCalledWith( {
+			elements: expect.any( Object ),
+			params: {
+				billing_details: expect.any( Object ),
+			},
+		} );
+	} );
+
+	test( 'Payment processing does not create error when some fields are hidden via customizer', async () => {
+		setupBillingDetailsFields();
+		// pretending that the customizer removed the billing phone field
+		document.body.removeChild( document.getElementById( 'billing_phone' ) );
+		getFingerprint.mockImplementation( () => {
+			return 'fingerprint';
+		} );
+
+		const mockDomElement = document.createElement( 'div' );
+		mockDomElement.dataset.paymentMethodType = 'card';
+
+		await mountStripePaymentElement( apiMock, mockDomElement );
+
+		const checkoutForm = {
+			submit: jest.fn(),
+			addClass: jest.fn( () => ( {
+				block: jest.fn(),
+			} ) ),
+			removeClass: jest.fn( () => ( {
+				unblock: jest.fn(),
+			} ) ),
 			attr: jest.fn().mockReturnValue( 'checkout' ),
 		};
 
@@ -410,13 +442,12 @@ describe( 'Payment processing', () => {
 
 		const addPaymentMethodForm = {
 			submit: jest.fn(),
-			addClass: jest.fn( () => {
-				return {
-					block: jest.fn(),
-				};
-			} ),
-			removeClass: jest.fn(),
-			unblock: jest.fn(),
+			addClass: jest.fn( () => ( {
+				block: jest.fn(),
+			} ) ),
+			removeClass: jest.fn( () => ( {
+				unblock: jest.fn(),
+			} ) ),
 			attr: jest.fn().mockReturnValue( 'add_payment_method' ),
 		};