# Validate user input (/platforms/checkout/standard/customize/validate-user-input)



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 [#know-before-you-code]

> **Info:** ### Get Started [#get-started]
>
> Complete the steps in **Get started** to get the following sandbox account information from the Developer Dashboard:
>
> * Your personal and business sandbox accounts.
> * Your access token.
>
> [Get started](/platforms/get-started/)

> **Info:** ### PayPal Checkout [#paypal-checkout]
>
> This feature modifies an existing PayPal Checkout integration and uses the following:
>
> * [JavaScript SDK:](/sdk/js/) Adds PayPal-supported payment methods.
> * [Orders REST API:](/api/orders/v2) Create, update, retrieve, authorize, and capture orders.
>
> [PayPal Checkout](/platforms/checkout/standard/)

> **Info:** ### Explore PayPal APIs with Postman [#explore-paypal-apis-with-postman]
>
> You can use Postman to explore and test PayPal APIs. Learn more in our [Postman guide](/api/rest/postman).

## Synchronous validation [#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.

```text lineNumbers
<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>
```

## Asynchronous validation [#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.

```text lineNumbers
<p id="error" class="hidden">Please check your information to continue</p>
<script>
  paypal.Buttons({
    // onClick is called when the button is clicked
    onClick: function(data, actions) {
      // Return a promise from onClick for async validation
      return fetch('/my-api/validate', {
        method: 'post',
        headers: {
          'content-type': 'application/json'
        }
      }).then(function(res) {
        return res.json();
      }).then(function(data) {
        // If there is a validation error, reject, otherwise resolve
        if (data.validationError) {
          document.querySelector('#error').classList.remove('hidden');
          return actions.reject();
        } else {
          return actions.resolve();
        }
      });
    }
  }).render('#paypal-button-container');
</script>
```