WooPay compatibility with deferred intent creation UPE

changelog/feature-deferred-intent-woopay

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Ensure WooPay compatibility with the split UPE that has deferred intent creation implementation.

client/checkout/api/index.js

@@ -3,7 +3,7 @@
 /**
  * Internal dependencies
  */
-import { getConfig } from 'utils/checkout';
+import { getConfig, getUPEConfig } from 'utils/checkout';
 import {
 	getPaymentRequestData,
 	getPaymentRequestAjaxURL,
@@ -41,6 +41,21 @@ export default class WCPayAPI {
 		return new Stripe( publishableKey, options );
 	}
 
+	/**
+	 * Overloaded method to get the Stripe object for UPE. Leverages the original getStripe method but before doing
+	 * so, sets the forceNetworkSavedCards option to the proper value for the payment method type.
+	 * forceNetworkSavedCards is currently the flag that among others determines whether or not to use the Stripe Platform on the checkout.
+	 *
+	 * @param {string} paymentMethodType The payment method type.
+	 * @return {Object} The Stripe Object.
+	 */
+	getStripeForUPE( paymentMethodType ) {
+		this.options.forceNetworkSavedCards = getUPEConfig(
+			'paymentMethodsConfig'
+		)[ paymentMethodType ].forceNetworkSavedCards;
+		return this.getStripe();
+	}
+
 	/**
 	 * Generates a new instance of Stripe.
 	 *
@@ -54,13 +69,14 @@ export default class WCPayAPI {
 			forceNetworkSavedCards,
 			locale,
 			isUPEEnabled,
+			isUPEDeferredEnabled,
 			isStripeLinkEnabled,
 		} = this.options;
 
 		if (
 			forceNetworkSavedCards &&
 			! forceAccountRequest &&
-			! isUPEEnabled
+			! ( isUPEEnabled && ! isUPEDeferredEnabled )
 		) {
 			if ( ! this.stripePlatform ) {
 				this.stripePlatform = this.createStripe(

client/checkout/blocks/upe-deferred-intent-creation/payment-elements.js

@@ -10,7 +10,7 @@ import { useEffect, useState } from 'react';
 import PaymentProcessor from './payment-processor';
 
 const PaymentElements = ( { api, ...props } ) => {
-	const stripe = api.getStripe();
+	const stripe = api.getStripeForUPE( props.paymentMethodId );
 	const [ errorMessage, setErrorMessage ] = useState( null );
 	const [ appearance, setAppearance ] = useState(
 		getUPEConfig( 'wcBlocksUPEAppearance' )

client/checkout/blocks/upe-deferred-intent-creation/payment-processor.js

@@ -115,7 +115,7 @@ const PaymentProcessor = ( {
 					await validateElements( elements );
 
 					const paymentMethodObject = await api
-						.getStripe()
+						.getStripeForUPE( paymentMethodId )
 						.createPaymentMethod( {
 							elements,
 							params: {

client/checkout/blocks/upe-split.js

@@ -61,6 +61,7 @@ const api = new WCPayAPI(
 		locale: getUPEConfig( 'locale' ),
 		isUPEEnabled: getUPEConfig( 'isUPEEnabled' ),
 		isUPESplitEnabled: getUPEConfig( 'isUPESplitEnabled' ),
+		isUPEDeferredEnabled: getUPEConfig( 'isUPEDeferredEnabled' ),
 		isStripeLinkEnabled,
 	},
 	request
@@ -103,7 +104,9 @@ Object.entries( enabledPaymentMethodsConfig )
 				const isAvailableInTheCountry =
 					! isRestrictedInAnyCountry ||
 					upeConfig.countries.includes( billingCountry );
-				return isAvailableInTheCountry && !! api.getStripe();
+				return (
+					isAvailableInTheCountry && !! api.getStripeForUPE( upeName )
+				);
 			},
 			paymentMethodId: upeMethods[ upeName ],
 			// see .wc-block-checkout__payment-method styles in blocks/style.scss

client/checkout/classic/upe-deferred-intent-creation/event-handlers.js

@@ -19,6 +19,8 @@ import enqueueFraudScripts from 'fraud-scripts';
 import { showAuthenticationModalIfRequired } from './3ds-flow-handling';
 import WCPayAPI from 'wcpay/checkout/api';
 import apiRequest from '../../utils/request';
+import { handleWooPayEmailInput } from 'wcpay/checkout/woopay/email-input-iframe';
+import { isPreviewing } from 'wcpay/checkout/preview';
 
 jQuery( function ( $ ) {
 	enqueueFraudScripts( getUPEConfig( 'fraudServices' ) );
@@ -28,6 +30,8 @@ jQuery( function ( $ ) {
 			accountId: getUPEConfig( 'accountId' ),
 			forceNetworkSavedCards: getUPEConfig( 'forceNetworkSavedCards' ),
 			locale: getUPEConfig( 'locale' ),
+			isUPEEnabled: getUPEConfig( 'isUPEEnabled' ),
+			isUPEDeferredEnabled: getUPEConfig( 'isUPEDeferredEnabled' ),
 		},
 		apiRequest
 	);
@@ -82,6 +86,10 @@ jQuery( function ( $ ) {
 		return processPaymentIfNotUsingSavedMethod( $( 'form#order_review' ) );
 	} );
 
+	if ( getUPEConfig( 'isWooPayEnabled' ) && ! isPreviewing() ) {
+		handleWooPayEmailInput( '#billing_email', api );
+	}
+
 	function processPaymentIfNotUsingSavedMethod( $form ) {
 		const paymentMethodType = getSelectedUPEGatewayPaymentMethod();
 		if ( ! isUsingSavedPaymentMethod( paymentMethodType ) ) {

client/checkout/classic/upe-deferred-intent-creation/payment-processing.js

@@ -89,9 +89,15 @@ function submitForm( jQueryForm ) {
  * @param {Object} api The API object used to call the Stripe API's createPaymentMethod method.
  * @param {Object} elements The Stripe elements object used to create a Stripe payment method.
  * @param {Object} jQueryForm The jQuery object for the form being submitted.
+ * @param {string} paymentMethodType The type of Stripe payment method to create.
  * @return {Promise<Object>} A promise that resolves with the created Stripe payment method.
  */
-function createStripePaymentMethod( api, elements, jQueryForm ) {
+function createStripePaymentMethod(
+	api,
+	elements,
+	jQueryForm,
+	paymentMethodType
+) {
 	let params = {};
 	if ( 'checkout' === jQueryForm.attr( 'name' ) ) {
 		params = {
@@ -118,7 +124,10 @@ function createStripePaymentMethod( api, elements, jQueryForm ) {
 			},
 		};
 	}
-	return api.getStripe().createPaymentMethod( { elements, params: params } );
+
+	return api
+		.getStripeForUPE( paymentMethodType )
+		.createPaymentMethod( { elements, params: params } );
 }
 
 /**
@@ -141,7 +150,9 @@ async function createStripePaymentElement( api, paymentMethodType ) {
 		appearance: initializeAppearance( api ),
 	};
 
-	const elements = api.getStripe().elements( options );
+	const elements = api
+		.getStripeForUPE( paymentMethodType )
+		.elements( options );
 	const createdStripePaymentElement = elements.create( 'payment', {
 		...getUpeSettings(),
 		wallets: {
@@ -278,7 +289,8 @@ export const processPayment = (
 			const paymentMethodObject = await createStripePaymentMethod(
 				api,
 				elements,
-				jQueryForm
+				jQueryForm,
+				paymentMethodType
 			);
 			appendFingerprintInputToForm( jQueryForm, fingerprint );
 			appendPaymentMethodIdToForm(

client/checkout/classic/upe-deferred-intent-creation/test/payment-processing.test.js

@@ -25,15 +25,19 @@ jest.mock( 'wcpay/utils/checkout', () => {
 				return {
 					card: {
 						label: 'Card',
+						forceNetworkSavedCards: true,
 					},
 					giropay: {
 						label: 'Giropay',
+						forceNetworkSavedCards: false,
 					},
 					ideal: {
 						label: 'iDEAL',
+						forceNetworkSavedCards: false,
 					},
 					sepa: {
 						label: 'SEPA',
+						forceNetworkSavedCards: false,
 					},
 				};
 			}
@@ -92,7 +96,7 @@ const mockCreatePaymentMethod = jest.fn( () => {
 	};
 } );
 
-const mockGetStripe = jest.fn( () => {
+const mockGetStripeForUPE = jest.fn( () => {
 	return {
 		elements: mockElements,
 		createPaymentMethod: mockCreatePaymentMethod,
@@ -110,11 +114,17 @@ const setupIntentMock = jest.fn( () => {
 
 const apiMock = {
 	saveUPEAppearance: saveUPEAppearanceMock,
-	getStripe: mockGetStripe,
+	getStripeForUPE: mockGetStripeForUPE,
 	setupIntent: setupIntentMock,
 };
 
 describe( 'Stripe Payment Element mounting', () => {
+	let mockDomElement;
+
+	beforeEach( () => {
+		mockDomElement = document.createElement( 'div' );
+	} );
+
 	afterEach( () => {
 		jest.clearAllMocks();
 	} );
@@ -130,7 +140,6 @@ describe( 'Stripe Payment Element mounting', () => {
 			return 'fingerprint';
 		} );
 
-		const mockDomElement = document.createElement( 'div' );
 		mockDomElement.dataset.paymentMethodType = 'giropay';
 
 		mountStripePaymentElement( apiMock, mockDomElement );
@@ -160,10 +169,30 @@ describe( 'Stripe Payment Element mounting', () => {
 					backgroundColor: '#fff',
 				};
 			}
+
+			if ( 'paymentMethodsConfig' === argument ) {
+				return {
+					ideal: {
+						label: 'iDEAL',
+						forceNetworkSavedCards: false,
+					},
+					card: {
+						label: 'Card',
+						forceNetworkSavedCards: true,
+					},
+					giropay: {
+						label: 'Giropay',
+						forceNetworkSavedCards: false,
+					},
+					sepa: {
+						label: 'SEPA',
+						forceNetworkSavedCards: false,
+					},
+				};
+			}
 		} );
 
-		const mockDomElement = document.createElement( 'div' );
-		mockDomElement.dataset.paymentMethodType = 'ideal';
+		mockDomElement.dataset.paymentMethodType = 'giropay';
 
 		mountStripePaymentElement( apiMock, mockDomElement );
 
@@ -184,7 +213,7 @@ describe( 'Stripe Payment Element mounting', () => {
 			expect( showErrorCheckout ).toHaveBeenCalledWith(
 				'No fingerprint'
 			);
-			expect( apiMock.getStripe ).not.toHaveBeenCalled();
+			expect( apiMock.getStripeForUPE ).not.toHaveBeenCalled();
 			expect( mockElements ).not.toHaveBeenCalled();
 			expect( mockCreateFunction ).not.toHaveBeenCalled();
 		} );
@@ -195,13 +224,12 @@ describe( 'Stripe Payment Element mounting', () => {
 			return 'fingerprint';
 		} );
 
-		const mockDomElement = document.createElement( 'div' );
 		mockDomElement.dataset.paymentMethodType = 'card';
 
 		mountStripePaymentElement( apiMock, mockDomElement );
 
 		await waitFor( () => {
-			expect( apiMock.getStripe ).toHaveBeenCalled();
+			expect( apiMock.getStripeForUPE ).toHaveBeenCalled();
 			expect( mockElements ).toHaveBeenCalled();
 			expect( mockCreateFunction ).toHaveBeenCalled();
 			expect( mockMountFunction ).toHaveBeenCalled();
@@ -247,20 +275,50 @@ describe( 'Stripe Payment Element mounting', () => {
 			return 'fingerprint';
 		} );
 
-		const mockDomElement = document.createElement( 'div' );
+		getUPEConfig.mockImplementation( ( argument ) => {
+			if ( 'currency' === argument ) {
+				return 'eur';
+			}
+
+			if ( 'paymentMethodsConfig' === argument ) {
+				return {
+					sepa: {
+						label: 'SEPA',
+						forceNetworkSavedCards: false,
+					},
+				};
+			}
+		} );
+
 		mockDomElement.dataset.paymentMethodType = 'sepa';
 
 		mountStripePaymentElement( apiMock, mockDomElement );
 		mountStripePaymentElement( apiMock, mockDomElement );
 
 		await waitFor( () => {
-			expect( apiMock.getStripe ).toHaveBeenCalled();
+			expect( apiMock.getStripeForUPE ).toHaveBeenCalled();
 			expect( mockElements ).toHaveBeenCalledTimes( 1 );
 		} );
 	} );
 } );
 
 describe( 'Payment processing', () => {
+	beforeEach( () => {
+		getUPEConfig.mockImplementation( ( argument ) => {
+			if ( 'currency' === argument ) {
+				return 'eur';
+			}
+
+			if ( 'paymentMethodsConfig' === argument ) {
+				return {
+					card: {
+						label: 'card',
+						forceNetworkSavedCards: false,
+					},
+				};
+			}
+		} );
+	} );
 	afterEach( () => {
 		jest.clearAllMocks();
 	} );