Capture VAT numbers on the Cart page

With Sufio, you can also add a VAT registration number field to the cart page so that your customers can enter their VAT registration numbers just before checkout.

Customers who do not have an account on your Shopify store or who are not logged in will also need to enter their email address.

Shopify cart page VAT number

Example of a cart page with the VAT registration number field

In this article, we will cover

VAT registration numbers in your Shopify admin

When the customer enters their VAT registration number using this field, their VAT registration number will be saved as a cart attribute in your Shopify admin.

Sufio will then validate the VAT registration number and set the customer as tax-exempt when applicable. Lastly, the VAT registration number will be automatically included on your customer's invoice.

Add the VAT registration number field to the cart page

To add the VAT registration number field to the cart page, you need to customize your Shopify store theme:

In your Shopify admin, go to the Online Store → Themes page.
Click the Actions button, then click Edit code.
Select cart.liquid (or cart-template.liquid) in the left sidebar. You might use the upper search bar for a faster search.
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');
            var action = form.attr('action');
            form.attr('action', action + (action.indexOf('?') >= 0 ? '&' : '?') + '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>

Tip

You can modify the label part of the code snippet by replacing the VAT Registration Number text with anything else you'd like. Please contact our support team if you need to make the label multilingual. We'll be happy to help!

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.

Need help?

Do you need help with customizing your Shopify store theme? Please contact our experienced support team. We'll be happy to assist!

Caution

To make VAT exemptions work, you need to enable EU VAT exemptions in your Sufio account and correctly set up EU taxes in your Shopify store.

View VAT Exemptions

When your business customer enters a VAT registration number using the newly added VAT registration number field, a VAT exemption request will be listed on the View VAT Exemptions page in your Sufio account.

EU VAT Exemptions page in Sufio

An overview of VAT Exemption requests from the EU business customers

On this page, you can access all successful and unsuccessful exemption requests made on your Shopify store. The provided filtering options make it possible for you to quickly review and troubleshoot the VAT exemption requests when needed.

To access the View VAT Exemptions page:

In your Sufio account, go to the Settings → Taxes page.
Click on View VAT Exemptions.

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