From 97379628d441602c3ca3425b7f6df253765b09f8 Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Tue, 20 Aug 2024 15:37:26 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Send=20payer=20details=20with=20ord?=
 =?UTF-8?q?er=20approval=20request?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

First step to integrate payer details in the payment flow without final confirmation.
---
 .../resources/js/modules/Helper/PayerData.js  | 24 +++++++++++++++++++
 .../OnApproveHandler/onApproveForContinue.js  | 23 +++++++++++-------
 .../resources/js/GooglepayButton.js           |  6 ++---
 3 files changed, 42 insertions(+), 11 deletions(-)

diff --git a/modules/ppcp-button/resources/js/modules/Helper/PayerData.js b/modules/ppcp-button/resources/js/modules/Helper/PayerData.js
index 59af8dc85..358b1587f 100644
--- a/modules/ppcp-button/resources/js/modules/Helper/PayerData.js
+++ b/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;
+	}
 }
diff --git a/modules/ppcp-button/resources/js/modules/OnApproveHandler/onApproveForContinue.js b/modules/ppcp-button/resources/js/modules/OnApproveHandler/onApproveForContinue.js
index 0d699c170..d492802f1 100644
--- a/modules/ppcp-button/resources/js/modules/OnApproveHandler/onApproveForContinue.js
+++ b/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( {
-				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',
-			} ),
+			body: JSON.stringify( payload ),
 		} )
 			.then( ( res ) => {
 				return res.json();
diff --git a/modules/ppcp-googlepay/resources/js/GooglepayButton.js b/modules/ppcp-googlepay/resources/js/GooglepayButton.js
index 26acd0139..e9ca1bcc8 100644
--- a/modules/ppcp-googlepay/resources/js/GooglepayButton.js
+++ b/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 );
 		};