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

client/classic/upe/payment-processing.js

@@ -3,6 +3,8 @@ import {
 	appendPaymentMethodIdToForm,
 	getPaymentMethodTypes,
 	initializeUPEAppearance,
+	isLinkEnabled,
+	getDefaultValues,
 	getStripeServerData,
 	getUpeSettings,
 	showErrorCheckout,
@@ -82,6 +84,7 @@ function createStripePaymentElement( api, paymentMethodType = null ) {
 	const elements = api.getStripe().elements( options );
 	const createdStripePaymentElement = elements.create( 'payment', {
 		...getUpeSettings(),
+		...getDefaultValues(),
 		wallets: {
 			applePay: 'never',
 			googlePay: 'never',
@@ -92,9 +95,25 @@ function createStripePaymentElement( api, paymentMethodType = null ) {
 	gatewayUPEComponents[
 		paymentMethodType
 	].upeElement = createdStripePaymentElement;
+
+	if ( isLinkEnabled() && paymentMethodType === 'card' ) {
+		document.getElementById( 'billing_email' ).onblur = function () {
+			updateStripePaymentElement();
+		};
+	}
+
 	return createdStripePaymentElement;
 }
 
+function updateStripePaymentElement() {
+	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,25 @@ export const getUpeSettings = () => {
 	return upeSettings;
 };
 
+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