Capture VAT numbers on Cart page

You can add the VAT number field to the cart page, so that your customers can enter their VAT numbers just before the checkout.

Shopify cart page VAT number

Example of a cart page with the VAT number field

This is a slightly less elegant solution. Customers who do not have an account (or are not logged in) will also need to enter their email address on the cart page. Furthermore, some customers might not see their taxes removed on the first page of the checkout, but taxes will be removed once they proceed to the second page.

VAT numbers will be stored as cart attributes. Sufio will automatically validate VAT numbers and set business customers as tax exempt when applicable. Customer VAT numbers will also be included on your invoices.

To add the email and VAT number field to the cart page:

Go to the page Online Store → Themes in your Shopify store admin.
Click the Actions button, then click Edit code.
Select cart.liquid in the left sidebar.
Insert the following code snippet inside the <form>. A good place for the field is just before the Check out button.

<!-- Shopify shopping cart -- capture and validate VAT numbers and set business customers as tax exempt when applicable. Used by Sufio for Shopify (www.sufio.com/shopify). -->
<div class="vat-fields">
  <div class="vat-email">
    {% if customer.email %}
    <input type="hidden" id="vat_email" name="attributes[Email]" value="{{ customer.email }}" />
    {% else %}
    <label for="email">Email</label>
    <input type="text" id="vat_email" name="attributes[Email]" value="{{ cart.attributes['Email'] }}" data-error-message="Please enter your email." />
    {% endif %}
  </div>

  <div class="vat-reg-number">
    <label for="vat_reg_no">VAT Registration Number</label>
    <input type="text" id="vat_reg_no" name="attributes[VAT Registration Number]" value="{{ cart.attributes['VAT Registration Number'] }}" />
  </div>
</div>

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function(event) {
    $('input[name=checkout],button[name=checkout],input[name=goto_pp],button[name=goto_pp]').on("click", function() {
      // If enabled, customers will be unable to submit VAT numbers without entering their emails
      var check_email = true;  

      var submit_button = $(this);
      var email_input = $('input#vat_email');
      var vat_input = $('input#vat_reg_no');
      var email = email_input.val();
      var vat_no = vat_input.val();
      email_input[0].setCustomValidity('');

      if ((email) && (vat_no)) {
        // Submit email and VAT number for validation and set customer as tax exempt
        $.ajax({
          type : "GET",
          dataType: "jsonp",
          url: "/apps/sufio/customer-vat/",
          data: { email: email, vat_no: vat_no },
          success: function(data) {
            // Proceed to checkout after successfully sending the VAT number
            var form = submit_button.parents('form');
            form.attr('action', form.attr('action') + '?checkout[email]=' + encodeURIComponent(email));
            submit_button.unbind().click();
          }
        });
      } else if ((vat_no) && (check_email)) {
        // Missing email - display error message
        email_input.prop("required", "required");
        email_input[0].setCustomValidity(email_input.data("error-message"));
        email_input[0].reportValidity();
        email_input.removeProp("required");
        return false;
      } else {
        return true;
      }

      // Proceed to checkout after one second
      setTimeout( function () { 
        submit_button.unbind().click();
      }, 1000);

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

Please note that if your store uses cart drawer (also called ajax cart), this code snippet needs to be added to a different file than cart.liquid. In most cases, it needs to be added to ajax-cart-template.liquid file.

Note

Please note that to make VAT exemptions work, you need to enable the VAT exemptions feature in your Sufio account.

Need help?

Do you need help with updating your store theme? Contact one of our Shopify Expert partners who will be happy to assist you.

Invoices for Shopify stores in the EU

Let Sufio automatically send invoices and receipts for every order made in your store.

Get Sufio - Invoices for EU stores from the Shopify App Store

Get Started