[BUG]: actions.disable() in onInit doesn't disable the button

[shinchannn]

Is there an existing issue for this?

• [X] I have searched the existing issues.

🐞 Describe the Bug

Hi, I'm trying to validate the my form before entering PayPal flow. As far as I know, there's no code example out there about how to implement this in <PayPalButtons/>, so I referred to the documentation in this page. I tried to attach the prop onInit to my <PayPalButtons/> component. The function runs, as I can tell from the content it prints. However, the window pops up upon click like nothing was changed. So even my first step in validation can't be finished.

😕 Current Behavior

The window pops up even if actions.disable() is written in onInit.

🤔 Expected Behavior

I tried to call the actions.disable() in the environment using <script>, it won't respond to clicking.

🔬 Minimal Reproduction

Codesanbox here for reproduction. (https://codesandbox.io/s/oninit-issue-464e8b).

🌍 Environment

| Software         | Version(s) |
| ---------------- | ---------- |
| react-paypal-js  |            |
| Browser          |            |
| Operating System |            |

Relevant log output

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

➕ Anything else?

No response

[AwaMelvine]

hi @shinchannn, I am facing the same issue as well. Did you manage to find a solution or workaround for this?

[gregjopa]

Hi @shinchannn and @AwaMelvine we provide a disabled prop for managing the disabled state in react-paypal-js. You should be able to use this instead of wiring up the behavior in onInit(). Ex:

[github-actions[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!

[MatthewTang]

bump

[MatthewTang]

Hi @shinchannn and @AwaMelvine we provide a disabled prop for managing the disabled state in react-paypal-js. You should be able to use this instead of wiring up the behavior in onInit(). Ex:

This solution doesn't quite fit my use case, since I need to post my server and ensure a successful response after they click the paypal button but before letting the payapl popup appear.

Hope this make sense, Thanks!

[AndrewEastwood]

does this mean that this is no longer working with react?

onInit={async (data, actions) => {
  const ok = await canProceed();
  ok ? actions.enable() : actions.disable();
}}