How to stop the modal window from appearing when the button is clicked, but some validations I run in onClick fail?

^{Originally posted by Iorweth333 September 10, 2025}
I'm using the React package. Regarding the onClick callback the page in NPM repository says

Display of the payment sheet can be prevented by calling event.preventDefault().

But event.preventDefault() doesn't stop the modal window from appearing. In onClick callback I run a validation of the form the button is a part of and when the form is invalid I call event.preventDefault(). The window appears anyway, shows loading spinner and then an error message and an instruction to go back to the payment page because not all information necessary was provided.

The error message in the modal window is perfectly right, but this is not what I expected after reading

payment sheet can be prevented

I investigated the code of both google-pay-button and pay.js and I found there is a flag EnableLoadingScreenForPopupMode which seemed to allow this behaviour, so I changed it in the onReadyToPayChange callback:

  function changeFlag() {
    // @ts-ignore
    if (window.google.payments.api.EnableLoadingScreenForPopupMode) {
    // @ts-ignore
      window.google.payments.api.EnableLoadingScreenForPopupMode = false;
    }
  }

  return (
    <GooglePayButton
      onReadyToPayChange={changeFlag}
//...

But since only the PaymentsClient is documented among all the things that live in google.payments.api I guess this is a hack and I shouldn't really let this go to the prod.

Is there any legit way to do this?