✨ Send payer details with order approval request

First step to integrate payer details in the payment flow without final confirmation.

modules/ppcp-button/resources/js/modules/Helper/PayerData.js

@@ -145,4 +145,28 @@ export function setPayerData( newData, overwriteExisting = false ) {
 
 		setValue( path, element, value );
 	} );
+
+	/*
+	 * Persist the payer details to the global JS object, to make it available in other modules
+	 * via tha `payerData()` accessor.
+	 */
+	window.PayPalCommerceGateway.payer =
+		window.PayPalCommerceGateway.payer || {};
+	const currentPayerData = payerData();
+
+	if ( currentPayerData ) {
+		Object.entries( newData ).forEach( ( [ key, value ] ) => {
+			if (
+				overwriteExisting ||
+				null !== currentPayerData[ key ] ||
+				undefined !== currentPayerData[ key ]
+			) {
+				currentPayerData[ key ] = value;
+			}
+		} );
+
+		window.PayPalCommerceGateway.payer = currentPayerData;
+	} else {
+		window.PayPalCommerceGateway.payer = newData;
+	}
 }

modules/ppcp-button/resources/js/modules/OnApproveHandler/onApproveForContinue.js

@@ -1,19 +1,26 @@
 const onApprove = ( context, errorHandler ) => {
 	return ( data, actions ) => {
+		const canCreateOrder =
+			! context.config.vaultingEnabled || data.paymentSource !== 'venmo';
+
+		const payload = {
+			nonce: context.config.ajax.approve_order.nonce,
+			order_id: data.orderID,
+			funding_source: window.ppcpFundingSource,
+			should_create_wc_order: canCreateOrder,
+		};
+
+		if ( canCreateOrder && data.payer ) {
+			payload.payer = data.payer;
+		}
+
 		return fetch( context.config.ajax.approve_order.endpoint, {
 			method: 'POST',
 			headers: {
 				'Content-Type': 'application/json',
 			},
 			credentials: 'same-origin',
-			body: JSON.stringify( {
+			body: JSON.stringify( payload ),
-				nonce: context.config.ajax.approve_order.nonce,
-				order_id: data.orderID,
-				funding_source: window.ppcpFundingSource,
-				should_create_wc_order:
-					! context.config.vaultingEnabled ||
-					data.paymentSource !== 'venmo',
-			} ),
 		} )
 			.then( ( res ) => {
 				return res.json();

modules/ppcp-googlepay/resources/js/GooglepayButton.js

@@ -583,6 +583,8 @@ class GooglepayButton extends PaymentButton {
 	async processPayment( paymentData ) {
 		this.logGroup( 'processPayment' );
 
+		const payer = payerDataFromPaymentResponse( paymentData );
+
 		const paymentError = ( reason ) => {
 			this.error( reason );
 
@@ -622,7 +624,7 @@ class GooglepayButton extends PaymentButton {
 			this.log( 'approveOrder', orderID );
 
 			await this.contextHandler.approveOrder(
-				{ orderID },
+				{ orderID, payer },
 				{
 					restart: () =>
 						new Promise( ( resolve ) => {
@@ -665,8 +667,6 @@ class GooglepayButton extends PaymentButton {
 		};
 
 		const addBillingDataToSession = () => {
-			const payer = payerDataFromPaymentResponse( paymentData );
-
 			moduleStorage.setPayer( payer );
 			setPayerData( payer );
 		};