Capture VAT numbers on the Checkout page

An ideal place for a VAT number field would be on the first page of the checkout process - where customers enter their name, address, and other details.

Shopify checkout page VAT number

Example of a checkout page with the VAT number field

Caution

Due to Shopify's policy, customizing checkout and placing a VAT registration number field on the checkout page is only available to Shopify stores on the Shopify Plus plan.

In this article, we will cover

VAT registration numbers in your Shopify admin

When your customer enters their VAT registration number using the VAT registration number field at checkout, the number will be stored as part of the customer notes within your Shopify admin.

The VAT registration number will be automatically validated, and the customer will be set up as tax-exempt when applicable. Moreover, the VAT registration number will appear on their invoices automatically.

Add the VAT registration number field to the checkout page

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

  1. In your Shopify admin, go to the page Online Store → Themes page. 
  2. Click the Actions button, then click Edit code. 
  3. Select checkout.liquid in the left sidebar. You might use the upper search bar for a faster search. Please note that only Shopify Plus stores can edit the checkout file. 
  4. Insert the following code snippet just before the closing </body> tag.
<div class="additional-checkout-fields" style="display:none">
  <div class="field field--optional field--vat-number">
    <div class="field__input-wrapper">
      <label class="field__label field__label--visible" for="checkout_vat_number">VAT number</label>
      <input placeholder="VAT number" autocomplete="vat number" data-backup="checkout_vat_number" class="field__input" aria-labelledby="error-for-vat_number" size="30" type="text" name="checkout[attributes][VAT Registration Number]" id="checkout_vat_number" value="{{ checkout.attributes["VAT Registration Number"] }}" />
     </div>
  </div>
</div>

<script type="text/javascript">
(function($) {
  // Document load/change
  $(document).on("page:load page:change", function() {
    // On Contact Information step
    if (Shopify.Checkout.step === "contact_information") {
      // Setup VAT field
      const addressFields = $("div[data-address-fields]");
      const vatField = $(".field--vat-number").clone();
      const contactForm = addressFields.parents("form");
      // Append VAT field to address fields
      addressFields.append(vatField);
      // Catch contact form submit
      $("button[type=submit]", contactForm).one("click", function() {
        const email = $('input[name="checkout[email]"]').val() || $("input#checkout_email_or_phone").val();
        const vat_no = $('input[name="checkout[attributes][VAT Registration Number]"]').val();
        if ((email) && (vat_no)) {
          $.ajax({
            type : "GET",
            dataType: "jsonp",
            url: "{{ shop.url }}/apps/sufio/customer-vat/",
            data: { email: email, vat_no: vat_no },
            success: function(data) {
              // Proceed to the next step after successfully sending the VAT number
              $("button[type=submit]", contactForm).click();
            }
          });
        } else {
          return true;
        }
        // Proceed to the next step after one second
        setTimeout( function () {
          $("button[type=submit]", contactForm).click();
        }, 5000);
        return false;
      });
      // Catch discount form submit
      const discountField = $("input[data-discount-field]");
      const discountForm = discountField.parents("form");
      $("button[type=submit]", discountForm).on("click", function() {
        const vatFieldInputSel = 'input[name="checkout[attributes][VAT Registration Number]"]';
        // Preserver VAT field value
        const vat_no = $(vatFieldInputSel).val();
        $('.additional-checkout-fields ' + vatFieldInputSel).val(vat_no);
      });
    }
  });
})(Checkout.$);
</script>

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:

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

See also

To learn more about its useful features and statuses, have a look at our View VAT Exemptions article.

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