How could I prevent the PayPal modal after clicking the button PayPal and try to validate it first until this is done?

Question

I'd like to get the next workflow when I click the PayPal button ( no filled fields) It doesn't have to show the PayPal modal and get's the API information to validate data. On the other hand, if it is filled correctly. It could proceed with the PayPal modal. Any idea, please.

Updated: I changed the package and I'm trying to send the data filled in the text fields and when I click the Paypal button ... It sends nothing but when I click a normal button It sends what I wrote on the text fields. Moreover, I'm struggling with the condition of the variable newJudge1. I have no idea how to get the value inside the component when It comes from the method submitOrder I was using useState with a variable newJudge but It didn't work. How could I get the value of newJudge inside of submitOrder?.SubmitOrder defines it text fields are filled or no.

  <button type="button" onClick={(e) => submitOrder( 'payonline')} className="btn btn-primary">paypal</button>

<PayPalScriptProvider   options={{ "client-id": "AWMf_5zpQPNAay2g4mLmFFldXbXycJKilI1utjKf2xm8ba3asdadasdasdasdasdxczxczxc" }}>
                        <PayPalButtons style={{ layout: "horizontal" }}
                            onClick={(data, actions) => {
                             
                                submitOrder('payonline');

                                const newJudge1={newJudge };
                                if(newJudge1 === 2 ){
                                    //console.log({newJudge})
                                    return actions.reject();
                                }else{
                                    return actions.resolve();
                                }
                            }}


                            createOrder={(data, actions) => {
                                
                                    return actions.order.create({

                                        purchase_units: [{
                                            amount: {
                                              value: '0.01'
                                            }
                                          }]

                                    });
                                
                            }}

                            

                        />
                    </PayPalScriptProvider>

This is submitOrder const [newJudge, setNewJudge] = useState(0);

const submitOrder = (e, payment_mode) => {
  var data = {
    firstname: checkoutInput.firstname,
    lastname: checkoutInput.lastname,
    phone: checkoutInput.phone,
    email: checkoutInput.email,
    address: checkoutInput.address,
    city: checkoutInput.city,
    state: checkoutInput.state,
    zipcode: checkoutInput.zipcode,
    payment_mode: payment_mode,
    payment_id: ''
  }
    axios.post('/api/place-order', data).then(res => {

                console.log(data);
                if (res.data.status === 200) {
                    setNewJudge(1);
                    //  swal("Success", res.data.message, "success");
                    setError([]);
                    // navigate('/thank-you');
                } else if (res.data.status === 422) {
                    swal("All fields are mandatory", "", "error");
                    setNewJudge(2);

                    setError(res.data.errors);

                }
            });
}

Answer 1

I'm using react-paypal-button-v2 package.

That isn't an official package, consider @paypal/react-paypal-js instead

It appears your question is about validation before any modal appears. This can be done with a combination of onInit and onClick callback functions. Here's the HTML/JS example, which you can adapt to react:

<p id="error" class="hidden">Please check the checkbox</p>
<label><input id="check" type="checkbox"> Check here to continue</label>

<script>
  paypal.Buttons({

    // onInit is called when the button first renders
    onInit: function(data, actions) {

      // Disable the buttons
      actions.disable();

      // Listen for changes to the checkbox
      document.querySelector('#check')
        .addEventListener('change', function(event) {

          // Enable or disable the button when it is checked or unchecked
          if (event.target.checked) {
            actions.enable();
          } else {
            actions.disable();
          }
        });
    },

    // onClick is called when the button is clicked
    onClick: function() {

      // Show a validation error if the checkbox is not checked
      if (!document.querySelector('#check').checked) {
        document.querySelector('#error').classList.remove('hidden');
      }
    }

  }).render('#paypal-button-container');
</script>