feat: improve express checkout handling by surfacing errors

[rbcorrales]

All Submissions:

• Have you followed the Newspack Contributing guideline?
• Does your code follow the WordPress' coding standards and VIP Go coding standards?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

Express Checkout (GPay/Apple Pay) errors were failing silently in the modal checkout because they use the WooCommerce Store API, which doesn't trigger the classic checkout_error event that the modal relies on. Instead, the payment gateway plugin appends error elements directly to the DOM, but the modal's processing screen remains visible, and users see no feedback.

This PR adds a MutationObserver to detect when error elements (.woocommerce-error or .wc-block-components-notice-banner.is-error) are added to the checkout container. When detected, it applies Newspack styling, dispatches the placeOrderErrorEvent to hide the processing screen, and scrolls the error into view. The clearNotices() function was also updated to preserve the .woocommerce-notices-wrapper container, allowing payment plugins to continue appending errors to it.

This fix applies to any error returned by the Store API checkout endpoint (/wp-json/wc/store/v1/checkout). For example, when a user already has an account with the same email, it returns this:

{
    "code": "registration-error-email-exists",
    "message": "An account is already registered with email@example.com. Please log in or use a different email address.",
    "data": {
        "status": 400
    }
}

Or when the billing address from GPay/Apple Pay is missing required fields:

{
  "code": "woocommerce_rest_invalid_address",
  "message": "There was a problem with the provided billing address: Province is required, Postcode \/ ZIP is required",
  "data": {
    "errors": {
      "billing": [
        "Province is required",
        "Postcode \/ ZIP is required"
      ]
    },
    "status": 400
  }
}

Closes NPPM-2426.

How to test the changes in this Pull Request:

1. Enable Express Checkout in WooCommerce > Settings > Payments > Stripe > Express Checkout > Enable > Customize > Enable Checkout page.
2. Ensure you have an existing WordPress account on the site with the same email as your GPay/Apple account and that you're not currently logged in (there's a check to prevent loading the checkout modal if you're logged in and subscribed).
3. Add a checkout button to a page or post, with a subscription product.
4. Open the modal checkout and attempt to pay via GPay or Apple Pay.
5. Verify the error message "An account is already registered with [email]..." is displayed, and the processing screen is hidden.
6. Test closing the modal via X button and reopening or via the Cancel button, and verify normal checkout still works.
7. Test a successful Express Checkout payment to verify it still completes normally.
8. Other issues, like the missing address fields, might not be entirely replicable with a Stripe sandboxed account, as it uses a placeholder address to not share the real account data with the site (at least on my tests with GPay).

Other information:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your changes, as applicable?
• Have you successfully ran tests with your changes locally?

[rbcorrales]

Thanks @dkoo!

[github-actions]

Hey @rbcorrales, good job getting this PR merged! 🎉

Now, the needs-changelog label has been added to it.

Please check if this PR needs to be included in the "Upcoming Changes" and "Release Notes" doc. If it doesn't, simply remove the label.

If it does, please add an entry to our shared document, with screenshots and testing instructions if applicable, then remove the label.

Thank you! ❤️

[matticbot]

🎉 This PR is included in version 4.21.0-alpha.1 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀