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

[annemirasol]

Completes #3619

Changes proposed in this Pull Request:

Similar to #3620 for block checkout, we will pre-fill the email address and phone number fields in the classic (shortcode) checkout, to improve the user experience for Link in the Payment Element.

Testing instructions

1. Enable Link as a payment method.

Unregistered user

1. As a shopper, add a product to cart and go to classic/shortcode checkout.
2. Enter your test email address, one that is NOT registered with Link.
3. Complete shipping/billing details and enter a phone number.
4. In the Payment Element, after filling in the card number, expiry and CVC, you should see the option Save your info for secure 1-click checkout with Link appear.
5. Check the checkbox. You should see pre-filled email address and phone number fields. See Screenshot 1.
6. Verify that you can complete the purchase without any problem.

Screenshot 1: Notice how the email address and phone number are pre-filled.

Registered user

1. As a shopper, add a product to cart and go to classic/shortcode checkout.
2. Enter your test email address, one that is registered with Link.
   • You can use the now-registered email address from the previous test.
3. In the Payment Element, notice your Link-registered email address with challenge code boxes. Since we are in test mode, you may enter any 5-digit number to authenticate. See Screensot 2.
4. You should now see your saved credit cards. See Screenshot 3.
5. Verify that you can complete the purchase without any problem.

Screenshot 2: Notice how the email address is pre-filled.

Screenshot 3: After authentication via challenge code, user's saved credit cards are available for use.

---

• Covered with tests (or have a good reason not to test in description ☝️)
• Added changelog entry in both changelog.txt and readme.txt (or does not apply)
• Tested on mobile (or does not apply)

Post merge

• Added testing instructions to the Release Testing Instructions wiki page (or does not apply)
• Added the needs docs label (or does not apply)
• Included this PR in the Release Thread scope (or does not apply)

[wjrosa]

Optional: Maybe we could have a specific function to avoid duplicate code? Something like:

function maybeAttachPaymentElementDefaultValueUpdateToBlur( elementId ) {
	if ( ! document.getElementById( elementId ) ) {
		return;
	}

	document.getElementById( elementId ).onblur = function () {
		updatePaymentElementDefaultValues();
	};
}

Not the best name. And I know it is just one almost-duplicated line, but these things tend to grow fast.

[annemirasol]

Good suggestion! Tidied it up in e2572e0

[wjrosa]

Nice work! Code is good (left an optional suggestion) and works as described:

Unregistered user

5. Check the checkbox. You should see pre-filled email address and phone number fields. See Screenshot 1.

6. Verify that you can complete the purchase without any problem.

Registered user

5. You should now see your saved credit cards. See Screenshot 3.

5. Verify that you can complete the purchase without any problem.