How validate the custom form on click of braintree PayPal checkout button?

Question

I want to validate custom PHP form on click of the Braintree PayPal checkout button. Currently, its redirect to PayPal screen if the form is not filled properly.

So I wan to stop opening PayPal popup window if form having an invalid input.

Here is my code for it.

Is this possible then please share some idea

braintree.client.create({
        authorization: ''
    }, function (clientErr, clientInstance) {

        // is invalid.
        if (clientErr) {
            console.error('Error creating client:', clientErr);
            return;
        }

        // Create a PayPal Checkout component.
        braintree.paypalCheckout.create({
            client: clientInstance
        }, function (paypalCheckoutErr, paypalCheckoutInstance) {


            if (paypalCheckoutErr) {
                console.error('Error creating PayPal Checkout:', paypalCheckoutErr);
                return;
            }

            // Set up PayPal with the checkout.js library
            paypal.Button.render({
                env: 'sandbox', // or 'sandbox'

                payment: function () {
                    return paypalCheckoutInstance.createPayment({

                    });
                },

                onAuthorize: function (data, actions) {
                    return paypalCheckoutInstance.tokenizePayment(data, function (err, payload) {
                        // Submit `payload.nonce` to your server.                        
                        form.submit();

                    });
                },

                onCancel: function (data) {
                    console.log('checkout.js payment cancelled', JSON.stringify(data, 0, 2));
                },

                onError: function (err) {
                    console.error('checkout.js error', err);
                }
            }, '#paypal-button').then(function () {

            });
        });
    });

Answer 1

_{Full disclosure: I work at Braintree. If you have any further questions, feel free to contact support.}

The easiest way to do this it to programmatically disable the submit button until the fields are correct. You could do this by adding something like the following (and adding in your own custom logic or validation):

if (dropinInstance.isPaymentMethodRequestable()) {
    // This will be true if you generated the client token
    // with a customer ID and there is a saved payment method
    // available to tokenize with that customer.
    submitButton.removeAttribute('disabled');
  }

  dropinInstance.on('paymentMethodRequestable', function (event) {
    console.log(event.type); // The type of Payment Method, e.g 'CreditCard', 'PayPalAccount'.
    console.log(event.paymentMethodIsSelected); // true if a customer has selected a payment method when paymentMethodRequestable fires

    submitButton.removeAttribute('disabled');
  });

  dropinInstance.on('noPaymentMethodRequestable', function () {
    submitButton.setAttribute('disabled', true);
  });