Capture VAT numbers on Checkout page

The most logical place for a VAT number field is the first page of the checkout - where customers enter their personal details, payment details and address. However, please note that Shopify only allows stores running on Shopify Plus to customize checkout.

Shopify checkout page VAT number

Example of a checkout page with the VAT number field

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

To add the VAT number field to the checkout page:

  1. Go to the page Online Store → Themes in your Shopify admin. 
  2. Click the Actions button, then click Edit code. 
  3. Select customers/checkout.liquid in the left sidebar. Please note that only Shopify Plus stores can edit this 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();
            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>

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