Pre-fill user info for Link in the Payment Element (classic checkout) (#3621)

* Pre-fill user info for Link in the Payment Element (classic checkout)

* Update changelog and readme entries

* Refactor: move common code to function

Author: annemirasol

changelog.txt

@@ -1,7 +1,7 @@
 *** Changelog ***
 
 = 9.0.0 - xxxx-xx-xx =
-* Add - Pre-fill user email and phone number for Link in the Payment Element and block checkout.
+* Add - Pre-fill user email and phone number for Link in the Payment Element.
 * Remove - Remove Link autofill modal feature.
 * Update - Improve accuracy of webhook status information displayed in settings page.
 * Tweak - Standardize ECE Express payment buttons on Pay for Order page to match cart and checkout itemization behavior.

client/classic/upe/payment-processing.js

@@ -3,6 +3,8 @@ import {
 	appendPaymentMethodIdToForm,
 	getPaymentMethodTypes,
 	initializeUPEAppearance,
+	isLinkEnabled,
+	getDefaultValues,
 	getStripeServerData,
 	getUpeSettings,
 	showErrorCheckout,
@@ -80,8 +82,18 @@ function createStripePaymentElement( api, paymentMethodType = null ) {
 	};
 
 	const elements = api.getStripe().elements( options );
+
+	const attachDefaultValuesUpdateEvent = ( element ) => {
+		if ( document.getElementById( element ) ) {
+			document.getElementById( element ).onblur = function () {
+				updatePaymentElementDefaultValues();
+			};
+		}
+	};
+
 	const createdStripePaymentElement = elements.create( 'payment', {
 		...getUpeSettings(),
+		...getDefaultValues(),
 		wallets: {
 			applePay: 'never',
 			googlePay: 'never',
@@ -92,9 +104,33 @@ function createStripePaymentElement( api, paymentMethodType = null ) {
 	gatewayUPEComponents[
 		paymentMethodType
 	].upeElement = createdStripePaymentElement;
+
+	// When email or phone is updated and Link is enabled, we need to
+	// update the payment element to update its default values.
+	if (
+		getStripeServerData()?.isCheckout &&
+		isLinkEnabled() &&
+		paymentMethodType === 'card'
+	) {
+		attachDefaultValuesUpdateEvent( 'billing_email' );
+		attachDefaultValuesUpdateEvent( 'billing_phone' );
+	}
+
 	return createdStripePaymentElement;
 }
 
+/**
+ * Updates the payment element's default values.
+ */
+function updatePaymentElementDefaultValues() {
+	if ( ! gatewayUPEComponents?.card?.upeElement ) {
+		return;
+	}
+
+	const paymentElement = gatewayUPEComponents.card.upeElement;
+	paymentElement.update( getDefaultValues() );
+}
+
 /**
  * Submits the provided jQuery form and removes the 'processing' class from it.
  *

client/stripe-utils/utils.js

@@ -416,6 +416,32 @@ export const getUpeSettings = () => {
 	return upeSettings;
 };
 
+/**
+ * Craft the defaultValues parameter, used to pre-fill
+ * user email and phone number for Link in the Payment Element.
+ *
+ * @return {Object} The defaultValues object for the Payment Element.
+ */
+export const getDefaultValues = () => {
+	const userEmail = document.getElementById( 'billing_email' )?.value;
+	if ( ! userEmail ) {
+		return {};
+	}
+
+	const userPhone =
+		document.getElementById( 'billing_phone' )?.value ||
+		document.getElementById( 'shipping_phone' )?.value;
+
+	return {
+		defaultValues: {
+			billingDetails: {
+				email: userEmail,
+				phone: userPhone,
+			},
+		},
+	};
+};
+
 /**
  * Show error notice at top of checkout form.
  * Will try to use a translatable message using the message code if available

readme.txt

@@ -111,7 +111,7 @@ If you get stuck, you can ask for help in the [Plugin Forum](https://wordpress.o
 == Changelog ==
 
 = 9.0.0 - xxxx-xx-xx =
-* Add - Pre-fill user email and phone number for Link in the Payment Element and block checkout.
+* Add - Pre-fill user email and phone number for Link in the Payment Element.
 * Remove - Remove Link autofill modal feature.
 * Update - Improve accuracy of webhook status information displayed in settings page.
 * Tweak - Standardize ECE Express payment buttons on Pay for Order page to match cart and checkout itemization behavior.