Shopify customer account -- capture and validate VAT numbers and set business customers as tax exempt when applicable. Displays warning if VAT number is not valid. Used by Sufio for Shopify. https://sufio.com/articles/shopify/taxes/vat-eu-shopify/vat-exempt-eu/customer-account-page/

shopify-customer-account-vat-examptions-validation.html

<!-- Shopify customer account -- capture and validate VAT numbers and set business customers as tax exempt when applicable. Displays warning if VAT number is not valid. Used by Sufio for Shopify (www.sufio.com/shopify). -->
<div class="vat-number-display">
  {% if customer.metafields.sufio.vat_number %}
    VAT Number: {{ customer.metafields.sufio.vat_number }} 
    <br />
    <a href="#" class="vat-edit-link">Edit</a>
  {% else %}
    <a href="#" class="vat-edit-link">Add VAT number</a>
  {% endif %}
</div>

<div class="vat-number-form" style="display:none">
  <form>
    <label for="vat_reg_no">VAT Registration Number</label>
    <input class="vat_reg_no" type="text" name="customer[note][VAT Registration Number]" placeholder="VAT Registration Number" value="{{ customer.metafields.sufio.vat_number }}" />
    <input type="submit" value="Save" class="btn">
  </form>
</div>

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function(event) {
    $('a.vat-edit-link').click( function() {
      $('.vat-number-display').hide();
      $('.vat-number-form').show();
      return false;
      });

    $('.vat-number-form form').submit( function() {
      var vat_reg_no = $('input.vat_reg_no').val();
      var data = { email: "{{ customer.email }}", vat_no: vat_reg_no };
      if (vat_reg_no == '')
        data['update'] = true;
      $.ajax({
        type : "GET",
        dataType: "jsonp",
        url: "/apps/sufio/customer-vat/",
        data: data,
        success: function(data) {
          if ((vat_reg_no != '') & (!data.vat_no_valid)) {
            alert('VAT number is not valid.');
          } else {
            location.reload();
      	  }
        }
      });

      return false;
    });
  });
</script>