Paypal javascript sdk onClick not prevent popup showing

Question

I follow this documentation to integrate paypal javascript sdk. I want validate user input after paypal button click and prevent paypal window display if validation fail.

paypal.Buttons({
          onClick: function(data, actions)  {
            console.log('click >>>>>')
            return actions.reject();
            // return false;
          },
          createOrder: function(data, actions) {
            return fetch('/checkout/submit/paypal/create_order', {
              method: 'post',
              headers: {
                'content-type': 'application/json'
              },
              body: JSON.stringify(_this.getSubmitData())
            }).then(function(res) {
              return res.json();
            }).then(function(detial) {
              return detial.orderId
            });
          },
          onApprove: function(data, actions) {
            // data > { billingToken, facilitatorAccessToken, orderID, payerID, paymentID }
            return fetch('/checkout/submit/paypal/capture_order?orderId=' + data.orderID, {
              method: 'post',
              headers: {
                'content-type': 'application/json'
              },
            }).then(function(res) {
              return res.json();
            }).then(function(details) {
              console.log(details);
            })
          }
        }).render('#paypal-button-container');

When i click the paypal button, console show my message click >>>>> and a new window display and disappear immeditely.

I don't think it should show a new window.

Answer 1

I don't think it should show a new window.

Nonetheless, that's how it works if you reject from onClick.

To prevent the popup from opening, you need to disable the buttons in onInit and add a listener for re-enabling them when appropriate, as documented in the link in your question.