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) {
.....
},
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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With