India's New GST Invoice Format

I have customized a template for Indian users. It is limited to the known html variables and my knowledge. So those who find it useful may use the following template.

<table style="padding: 20px 20px">
<thead>
    <tr>
        <td colspan="99">
            <table style="margin-bottom: 10px"><tr>
                <td style="font-weight: bold; font-size: 32px">{% if title != 'Invoice' %}{{ title }}{% endif %}{% if title == 'Invoice' %}{{ title | replace: "Invoice", "Tax Invoice" }}{% endif %}</td>
                {% if business.logo != null %}<td style="text-align: right"><img src="{{ business.logo }}" style="max-height: 100px; max-width: 300px"></td>{% endif %}
            </tr></table>
            
            <table style="margin-bottom: 20px"><tr>
                <td style="width: 200px; border-left-width: 5px; padding-left: 10px; text-align: left">
                    {% for field in fields %}
                    <div style="font-weight: bold; font-size: 12px">{{ field.label }}</div>
                    <div style="margin-bottom: 10px; font-weight: bold; font-size: 16px">{{ field.text }}</div>
                    {% endfor %}
                </td>
                {% if title == 'Invoice' %}
                <td style="width: 260px; padding-left: 20px; border-color: #000000; border-left-width: 1px">
                {% for field in custom_fields %}
                {% if field.label == "Shipped To:" %}{% continue %}{% endif %}
                {% if field.label == "Notes" %}{% continue %}{% endif %}
                <div style="font-size: 12px; padding-bottom: 10px"><b>{{ field.label }}</b> {{ field.text | newline_to_br }}</div>
                {% endfor %}</td>{% endif %}
                <td style="width: 300px; padding-left: 10px; padding-right: 5px; text-align: left; vertical-align: top; border-top-width: 3px; border-bottom-width: 5px">
                    <div style="text-align:LEFT;font-weight: bold;font-size: 18px">{{ business.name }}</div>
                    <div style="text-align:LEFT;font-size: 12px">{{ business.address | newline_to_br }}</div>
                    <div style="text-align:LEFT;font-weight: bold;font-size: 14px">{{ business.identifier }}</div>
                </td>
            </tr></table>
            <table style="margin-bottom: 20px">
            <td style="width: 380px; text-align: left; border-color: #000000; border-bottom-width: 2px; border-top-width: 2px; border-left-width: 2px; border-right-width: 2px">
                {% if title == 'Invoice' %}<div style="padding-left: 5px; border-bottom-width: 2px; text-align:LEFT;font-weight: bold">Billed To:</div>{% endif %}
                <div style="padding-left: 20px">
                <div><b>{{ recipient.name }}</b> {{ recipient.code }}</div>
                <div>{{ recipient.address | newline_to_br }}</div>
                <div><b>{{ recipient.identifier }}</b></div></div>
            </td>
            {% if title == 'Invoice' %}{% for field in custom_fields %}{% if field.label == 'Shipped To:' %}
                <td style="width: 375px; padding-left: 5px; text-align: left; border-color: #000000; border-bottom-width: 2px; border-top-width: 2px; border-left-width: 0px; border-right-width: 2px">
                    <div style="padding-left: 5px; border-bottom-width: 2px; text-align:LEFT;font-weight: bold">{{ field.label }}</div>
                    <div style="padding-left: 20px">{{ field.text | newline_to_br }}</div>
                </td>{% endif %}{% endfor %}{% endif %}
            </table>

            <div style="font-size: 14px; font-weight: bold; margin-bottom: 20px">{{ description }}</div>
        </td>
    </tr>
    
    <tr>
        <td style="width: 25px; font-weight: bold; padding: 5px 5px; border-bottom-width: 1px; border-left-width: 1px; border-top-width: 1px; text-align:CENTER">#</td>
        {% for column in table.columns %}            
        <td style="font-weight: bold; padding: 5px 10px; text-align: {{ column.align }}; border-left-width: 1px; border-bottom-width: 1px; border-top-width: 1px{% if forloop.last == true %}; border-right-width: 1px{% endif %}{% if column.nowrap %}; white-space: nowrap; width: 80px{% endif %}">{{ column.label }}</td>
        {% endfor %}
    </tr>
</thead>
<tbody>
    {% assign i = 0 %}
    {% for row in table.rows %}
    {% assign i = i | plus: 1 %}
    <tr>
        <td style="width: 25px; padding: 5px 5px; border-left-width: 1px; text-align:CENTER">{{ i }}</td>
        {% for cell in row.cells %}
        <td style="padding: 5px 10px; text-align: {{ table.columns[forloop.index0].align }}; border-left-width: 1px{% if forloop.last == true %}; border-right-width: 1px{% endif %}{% if table.columns[forloop.index0].nowrap %}; white-space: nowrap; width: 80px{% endif %}">{{ cell.text | newline_to_br }}</td>
        {% endfor %}
    </tr>
    {% endfor %}
    <tr>
    {% for column in table.columns %}            
        <td style="border-bottom-width: 1px; border-left-width: 1px{% if forloop.last == true %}; border-right-width: 1px{% endif %}"></td>
    {% endfor %}
    </tr>
    {% for total in table.totals %}
    <tr>
        <td colspan="{{ table.columns | size }}" style="padding: 5px 10px; text-align: right{% if total.emphasis == true %}; font-weight: bold{% endif %}">{{ total.label }}</td>
        <td style="border-left-width: 1px; white-space: nowrap; border-right-width: 1px; border-bottom-width: 1px; padding: 5px 10px; text-align: right{% if forloop.first == true %}; border-top-width: 1px{% endif %}{% if total.emphasis == true %}; font-weight: bold{% endif %}">{{ total.text }}</td>
    </tr>
    {% endfor %}
    <tr><td colspan="{{ table.columns | size | plus:1 }}" style="border-right-width: 1px; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px"><div style="font-size: 12px; padding-left: 10px; padding-right: 10px">{% for total in table.totals %}{% if total.label == 'Total' %}<b>INR {{ total.number | spell_out_rupees | capitalize }} Only</b></div>{% endif %}{% endfor %}</td></tr>
    {% for field in custom_fields %}
    {% if title == 'Invoice' %}
    {% if field.label != "Notes" %}{% continue %}{% endif %}
    {% endif %}
    <tr>
        <td colspan="99">
            <div style="font-weight: bold; padding-top: 20px">{{ field.label }}</div>
            <div>{{ field.text | newline_to_br }}</div>
        </td>
    </tr>
    {% endfor %}
</tbody>
<tfoot>
<tr>
    {% if title == 'Invoice' %}
    <td colspan="99">
        <div style="text-align: right; font-weight: bold">We declare that this invoice shows the actual price of the goods or<br>service described and that all particulars are true and correct.<br><br>For {{ business.name }}<br><br><br><br>Authorised Signatory</div></td>
    {% endif %}
</tr>
</tfoot>

The invoice sample looks as below.

The template is coded as per the following.

  1. “Billed To:” is the customer name and details updated in the Customers module.
  2. “Shipped To:” is a custom field created for Sales Invoice which should match the label exactly as “Shipped To:”
  3. The rest of the custom fields have been moved to the top beside invoice details.
  4. HSN code has to be created as a custom field under the Inventory items.
  5. The “Terms & Conditions” can be set as a default in the Notes field when making a Sales Invoice.

Create the Tax codes as a custom tax code under Settings. For example see below image.

9 Likes