Validate user input
Last updated: Sept 26th, 5:19pm
Validate payer input when payment buttons are clicked. For example, your page might contain a web form that must be validated before starting the transaction.
For an optimal payer experience, complete validation before rendering the buttons. For validation that you can't complete before rendering the buttons, run synchronous or asynchronous validation when clicking the PayPal buttons.
Know before you code
Standard Checkout
This feature modifies an existing standard Checkout integration and uses the following:
- JavaScript SDK: Adds PayPal-supported payment methods.
- Orders REST API: Create, update, retrieve, authorize, and capture orders.
You need a developer account to get sandbox credentials
PayPal uses the following REST API credentials, which you can get from the developer dashboard:
- Client ID: Authenticates your account with PayPal and identifies an app in your sandbox.
- Client secret: Authorizes an app in your sandbox. Keep this secret safe and don't share it.
Explore PayPal APIs with Postman
You can use Postman to explore and test PayPal APIs. Learn more in our Postman guide.
Synchronous validation
Use synchronous validation when possible because it provides a better user experience. However, you may need to use asynchronous validation for asynchronous channels or server-side validation.
1<p id="error" class="hidden">Please check the checkbox</p>2<label><input id="check" type="checkbox"> Check here to continue</label>3<script>4 paypal.Buttons({5 // onInit is called when the button first renders6 onInit: function(data, actions) {7 // Disable the buttons8 actions.disable();9 // Listen for changes to the checkbox10 document.querySelector('#check')11 .addEventListener('change', function(event) {12 // Enable or disable the button when it is checked or unchecked13 if (event.target.checked) {14 actions.enable();15 } else {16 actions.disable();17 }18 });19 },20 // onClick is called when the button is clicked21 onClick: function() {22 // Show a validation error if the checkbox is not checked23 if (!document.querySelector('#check').checked) {24 document.querySelector('#error').classList.remove('hidden');25 }26 }27 }).render('#paypal-button-container');28</script>
Asynchronous validation
Some validation must be done on the server-side or using an asynchronous channel. Don't use asynchronous validation for any validation that can be done synchronously because it degrades the payer's experience.
1<p id="error" class="hidden">Please check your information to continue</p>2<script>3 paypal.Buttons({4 // onClick is called when the button is clicked5 onClick: function(data, actions) {6 // Return a promise from onClick for async validation7 return fetch('/my-api/validate', {8 method: 'post',9 headers: {10 'content-type': 'application/json'11 }12 }).then(function(res) {13 return res.json();14 }).then(function(data) {15 // If there is a validation error, reject, otherwise resolve16 if (data.validationError) {17 document.querySelector('#error').classList.remove('hidden');18 return actions.reject();19 } else {20 return actions.resolve();21 }22 });23 }24 }).render('#paypal-button-container');25</script>