From 662605d788b622cfe4e371b2950fd930fe32111c Mon Sep 17 00:00:00 2001
From: Anne Mirasol <anne.mirasol@automattic.com>
Date: Thu, 21 Nov 2024 14:48:28 -0600
Subject: [PATCH] Pre-fill user info for Link in the Payment Element (classic
 checkout)

---
 client/classic/upe/payment-processing.js | 19 +++++++++++++++++++
 client/stripe-utils/utils.js             | 19 +++++++++++++++++++
 2 files changed, 38 insertions(+)

diff --git a/client/classic/upe/payment-processing.js b/client/classic/upe/payment-processing.js
index 703dd675a..ed47e3cb7 100644
--- a/client/classic/upe/payment-processing.js
+++ b/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.
  *
diff --git a/client/stripe-utils/utils.js b/client/stripe-utils/utils.js
index 8611acdd3..859b15557 100644
--- a/client/stripe-utils/utils.js
+++ b/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