Implement PE with deferred intent for the card payment method in the classic checkout

client/classic/upe/deferred-intent.js

@@ -0,0 +1,59 @@
+import jQuery from 'jquery';
+import WCStripeAPI from '../../api';
+import {
+	generateCheckoutEventNames,
+	getSelectedUPEGatewayPaymentMethod,
+	getStripeServerData,
+	isUsingSavedPaymentMethod,
+} from '../../stripe-utils';
+import './style.scss';
+import {
+	processPayment,
+	mountStripePaymentElement,
+} from './payment-processing';
+
+jQuery( function ( $ ) {
+	// Create an API object, which will be used throughout the checkout.
+	const api = new WCStripeAPI(
+		getStripeServerData(),
+		// A promise-based interface to jQuery.post.
+		( url, args ) => {
+			return new Promise( ( resolve, reject ) => {
+				jQuery.post( url, args ).then( resolve ).fail( reject );
+			} );
+		}
+	);
+
+	// Only attempt to mount the card element once that section of the page has loaded.
+	// We can use the updated_checkout event for this.
+	$( document.body ).on( 'updated_checkout', () => {
+		maybeMountStripePaymentElement();
+	} );
+
+	$( 'form.checkout' ).on( generateCheckoutEventNames(), function () {
+		return processPaymentIfNotUsingSavedMethod( $( this ) );
+	} );
+
+	function processPaymentIfNotUsingSavedMethod( $form ) {
+		const paymentMethodType = getSelectedUPEGatewayPaymentMethod();
+		if ( ! isUsingSavedPaymentMethod( paymentMethodType ) ) {
+			return processPayment( api, $form, paymentMethodType );
+		}
+	}
+
+	// If the card element selector doesn't exist, then do nothing.
+	// For example, when a 100% discount coupon is applied).
+	// We also don't re-mount if already mounted in DOM.
+	async function maybeMountStripePaymentElement() {
+		if (
+			$( '.wc-stripe-upe-element' ).length &&
+			! $( '.wc-stripe-upe-element' ).children().length
+		) {
+			for ( const upeElement of $(
+				'.wc-stripe-upe-element'
+			).toArray() ) {
+				await mountStripePaymentElement( api, upeElement );
+			}
+		}
+	}
+} );

client/classic/upe/index.js

@@ -11,6 +11,7 @@ import { getFontRulesFromPage, getAppearance } from '../../styles/upe';
 import enableStripeLinkPaymentMethod from '../../stripe-link';
 import { legacyHashchangeHandler } from './legacy-support';
 import './style.scss';
+import './deferred-intent.js';
 
 jQuery( function ( $ ) {
 	const key = getStripeServerData()?.key;
@@ -200,7 +201,7 @@ jQuery( function ( $ ) {
 		// Do not recreate UPE element unnecessarily.
 		if ( upeElement ) {
 			upeElement.unmount();
-			upeElement.mount( '#wc-stripe-upe-element' );
+			upeElement.mount( '.wc-stripe-upe-element' );
 			return;
 		}
 
@@ -221,7 +222,7 @@ jQuery( function ( $ ) {
 				// I repeat, do NOT recreate UPE element unnecessarily.
 				if ( upeElement || paymentIntentId ) {
 					upeElement.unmount();
-					upeElement.mount( '#wc-stripe-upe-element' );
+					upeElement.mount( '.wc-stripe-upe-element' );
 					return;
 				}
 
@@ -302,7 +303,7 @@ jQuery( function ( $ ) {
 				}
 
 				upeElement = elements.create( 'payment', upeSettings );
-				upeElement.mount( '#wc-stripe-upe-element' );
+				upeElement.mount( '.wc-stripe-upe-element' );
 
 				upeElement.on( 'ready', () => {
 					unblockUI( $( upeLoadingSelector ) );
@@ -339,31 +340,13 @@ jQuery( function ( $ ) {
 			} );
 	};
 
-	// Only attempt to mount the card element once that section of the page has loaded. We can use the updated_checkout
-	// event for this. This part of the page can also reload based on changes to checkout details, so we call unmount
-	// first to ensure the card element is re-mounted correctly.
-	$( document.body ).on( 'updated_checkout', () => {
-		// If the card element selector doesn't exist, then do nothing (for example, when a 100% discount coupon is applied).
-		// We also don't re-mount if already mounted in DOM.
-		if (
-			$( '#wc-stripe-upe-element' ).length &&
-			! $( '#wc-stripe-upe-element' ).children().length &&
-			isUPEEnabled
-		) {
-			const isSetupIntent = ! (
-				getStripeServerData()?.isPaymentNeeded ?? true
-			);
-			mountUPEElement( isSetupIntent );
-		}
-	} );
-
 	if (
 		$( 'form#add_payment_method' ).length ||
 		$( 'form#order_review' ).length
 	) {
 		if (
-			$( '#wc-stripe-upe-element' ).length &&
-			! $( '#wc-stripe-upe-element' ).children().length &&
+			$( '.wc-stripe-upe-element' ).length &&
+			! $( '.wc-stripe-upe-element' ).children().length &&
 			isUPEEnabled &&
 			! upeElement
 		) {