Fix JS errors with ECE on the shortcode checkout (#3497)

* Fix JS errors with ECE on the shortcode checkout

* Changelog and readme entries

Author: wjrosa

changelog.txt

@@ -1,6 +1,7 @@
 *** Changelog ***
 
 = 8.8.0 - xxxx-xx-xx =
+* Fix - Fixes some JS console errors when making a purchase with the Stripe Express Checkout Element on the shortcode checkout.
 * Fix - Updates the display logic for the OAuth re-connect promotional surface to follow the latest changes made to the connection settings object.
 * Fix - Remove unexpected HTML in error message for shortcode checkout.
 * Fix - Ensure ordering for Stripe payment methods is saved even when setting up from scratch.

client/express-checkout/event-handler.js

@@ -62,9 +62,9 @@ export const onConfirmHandler = async (
 	event,
 	order = 0 // Order ID for the pay for order flow.
 ) => {
-	const { error: submitError } = await elements.submit();
-	if ( submitError ) {
-		return abortPayment( event, submitError.message );
+	const submitResponse = await elements.submit();
+	if ( submitResponse?.error ) {
+		return abortPayment( event, submitResponse?.error?.message );
 	}
 
 	const { paymentMethod, error } = await stripe.createPaymentMethod( {

client/express-checkout/utils/index.js

@@ -229,9 +229,12 @@ const getRequiredFieldDataFromShortcodeCheckoutForm = ( data ) => {
 				}
 
 				// if shipping same as billing is selected, copy the billing field to shipping field.
-				const shipToDiffAddress = document
-					.getElementById( 'ship-to-different-address' )
-					.querySelector( 'input' ).checked;
+				const shipToDiffAddressField = document.getElementById(
+					'ship-to-different-address'
+				);
+				const shipToDiffAddress =
+					shipToDiffAddressField &&
+					shipToDiffAddressField.querySelector( 'input' ).checked;
 				if ( ! shipToDiffAddress ) {
 					const shippingFieldName = name.replace(
 						'billing_',

readme.txt

@@ -129,6 +129,7 @@ If you get stuck, you can ask for help in the Plugin Forum.
 == Changelog ==
 
 = 8.8.0 - xxxx-xx-xx =
+* Fix - Fixes some JS console errors when making a purchase with the Stripe Express Checkout Element on the shortcode checkout.
 * Fix - Updates the display logic for the OAuth re-connect promotional surface to follow the latest changes made to the connection settings object.
 * Fix - Remove unexpected HTML in error message for shortcode checkout.
 * Fix - Ensure ordering for Stripe payment methods is saved even when setting up from scratch.