search

Automattic / woocommerce-payments

Accept payments via credit card. Manage transactions within WordPress.
https://wordpress.org/plugins/woocommerce-payments/
Other
171 stars 69 forks source link

WooPay "Save my info" when checked disables the "Place order" button #9136

Closed pierorocca closed 1 month ago

pierorocca commented 1 month ago

Describe the bug

The checkout form by design keep the Place Order button in an enabled state so that shoppers can trigger validation errors. When the "save my info" checkbox is checked, the Place Order button is put into a disabled state. With pre-checking enabled by default, the impact of this becomes hugely amplified as form validation is blocked on page load.

To Reproduce

  1. On checkout, check the "save my info" checkbox and note that the Place Order button is disabled.

Expected behavior

  1. Checking "save my info" does not alter the core behavior of the form i.e. place order state is not altered and is active

Additional context

Applies to shortcode and Blocks checkouts

pierorocca commented 1 month ago

@nikkivias I think this component has been problematic for a long time, it was never noticed because it occured at the end of the form. The issue is that when it's pre-checked on page load, it puts Place Order into a disabled state thus shoppers are unable to trigger a validation error.

I'm proposing that the checkbox does not alter the Place Order state and for it to follow the validation pattern in the rest of the checkout form. Thoughts?

nikkivias commented 1 month ago

Hi @pierorocca which component has been problematic? I agree with your proposal. Like there shouldn't be anything that disables the Place order button.

pierorocca commented 1 month ago

It's the WooPay "Save my info" component. I turned on pre-checking the other day and suddendly the Place Order button was disabled on page load. Without it pre-checked, Place Order is only put into a disabled state when the user checks it..and it almost always immediately throws a validation error. Could you fully audit the experience please?

I've disabled pre-checking so you can simulate it by checking it manually and then going back to the top of the form.

nikkivias commented 1 month ago

@pierorocca as soon as I click save my info it disables Place order until I enter a valid number. Then it becomes enabled.

Also some display issue in my test store. Not sure about yours. image

pierorocca commented 1 month ago

@nikkivias If I use browser autofill I get layout issues on Blocks https://github.com/Automattic/woocommerce-payments/issues/9102#issuecomment-2234385052

Also looks like your test store is on an older version of WooPayments. The latest is 7.9.2. Can you upgrade and try again please?