Capture VAT numbers on Checkout page

The most reasonable place for a VAT number field is the first page of the checkout process - where customers enter their personal details, payment details and address.

Shopify checkout page VAT number

Example of a checkout page with the VAT number field

VAT registration numbers will be stored as part of customer notes. Sufio will automatically validate these VAT registration numbers and set business customers as tax-exempt when applicable. Moreover, your customers' VAT registration numbers will also be included on your invoices.

Note

Due to Shopify’s policy, please note that only stores running on Shopify Plus are allowed to customize checkout.

To add the VAT number field to the checkout page:

  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="fieldset fieldset--vat-number" data-additional-fields>
    <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>
</div>

<script type="text/javascript">
    if (window.jQuery) {
        jquery = window.jQuery;
    } else if (window.Checkout && window.Checkout.$) {
        jquery = window.Checkout.$;
    }
  
    jquery(function() {
        var address;

        if (jquery('.section--shipping-address .section__content').length) {
            address = jquery('.section--shipping-address .section__content');
        } else if (jquery('.section--billing-address .section__content').length) {
            address = jquery('.section--billing-address .section__content');
        } else {
            console.log('Missing billing or shipping address sections.');
            return;
        }

        var vat_number_field = jquery('.fieldset--vat-number');
        address.append(vat_number_field);
        
        var form = address.parents('form');
      
        jquery('button[type=submit]', form).one("click", function() {    
            var email = jquery('input[name="checkout[email]"]').val() || jquery('input#checkout_email_or_phone').val();
            var vat_no = jquery('input[name="checkout[attributes][VAT Registration Number]"]').val();
            if ((email) && (vat_no)) {
                jquery.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
                        jquery('button[type=submit]', form).click();
                    }
                });
            } else {
                return true;
            }

            // Proceed to the next step after one second
            setTimeout( function () { 
                jquery('button[type=submit]', form).click();
            }, 5000);

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

View VAT Exemptions

When your business customer enters a VAT registration number at checkout, a VAT exemption request is listed on the View VAT Exemptions page in your Sufio account.

This page lists all successful and unsuccessful exemption requests made on your online store. Additionally, status filtering allows you to review and troubleshoot the VAT exemption requests quickly if 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.

To learn more on how to use this page—its useful features and statuses, have a look at our View VAT Exemptions article.

Need help?

Do you need help with inserting the code snippet into your Shopify store theme code? We'll be happy to assist! Please contact our support team.