Update PRB payment method generation to use PaymentMethods rather than sources (#3510)

james-allan · diegocurbelo · web-flow · commit 0903542d5ac6 · 2024-10-17T08:44:14.000+10:00
* Update PRB payment method generation to use PaymentMethods rather than sources

* Pass deferred intent flag

* Add missing ,

* Add changelog entries

* Update the cart and checkout block integration of PRBs

* Pass stripe_source arg for compatibility with legacy checkout mode

---------

Co-authored-by: Diego Curbelo &lt;diego@curbelo.com&gt;
diff --git a/assets/js/stripe-payment-request.js b/assets/js/stripe-payment-request.js
@@ -69,8 +69,8 @@ jQuery( function( $ ) {
 			};
 		},
 
-		processSource: function( source, paymentRequestType ) {
-			var data = wc_stripe_payment_request.getOrderData( source, paymentRequestType );
+		processPaymentMethod: function( paymentMethod, paymentRequestType ) {
+			var data = wc_stripe_payment_request.getOrderData( paymentMethod, paymentRequestType );
 
 			return $.ajax( {
 				type:    'POST',
@@ -85,46 +85,49 @@ jQuery( function( $ ) {
 		 *
 		 * @since 3.1.0
 		 * @version 4.0.0
-		 * @param {PaymentResponse} source Payment Response instance.
+		 * @param {Object} evt The event object containing payment details and user information.
+		 * @param {string} paymentRequestType The type of payment request, either 'google_pay' or 'apple_pay'.
 		 *
-		 * @return {Object}
+		 * @return {Object} Processed order data for further handling, including shipping, billing, and payment method information.
 		 */
 		getOrderData: function( evt, paymentRequestType ) {
-			var source   = evt.source;
-			var email    = source.owner.email;
-			var phone    = source.owner.phone;
-			var billing  = source.owner.address;
-			var name     = source.owner.name ?? evt.payerName;
-			var shipping = evt.shippingAddress;
-			var data     = {
-				_wpnonce:                  wc_stripe_payment_request_params.nonce.checkout,
-				billing_first_name:        name?.split( ' ' )?.slice( 0, 1 )?.join( ' ' ) ?? '',
-				billing_last_name:         name?.split( ' ' )?.slice( 1 )?.join( ' ' ) || '-',
-				billing_company:           '',
-				billing_email:             null !== email   ? email : evt.payerEmail,
-				billing_phone:             null !== phone   ? phone : evt.payerPhone && evt.payerPhone.replace( '/[() -]/g', '' ),
-				billing_country:           null !== billing ? billing.country : '',
-				billing_address_1:         null !== billing ? billing.line1 : '',
-				billing_address_2:         null !== billing ? billing.line2 : '',
-				billing_city:              null !== billing ? billing.city : '',
-				billing_state:             null !== billing ? billing.state : '',
-				billing_postcode:          null !== billing ? billing.postal_code : '',
-				shipping_first_name:       '',
-				shipping_last_name:        '',
-				shipping_company:          '',
-				shipping_country:          '',
-				shipping_address_1:        '',
-				shipping_address_2:        '',
-				shipping_city:             '',
-				shipping_state:            '',
-				shipping_postcode:         '',
-				shipping_method:           [ null === evt.shippingOption ? null : evt.shippingOption.id ],
-				order_comments:            '',
-				payment_method:            'stripe',
-				ship_to_different_address: 1,
-				terms:                     1,
-				stripe_source:             source.id,
-				payment_request_type:      paymentRequestType
+			var paymentMethod = evt.paymentMethod;
+			var email         = paymentMethod.billing_details.email;
+			var phone         = paymentMethod.billing_details.phone;
+			var billing       = paymentMethod.billing_details.address;
+			var name          = paymentMethod.billing_details.name ?? evt.payerName;
+			var shipping      = evt.shippingAddress;
+			var data          = {
+				_wpnonce:                       wc_stripe_payment_request_params.nonce.checkout,
+				billing_first_name:             name?.split( ' ' )?.slice( 0, 1 )?.join( ' ' ) ?? '',
+				billing_last_name:              name?.split( ' ' )?.slice( 1 )?.join( ' ' ) || '-',
+				billing_company:                '',
+				billing_email:                  null !== email   ? email : evt.payerEmail,
+				billing_phone:                  null !== phone   ? phone : evt.payerPhone && evt.payerPhone.replace( '/[() -]/g', '' ),
+				billing_country:                null !== billing ? billing.country : '',
+				billing_address_1:              null !== billing ? billing.line1 : '',
+				billing_address_2:              null !== billing ? billing.line2 : '',
+				billing_city:                   null !== billing ? billing.city : '',
+				billing_state:                  null !== billing ? billing.state : '',
+				billing_postcode:               null !== billing ? billing.postal_code : '',
+				shipping_first_name:            '',
+				shipping_last_name:             '',
+				shipping_company:               '',
+				shipping_country:               '',
+				shipping_address_1:             '',
+				shipping_address_2:             '',
+				shipping_city:                  '',
+				shipping_state:                 '',
+				shipping_postcode:              '',
+				shipping_method:                [ null === evt.shippingOption ? null : evt.shippingOption.id ],
+				order_comments:                 '',
+				payment_method:                 'stripe',
+				ship_to_different_address:      1,
+				terms:                          1,
+				'wc-stripe-payment-method':     paymentMethod.id,
+				stripe_source:                  paymentMethod.id, // Needed to process the payment in legacy checkout mode.
+				payment_request_type:           paymentRequestType,
+				'wc-stripe-is-deferred-intent': true,
 			};
 
 			if ( shipping ) {
@@ -480,12 +483,12 @@ jQuery( function( $ ) {
 					} );
 				} );
 
-				paymentRequest.on( 'source', function( evt ) {
+				paymentRequest.on( 'paymentmethod', function( evt ) {
 					// Check if we allow prepaid cards.
 					if ( 'no' === wc_stripe_payment_request_params.stripe.allow_prepaid_card && 'prepaid' === evt.source.card.funding ) {
 						wc_stripe_payment_request.abortPayment( evt, wc_stripe_payment_request.getErrorMessageHTML( wc_stripe_payment_request_params.i18n.no_prepaid_card ) );
 					} else {
-						$.when( wc_stripe_payment_request.processSource( evt, paymentRequestType ) ).then( function( response ) {
+						$.when( wc_stripe_payment_request.processPaymentMethod( evt, paymentRequestType ) ).then( function( response ) {
 							if ( 'success' === response.result ) {
 								wc_stripe_payment_request.completePayment( evt, response.redirect );
 							} else {
diff --git a/changelog.txt b/changelog.txt
@@ -31,6 +31,7 @@
 * Fix - Resolved an issue which caused the WeChat Pay payment icon to not be displayed on shortcode checkout pages.
 * Fix - Set order payment method title to the customizable title setting rather than the default label.
 * Fix - Update Cash App payments to avoid confirming on creation, resolving issues with generic payment failures in live mode.
+* Fix - Switch Google Pay and Apple Pay PRB flow to create PaymentMethod (pm_) instead of Source (src_), utilizing deferred intent processing.
 * Tweak - Add order lock for redirect payments.
 * Fix - Missing Stripe Fee and Stripe Payout details on orders that were captured manually.
 * Fix - Allow legacy `src_` payment methods linked to a saved credit card to be displayed on the checkout and My Account pages when the new checkout experience is enabled.
diff --git a/client/blocks/normalize.js b/client/blocks/normalize.js
@@ -14,26 +14,27 @@ import { getBlocksConfiguration } from 'wcstripe/blocks/utils';
 /**
  * Normalizes order data received upon creating an order using the store's AJAX API.
  *
- * @param {Object} sourceEvent - The source event that triggered the creation of the order.
+ * @param {Object} paymentMethodEvent - The payment method event that triggered the creation of the order.
  * @param {string} paymentRequestType - The payment request type.
  */
-const normalizeOrderData = ( sourceEvent, paymentRequestType ) => {
-	const { source } = sourceEvent;
-	const email = source?.owner?.email;
-	const phone = source?.owner?.phone;
-	const billing = source?.owner?.address;
-	const name = source?.owner?.name ?? sourceEvent.payerName;
-	const shipping = sourceEvent?.shippingAddress;
+const normalizeOrderData = ( paymentMethodEvent, paymentRequestType ) => {
+	const paymentMethod = paymentMethodEvent.paymentMethod;
+	const email = paymentMethod.billing_details.email;
+	const phone = paymentMethod.billing_details.phone;
+	const billing = paymentMethod.billing_details.address;
+	const shipping = paymentMethodEvent.shippingAddress;
+	const name =
+		paymentMethod.billing_details.name ?? paymentMethodEvent.payerName;
 
 	const data = {
 		_wpnonce: getBlocksConfiguration()?.nonce?.checkout,
 		billing_first_name:
 			name?.split( ' ' )?.slice( 0, 1 )?.join( ' ' ) ?? '',
 		billing_last_name: name?.split( ' ' )?.slice( 1 )?.join( ' ' ) ?? '',
 		billing_company: '',
-		billing_email: email ?? sourceEvent?.payerEmail,
+		billing_email: email ?? paymentMethodEvent?.payerEmail,
 		billing_phone:
-			phone ?? sourceEvent?.payerPhone?.replace( '/[() -]/g', '' ),
+			phone ?? paymentMethodEvent?.payerPhone?.replace( '/[() -]/g', '' ),
 		billing_country: billing?.country ?? '',
 		billing_address_1: billing?.line1 ?? '',
 		billing_address_2: billing?.line2 ?? '',
@@ -49,13 +50,15 @@ const normalizeOrderData = ( sourceEvent, paymentRequestType ) => {
 		shipping_city: '',
 		shipping_state: '',
 		shipping_postcode: '',
-		shipping_method: [ sourceEvent?.shippingOption?.id ],
+		shipping_method: [ paymentMethodEvent?.shippingOption?.id ],
 		order_comments: '',
 		payment_method: 'stripe',
 		ship_to_different_address: 1,
 		terms: 1,
-		stripe_source: source.id,
+		'wc-stripe-payment-method': paymentMethod.id,
+		stripe_source: paymentMethod.id, // Needed to process the payment in legacy checkout mode.
 		payment_request_type: paymentRequestType,
+		'wc-stripe-is-deferred-intent': true,
 	};
 
 	if ( shipping ) {
diff --git a/client/blocks/payment-request/hooks.js b/client/blocks/payment-request/hooks.js
@@ -186,7 +186,7 @@ export const useProcessPaymentHandler = (
 ) => {
 	useEffect( () => {
 		const handler = paymentRequest?.on(
-			'source',
+			'paymentmethod',
 			paymentProcessingHandler(
 				stripe,
 				paymentRequestType,
@@ -196,7 +196,7 @@ export const useProcessPaymentHandler = (
 
 		return () => {
 			// Need to use `?.` here in case paymentRequest is null.
-			handler?.removeEventListener( 'source' );
+			handler?.removeEventListener( 'paymentmethod' );
 		};
 	}, [ stripe, paymentRequest, paymentRequestType, setExpressPaymentError ] );
 };
diff --git a/readme.txt b/readme.txt
@@ -159,6 +159,7 @@ If you get stuck, you can ask for help in the Plugin Forum.
 * Fix - Resolved an issue which caused the WeChat Pay payment icon to not be displayed on shortcode checkout pages.
 * Fix - Set order payment method title to the customizable title setting rather than the default label.
 * Fix - Update Cash App payments to avoid confirming on creation, resolving issues with generic payment failures in live mode.
+* Fix - Switch Google Pay and Apple Pay PRB flow to create PaymentMethod (pm_) instead of Source (src_), utilizing deferred intent processing.
 * Tweak - Add order lock for redirect payments.
 * Fix - Missing Stripe Fee and Stripe Payout details on orders that were captured manually.
 * Fix - Allow legacy `src_` payment methods linked to a saved credit card to be displayed on the checkout and My Account pages when the new checkout experience is enabled.
