CODEWITHSUNDEEP
jqueryvalidationpaypal
user1899829
user1899829

Reputation: 407

validating form before paypal simple checkout

I have a simple payment form on my website with an option to pay with paypal express checkout. The rest of my form is validated with jquery validation.

How can I set it up when you click the paypal button, it should validate the form before allowing the paypal popup to open?

$("#form1").validate();

I have a simple paypal render script

<script>
    paypal.Button.render({ ...

On the paypal documentation they offer something like this, but I don't know how to combine the 2

 validate: function(actions) {
       .....
    },

Upvotes: 3

Views: 6732

Answers (3)

Daehue Kim
Daehue Kim

Reputation: 64

<input type="text" class="required-input" id="business_name">
<input type="text" class="required-input" id="contact_name">
<input type="text" class="required-input" id="phone">
<input type="text" class="required-input" id="email">

<script>
let checker = checkData();
paypal.Buttons({
  onInit: function(data, actions) {
    actions.disable();
      $('.required-input').on('change', function(event) {
        checker = checkData();
        if (checker.result) {
          actions.enable();
        } else {
          actions.disable();
        }
      });
    },
    onClick: (data, actions) => {
      if (!checker.result) {
        if (checker.column == "business") {
          alert("Please enter your business name.");
        } else if (checker.column == "contact") {
          alert("Please enter your business name.");
        } else if (checker.column == "phone") {
          alert("Please enter your phone number");
        } else if (checker.column == "email") {
          alert("Please enter your email address.");
        }
      }
    },
    createOrder: (data, actions) => {
          ....................
    },
    onApprove: (data, actions) => {
          ....................
    },
    style: {
          ....................
    }
}).render('#paypal-button-container');

function checkData() {
  let result = 1;
  let column = '';
  if (!$('#business_name').val().trim()) {
    result = 0;
    column = 'business';
  }
  else if (!$('#contact_name').val().trim()) {
    result = 0;
    column = 'contact';
  }
  else if (!$('#phone').val().trim()) {
    result = 0;
    column = 'phone';                
  }
  else if (!$('#email').val().trim()) {
    result = 0;
    column = 'email';
  }
  return {'result': result, 'column': column};
}
</script>

Set on change event in onInit part and add some alert in Click section. Before submitting all inputs, the PayPal login pop-up won't appear

Upvotes: 0

naveh roliiir
naveh roliiir

Reputation: 91

the PayPal new API allows to validate a form that way There is no need to use the onInit func): 

paypal
  .Buttons({
    // Run when the user click on the paypal button
    onClick: function(data, actions) {
      // My validation...
      url = searchInput.value
      // My validation Function...
      const isURL = validURL(url)
      if (isURL) {

        // Remove Existing Error message
        if (searchError.classList[2]) {
          searchError.classList.remove('err-message--show')
        }    
        // Enable The Paypal Button
        return true
      } else {
        // Add Error messages
        searchError.classList.add('err-message--show')
        // The paypak wont continue to the paypal page...
        return false
      }
    },
    createOrder: function(data, actions) {
      return actions.order.create({
        purchase_units: [
          {
            amount: {
              value: price,
              currency_code: 'ILS'
            }
          }
        ]
      })
    }
  .render('#paypal-button-container')

There also onApproval and onError functions... (handle the result of the PayPal process...)

Hope I helped, Naveh

Upvotes: 5

bluepnume
bluepnume

Reputation: 17128

There's a full example here:

https://developer.paypal.com/demo/checkout/#/pattern/validation

In the validate() function you need to listen for the form changing and enable/disable the button.

Upvotes: 2

Related Questions