<div class="container">
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Endpoint Tester</h5>
      <h6 class="card-subtitle text-muted">Use this form to validate an endpoint using <a href="https://wordpress.org/plugins/woo-license-keys/">WooCommerce License Keys</a></h6>
      <br>
      <form class="card-text">
        <div class="form-group row">
          <label for="url" class="col-sm-2 col-form-label">API Base URL</label>
          <div class="col-sm-10">
            <input type="text" id="url" class="form-control form-control-sm" placeholder="https://your.domain.com/wp-admin/admin-ajax.php"/>
          </div>
        </div>
        <div class="form-group row">
          <label for="action" class="col-sm-2 col-form-label">Endpoint</label>
          <div class="col-sm-10">
            <select name="action" id="action" class="form-control form-control-sm">
              <option value="license_key_activate">Activation</option>
              <option value="license_key_validate">Validation</option>
              <option value="license_key_deactivate">Deactivation</option>
            </select>
          </div>
        </div>
        <div class="form-group row">
          <label for="store_code" class="col-sm-2 col-form-label">Store Code</label>
          <div class="col-sm-10">
            <input type="text" name="store_code" id="store_code" class="form-control form-control-sm" placeholder="[STORE CODE]"/>
          </div>
        </div>
        <div class="form-group row">
          <label for="sku" class="col-sm-2 col-form-label">SKU</label>
          <div class="col-sm-10">
            <input type="text" name="sku" id="sku" class="form-control form-control-sm" placeholder="[SKU]"/>
          </div>
        </div>
        <div class="form-group row">
          <label for="license_key" class="col-sm-2 col-form-label">License Key</label>
          <div class="col-sm-10">
            <input type="text" name="license_key" id="license_key" class="form-control form-control-sm" placeholder="[CUSTOMER LICENSE KEY]"/>
          </div>
        </div>
        <div class="form-group row">
          <label for="domain" class="col-sm-2 col-form-label">Domain</label>
          <div class="col-sm-10">
            <input type="text" name="domain" id="domain" class="form-control form-control-sm" value="https://codepen.io" disabled/>
          </div>
        </div>
        <div id="activation_info" class="form-group row" style="display:none">
          <label for="activation_id" class="col-sm-2 col-form-label">Activation ID</label>
          <div class="col-sm-10">
            <input type="text" name="activation_id" id="activation_id" class="form-control form-control-sm" placeholder="[ACTIVATION ID]"/>
          </div>
        </div>
        <button type="submit" class="btn btn-primary mb-2">Make Request</button>
      </form>
      <div id="response" style="display:none">
        <br><h5 class="card-title">Response</h5>
        <pre class="alert alert-primary"></pre>
      </div>
    </div>
  </div>
</div>
$('form').submit(function(e) {
  e.preventDefault();
  $.ajax( $('#url').val(), {
    data: $('form').serialize(),
    dataType: 'html',
    success: function(response) {
      $('#response').show();
      $('#response').find('pre').html(response);
    }
  });
})

$('#action').change(function() {
  if ($(this).val() === 'license_key_activate') {
    $('#activation_info').hide()
  } else {
    $('#activation_info').show()
  }
});
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.1.3/cerulean/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js