Default Invoice Template - 5(Document)Header <div style="margin: 10px 40px; padding-top: 80px"> <table align="left" border="0" style="width: 100%;"> <tbody> <tr> <td style="width: 343px;" valign="top"> <table align="left" border="0" cellpadding="1" cellspacing="1" style="width: 346px;"> <tbody> <tr> <td style="text-align: center; vertical-align: middle; height: 80px; background-color: rgb(0, 191, 165); width: 336px;"> <h1> <strong>INVOICE</strong> </h1> </td> </tr> </tbody> </table> <table border="0" cellpadding="1" cellspacing="1" style="width: 342px;"> <tbody> <tr> <td style="width: 164px;">Invoice date:<br/> <strong>{{ invoice.date|date("jS F Y") }}</strong> </td> <td style="width: 164px;">Invoice number:<br/> <strong>#{{ invoice.number }}</strong> </td> </tr> </tbody> </table> <table border="0" cellpadding="1" cellspacing="1" style="width: 342px;"> <tbody> <tr> <td style="width: 164px;">Customer name:<br/> <strong>{{ invoice.clientContact.name }}</strong> </td> <td style="width: 164px;">Customer number:<br/> <strong>{{ invoice.clientContact.number }}</strong> </td> </tr> </tbody> </table> <br/> Customer address:<br/> <strong>{{ invoice.clientContact.PostalAddress.addressText|raw }}</strong><br/> <table border="0" cellpadding="1" cellspacing="1" style="width: 100%;"> <tbody> <tr> <td style="width: 164px;">Animal name:<br/> <strong>{{ invoice.animal.name }}</strong> </td> <td style="width: 164px;">Animal DOB:<br/> <strong>{{ invoice.animal.dateOfBirth|date("jS F Y") }}</strong> </td> </tr> </tbody> </table> </td> <td style="width: 399px;" valign="top"> <div style="text-align: right;"><img src="{{ templatesettings.logoLocation }}"/></div> <p><br/> <br/> From:<br/> <strong>{{ business.name }}</strong><br/> <strong>{{ business.postalAddress.addressText|raw }}</strong><br/> </p> <table border="0" cellpadding="1" cellspacing="1" style="width: 100%;"> <tbody> <tr> <td style="width: 33%;">Phone:<br/> <strong>{{ business.phoneNumber }}</strong> </td> <td style="width: 33%;">Fax:<br/> <strong>{{ business.faxNumber }}</strong> </td> <td style="width: 33%;">Email:<br/> <strong>{{ business.businessEmail }}</strong> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> Body <style> type="text/css" th, td { text-align: left; padding: 6px; } hr { height: 2px; border-width: 0; color: #00bfa5; background-color: #00bfa5; } .heading tr td { border-bottom: 2px solid #ccc; } .summary tr td { font-size: 11px } </style> <div style="margin: 0 40px;"> <hr/> <table style="width: 1041px; border-bottom: 2px solid #ccc"> <thead class="heading"> <tr> <td style="text-align: left; float: left; width: 205px; height: 40px; color:#000000; padding-left: 10px"> <span style="font-size:14px;"> <b>Description</b> </span> </td> <td style="text-align: left; float: left; width: 130px;color:#000000;"> <span style="font-size:14px;"> <b>Staff Member</b> </span> </td> <td style="text-align: left; float: left; width: 65px;color:#000000;"> <span style="font-size:14px;"> <b>Qty</b> </span> </td> {% if invoice.hasDiscounts %} <td style="text-align: left; float: left; width: 80px;color:#000000;"> <span style="font-size:14px;"> <b>Price</b> </span> </td> <td style="text-align: left; float: left; width: 80px;color:#000000;"> <span style="font-size:14px;"> <b>Discount</b> </span> </td> <td style="text-align: left; float: left; width: 80px;color:#000000;"> <span style="font-size:14px;"> <b>Discount (%)</b> </span> </td> {% endif %} <td style="text-align: right; float: left; width: 100px; color: rgb(0, 0, 0); padding-right: 10px;"> <span style="font-size:14px;"> <b>Total</b> </span> </td> </tr> </thead> <tbody class="lines"> {% for invoiceline in invoice.lineItems %} {% if invoiceline.isHeaderLine and not invoiceline.hasHeaderLine %} <tr> <td>{{ invoiceline.product.name }}</td> <td>{{ invoiceline.salesPerson.name }}</td> <td>{{ invoiceline.quantity }}</td> {% if invoice.hasDiscounts %} <td>{{ invoiceline.totalBeforeDiscount(true)|moneyformat }}</td> {% if invoiceline.totalDiscount(true) > 0 %} <td>{{ invoiceline.totalDiscount(true)|moneyformat }}</td> <td>{{ invoiceline.totalDiscountPercent|round(2) }}%</td> {% else %} <td></td> <td></td> {% endif %} {% endif %} <td style=" text-align: right; width: 223px;">{{ invoiceline.total(true)|moneyformat }}</td> </tr> {% if invoiceline.printContained %} {% for subinvoiceline in invoiceline.nestedLines %} <tr> <td style="font-style: italic; color:#555;"> {{ subinvoiceline.product.name }}</td> <td style="font-style: italic; color:#555;">{{ subinvoiceline.salesPerson.name }}</td> <td style="font-style: italic; color:#555;">{{ subinvoiceline.quantity }}</td> {% if invoiceline.printContainedPrices %} {% if invoice.hasDiscounts %} <td style="font-style: italic; color:#555;">{{ subinvoiceline.totalBeforeDiscount(true)|moneyformat }}</td> {% if subinvoiceline.totalDiscount(true) > 0 %} <td style="font-style: italic; color:#555;">{{ subinvoiceline.totalDiscount(true)|moneyformat }}</td> <td style="font-style: italic; color:#555;">{{ subinvoiceline.totalDiscountPercent|round(2) }}%</td> {% else %} <td style="font-style: italic; color:#555;"></td> <td style="font-style: italic; color:#555;"></td> {% endif %} {% endif %} {% endif %} <td style="text-align:right;font-style: italic; color:#555;"> {% if invoiceline.printContainedPrices %} {{ subinvoiceline.total(true)|moneyformat }} {% endif %} </td> </tr> {% if subinvoiceline.isHeaderline %} {% if subinvoiceline.printContained %} {% for subsubinvoiceline in subinvoiceline.nestedLines %} <tr> <td style="font-style: italic; color:#555;"> {{ subsubinvoiceline.product.name }}</td> <td style="font-style: italic; color:#555;">{{ subsubinvoiceline.salesPerson.name }}</td> <td style="font-style: italic; color:#555;">{{ subsubinvoiceline.quantity }}</td> {% if subinvoiceline.printContainedPrices %} {% if invoice.hasDiscounts %} <td style="font-style: italic; color:#555;">{{ subsubinvoiceline.totalBeforeDiscount(true)|moneyformat }}</td> {% if subsubinvoiceline.totalDiscount(true) > 0 %} <td style="font-style: italic; color:#555;">{{ subsubinvoiceline.totalDiscount(true)|moneyformat }}</td> <td style="font-style: italic; color:#555;">{{ subsubinvoiceline.totalDiscountPercent|round(2) }}%</td> {% else %} <td style="font-style: italic; color:#555;"></td> <td style="font-style: italic; color:#555;"></td> {% endif %} {% endif %} {% endif %} <td style="text-align:right;font-style: italic; color:#555;"> {% if subinvoiceline.printContainedPrices %} {{ subsubinvoiceline.total(true)|moneyformat }} {% endif %} </td> </tr> {% if subsubinvoiceline.isHeaderline %} {% if subsubinvoiceline.printContained %} {% for subsubsubinvoiceline in subsubinvoiceline.nestedLines %} <tr> <td style="font-style: italic; color:#555;"> {{ subsubsubinvoiceline.product.name }}</td> <td style="font-style: italic; color:#555;">{{ subsubsubinvoiceline.salesPerson.name }}</td> <td style="font-style: italic; color:#555;">{{ subsubsubinvoiceline.quantity }}</td> {% if subsubinvoiceline.printContainedPrices %} {% if invoice.hasDiscounts %} <td style="font-style: italic; color:#555;">{{ subsubsubinvoiceline.totalBeforeDiscount(true)|moneyformat }}</td> {% if subsubsubinvoiceline.totalDiscount(true) > 0 %} <td style="font-style: italic; color:#555;">{{ subsubsubinvoiceline.totalDiscount(true)|moneyformat }}</td> <td style="font-style: italic; color:#555;">{{ subsubsubinvoiceline.totalDiscountPercent|round(2) }}%</td> {% else %} <td style="font-style: italic; color:#555;"></td> <td style="font-style: italic; color:#555;"></td> {% endif %} {% endif %} {% endif %} <td style="text-align:right;font-style: italic; color:#555;"> {% if subsubinvoiceline.printContainedPrices %} {{ subsubsubinvoiceline.total(true)|moneyformat }} {% endif %} </td> </tr> {% endfor %} {% endif %} {% endif %} {% endfor %} {% endif %} {% endif %} {% endfor %} {% endif %} {% elseif not invoiceline.hasHeaderLine %} <tr> <td>{{ invoiceline.product.name }}</td> <td>{{ invoiceline.salesPerson.name }}</td> <td>{{ invoiceline.quantity }}</td> {% if invoice.hasDiscounts %} <td>{{ invoiceline.totalBeforeDiscount(true)|moneyformat }}</td> {% if invoiceline.totalDiscount(true) > 0 %} <td>{{ invoiceline.totalDiscount(true)|moneyformat }}</td> <td>{{ invoiceline.totalDiscountPercent|round(2) }}%</td> {% else %} <td></td> <td></td> {% endif %} {% endif %} <td style="text-align:right;">{{ invoiceline.total(true)|moneyformat }}</td> </tr> {% endif %} {% endfor %} </tbody> </table> <table border="0" cellpadding="0" cellspacing="1" style="margin-left: auto; width: 267px;"> <tbody class="summary"> <tr> <td style="width: 103px; padding-top: 20px;">Subtotal:</td> <td style="width: 123px; text-align: right; padding-right: 15px; padding-top: 20px;"> <strong>{{ invoice.subTotal|moneyformat }}</strong> </td> </tr> {% if invoice.includesTax %} <tr> <td style="width: 103px;">Including tax:</td> <td style="width: 123px; text-align: right; padding-right: 15px;"> <strong>{{ invoice.total|moneyformat }}</strong> </td> </tr> {% endif %} {% if invoice.hasDiscounts %} <tr> <td style="width: 103px;">Discount:</td> <td style="width: 123px; text-align: right; padding-right: 15px;"> <strong>{{ invoice.totalDiscountAmountIncTax|moneyformat }}</strong> </td> </tr> {% endif %} <tr> <td style="width: 103px;">Total:</td> <td style="width: 123px; text-align: right; padding-right: 15px;"> <strong>{{ invoice.total|moneyformat }}</strong> </td> </tr> {% if invoice.paymentMethods %} <tr> <td style="width: 103px;">Payment method:</td> <td style="width: 123px; text-align: right; padding-right: 15px;"> <strong>{{ invoice.paymentMethods }}</strong> </td> </tr> {% endif %} <tr> <td style="width: 103px;">Amount paid:</td> <td style="width: 123px; text-align: right; padding-right: 15px;"> <strong>{{ invoice.paid|moneyformat }}</strong> </td> </tr> <tr>{% set balance = invoice.total - invoice.paid %} <td style="width: 103px; padding-bottom: 30px;">Balance:</td> <td style="width: 123px; text-align: right; padding-right: 15px; padding-bottom: 30px;"> <strong>{{ balance|moneyformat }}</strong> </td> </tr> </tbody> </table> </div> Footer <div style="margin:0 40px; padding: 20px 40px 60px 20px;"> <h1> <span style="color:#00bfa5;"> <strong>THANK YOU</strong> </span> </h1> <div style="border-top: 5px solid rgb(0, 191, 165);"><br/> {{ business.postalAddress.addressText(false, true) }} • {{ business.phoneNumber }} • {{ business.businessEmail }}</div> </div> Parent topic: Source code of standard Twig templatesRelated conceptsDefault Estimate Template - 1(Document)Default Estimate Template - 2(Document)Default Estimate Template - 3(Document)Default Estimate Template - 4(Document)Default Estimate Template - 5(Document)Default Estimate Template - 6(Document)Default Invoice Template - 1(Document)Default Invoice Template - 2(Document)Default Invoice Template - 3(Document)Default Invoice Template - 4(Document)Default Invoice Template - 6(Document)Default Payment Template - 1(Document)Default Payment Template - 2(Document)Default Payment Template - 3(Document)Default Payment Template - 4(Document)Default Payment Template - 5(Document)Default Statement Template - 1(Document)Default Statement Template - 2(Document)Default Statement Template - 3(Document)
