fix/12: reposition error notice on classic checkout page

[MiguelAxcar]

All Submissions:

• Does your code follow the WooCommerce Sniffs variant of WordPress coding standards?
• Have you written new tests for your changes, as applicable?
• Have you successfully run tests with your changes locally?
• Will this change require new documentation or changes to existing documentation?

---

Changes proposed in this Pull Request:

This PR addresses the issue where payment gateway specific error messages are displayed out of context on the checkout page, improving the user experience by making error handling more intuitive and context-specific.

Initially, the idea was to highlight invalid fields in red, but this approach was not feasible due to the fields being embedded within an iframe hosted by Square. Limitations such as cross-origin restrictions and security concerns made this approach impractical.

The proposed solution ensures that error messages are repositioned near the payment method form, rather than appearing at the top of the page. This fix is specifically designed to work with the Classic Checkout Page.

This solution also overrides WooCommerce's default behavior of scrolling to the top of the page upon encountering errors. Instead, it scrolls to show the alert box only if any part of it is not visible within the viewport.

Additionally, it ensures that the Square credit card payment method is selected before repositioning the alert.

Closes #12.

Steps to test the changes in this Pull Request:

We aim to verify the repositioning of error notices on the Classic Checkout Page when using the Square Credit Card payment method.

Local environment setup

1. WooCommerce version: Use WooCommerce version 9.4.2
2. Square extension: Ensure the Square WooCommerce extension is installed, activated and connected in sandbox mode.
3. Themes: Test using a variety of themes, such as Storefront, TT5, TT4, TT3, etc.
4. Regenerate static assets: Run npm run build:dev before testing as this pull request changed JavaScript source code, affecting build artifacts.

Testing steps

1. Activate Square credit card payment method

   • Enable Square Credit Card as the payment method and configure it to use Square sandbox.

2. Enable "Detailed Decline Messages"

   • In the Square settings, activate the Detailed Decline Messages option to ensure specific error details are displayed for failed transactions.

3. Create an order

   • Add a product to your cart

4. Open the classic checkout page

   • Navigate to the classic checkout page on the frontend of the store.

5. Choose Square Credit Card as the payment method

   • Select (Square) Credit Card from the list of available payment methods on the checkout page.

6. Fill in credit card data to generate errors

   • Use the following test card data to simulate 03 errors:
     • Card Number: 4111 1111 1111 1111
     • Expiration: 01/40
     • CVV: 911
     • Postal Code: 99999
   • If additional error scenarios are needed, refer to the Square sandbox error documentation for more test card data combinations.

7. Verify error message behavior

   • Confirm that error notices are correctly aligned and displayed near the payment form.
   • Check that error messages are formatted properly and easily readable.

8. Confirm scrolling behavior

   • Ensure that if no part of the error message is visible within the viewport, the page scrolls automatically to the top of the error notice. If any part of the error message is visible, the scrolling won't be toggled.
   • Validate that the error message is in focus and no part of it is cut off from view when scrolled.

9. Test with different themes

   • Repeat the above steps using a variety of themes, such as Storefront, TT5, TT4, TT3, etc.
   • Validate that the error notices display correctly and scrolling behavior works consistently across all themes.

10. Expected outcome

    • Error notices should reposition appropriately, display correctly, and remain functional across all tested themes.
    • The page should automatically scroll to the error message if it is completely outside the visible viewport.

_{^{(Ensure the error notice is shown near the payment fields and the page scrolls to it when no part of it is visible when placing the order)}}

Changelog entry

Fix - Reposition payment error messages close to Payment Method form on the Classic Checkout page.

[qasumitbagthariya]

@MiguelAxcar Thanks for the PR.

QA update: ⚠️

I'm not able to see the latest changes on the following themes.

TT4 - Classic checkout

TT4 - Block checkout

Storefront - Classic checkout

[MiguelAxcar]

Hello @qasumitbagthariya . Thanks for testing this feature and giving detailed feedback.

The expected outcomes of this change are:

1. On Classic Checkout Page, error notices should be displayed on top of the payment method form instead of on the top of the page. The page should automatically scroll to the error message if no part of the error notice is visible on the viewport.
2. Block Checkout Page remains with no changes.

Commenting your screenshots:

TT4 - Classic checkout

Based on your screenshot, seems that the feature is working as expected - you're actually on Classic Checkout Page, and the error message the error message is being displayed above the payment. By the screenshot I also assume that the page scrolled to the error notice, as it's on top of the screen.

TT4 - Block checkout

Based on your screenshot, I can see no changes on this screen - error notice being displayed at the top of the page. I also assumed that the page scrolled to the error notice, i.e., keeping the current functionality untouched.

Storefront - Classic checkout

Based on your screenshot, seems that this is the Block Checkout page for Storefront, and not Classic Checkout Page. May you please check? Here's how both pages looks on my end:

Storefront Classic Checkout page (on my end)

Storefront Block Checkout page (on my end)

I'll be ready for provide any further needed information.

Thank you!

[qasumitbagthariya]

QA update: ✅

@MiguelAxcar Thanks for the details comment I have verify with different theme and size, it's looks good to me

Testing Environment

• WordPress: 6.7
• Theme: Storefront 4.6.0
• Theme: Twenty Twenty-Four 1.3
• Theme: Twenty Twenty-Five 1.0
• WooCommerce - 9.4.1
• PHP: 8.0.30
• Web Server: Nginx 1.20.2
• Browser: Chrome
• OS: macOS Ventura 13.3
• Branch: update/12-classic-checkout-notice-reposition

Storefront

TT5

TT4

Desktop

Steps to Test- As mentioned in the PR description.
Test Results - It is working as expected.
Functional Demo / Screencast -
Special Notes - Ready for code review (Woo)
Testing Document status:
Cases related to this Issue/PR are added to the Critical Flow Wiki pages:

• Yes
• Not Required/Applicable for this PR

---

[annemirasol]

Code looks good and behaves as expected! 🚢