Skip to content

Replace alert() with inline notices for gift card email validation #11540

@pierorocca

Description

@pierorocca

Description

The gift card email validation in the WooPay express checkout button uses window.alert() for error messages, which is inconsistent with the rest of the express checkout flow that uses showErrorMessage() (inline WooCommerce notices).

Current behavior: When a customer enters an invalid email in a gift card recipient field and clicks "Book with WooPay", a browser-native alert() dialog blocks the page with a generic "pay.woo.com says:" header.

Expected behavior: An inline WooCommerce notice banner should appear (consistent with other express checkout errors), which is non-blocking, dismissible, and auto-scrolls into view.

Location

  • client/checkout/woopay/express-button/use-express-checkout-product-handler.js — lines 54, 70, 82 use alert()
  • client/checkout/woopay/express-button/utils.jsshowErrorMessage() is the preferred pattern
  • client/checkout/woopay/express-button/woopay-express-checkout-button.js — also uses window.alert() for product page validation (lines 129, 138)

Implementation notes

showErrorMessage(context, errorMessage) requires a context parameter ('product', 'cart', 'checkout'). The useExpressCheckoutProductHandler hook doesn't currently receive context — it would need to be passed in or derived.

The button component (woopay-express-checkout-button.js) has the same issue with its own window.alert() calls for "Please select your product options" messages — these could be addressed in the same PR.

Related

Noticed during PR #11539 (remove validator dependency).

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions