Fix missing error message in Express Payments

[annemirasol]

When the shopper is using Express Payment, e.g. GooglePay, and the order creation fails due to account creation errors, the error message is not displayed. (see Screenshots 1 and 2)

The empty error message is caused by firstChild returning a text node (i.e. \n) when retrieving the error message from WooCommerce. To fix this, we use firstElementChild to ensure we get the first Element node.

Fixes #2430

Changes proposed in this Pull Request:

• Use firstElementChild when retrieving the error message from WooCommerce, to ensure we get an Element node.

Testing instructions

(As the merchant, on any browser)

1. Enable Apple Pay/Google Pay: wp-admin/admin.php?page=wc-settings&tab=checkout&section=stripe&panel=methods
2. Disable guest checkout, but allow customers to create an account during checkout and on the My Accounts page (See Screenshot 4): wp-admin/admin.php?page=wc-settings&tab=account

(As the shopper, on a Chrome browser)

1. Add a product to your cart and go to checkout.
2. Make sure you can see the Google Pay button in the checkout page:
   • You need to be running on a publicly accessible server, or you need to have local tunneling setup (e.g. ngrok, Jurassic Tube)
   • In the same browser, you need to be logged in to a Google Pay account that has a payment method added: pay.google.com
   • To avoid accidental charges on your real cards, join the Google Pay API Test Cards allowlist, using the same Google account for your shopper's Google Pay: https://groups.google.com/g/googlepay-test-mode-stub-data
3. On a separate tab, register your Google Pay email address with the store, using the "My account" page in /my-account. You may skip this if your email is already registered.
4. Important: log out. If you do not see the "Log out" link, refresh the "My account" page.
5. Go back to checkout, and click the Google Pay button. A modal with fake test data (test credit cards and billing info) should pop up. (See Screenshot 1)
6. Click "Pay".
7. You should get a generic message at the bottom saying "There was an error processing your order."
8. Close the modal.
9. You should see a red box above the Google Pay button, with an error message saying, "An account is already registered with your email address. Please log in."

Screenshots

Screenshot 1: Google Pay modal with generic error.

^-^-^-^-^-^-^-^-^
Screenshot 2: After dismissing the Google Pay modal, we see the error box with an empty message.

^-^-^-^-^-^-^-^-^
Screenshot 3: Fixed error box

^-^-^-^-^-^-^-^-^
Screenshot 4: Account settings setup for the store

---

• 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)

[james-allan]

Nice work @annemirasol!

I confirmed the error on the public version of Stripe:

Google Pay	Apple Pay
Empty error box when displaying error after Google Pay	Empty error box when displaying error after Apple Pay

After uploading a zip of this branch I confirmed the fix.

Google Pay	Apple Pay

While the screenshots above were tested on the cart page, I also confirmed that the error messages weren't inadvertently impacted on the checkout and single product page too. 👍