Paypal-checkout-components: Trigger validation only on click

[georgiosd]

Hi,

I've got a ReactJS app using the paypal button where I need to enable/disable the button only when the button is clicked. This is because if something is invalid, I invoke a scroller to the relevant part of the page (it's somewhat long).

However, the problem is that the validation is called when the button is rendered and the scroller is invoked immediately. Binding to the click event is not possible because at the time of the first call of validate, the buttom is not yet fully rendered.

Any ideas?

PS: It would be a good idea to expose the ref to the actual button through the react component as explained in https://facebook.github.io/react/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components

[bluepnume]

There's a lot of context for validate() here: https://github.com/paypal/paypal-checkout/issues/139

TLDR: Since the button is in an iframe, you can't directly listen for the click event and prevent the popup being opened. There's no technical way around this.

The idea behind validate() is that you:

1. Separate your validation logic into:

   • isValid() which checks the forms validity without showing any error messages
   • showValidationErrors() which actually shows the messages

2. In validate(), add event listeners to listen for changes to the form. Then in the event listener:

   • If isValid() passes, call actions.enable().
   • Otherwise call actions.disable().

   This will preemptively enable or disable the button based on the form's validity.

3. In onClick(), check isValid()

   • If isValid() is false, call showValidationErrors()
   • Otherwise hide any validation errors

There's a demo of this approach here: https://developer.paypal.com/demo/checkout/#/pattern/validation

PS: It would be a good idea to expose the ref to the actual button through the react component as explained in https://facebook.github.io/react/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components

This isn't possible since the actual button is contained within an iframe, out of reach of the parent window.

[georgiosd]

I appreciate the prompt response! That makes sense, thank you.