diff --git a/changelog.txt b/changelog.txt index 6461816b1..35f2f61b6 100644 --- a/changelog.txt +++ b/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. diff --git a/client/classic/upe/payment-processing.js b/client/classic/upe/payment-processing.js index 703dd675a..cc2a369cc 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, @@ -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. * diff --git a/client/stripe-utils/utils.js b/client/stripe-utils/utils.js index 8611acdd3..0c3fdb3e3 100644 --- a/client/stripe-utils/utils.js +++ b/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 diff --git a/readme.txt b/readme.txt index 15319971d..17928f3f6 100644 --- a/readme.txt +++ b/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.