Default Invoice Template - 2(Document)Header <div style="margin:30px; padding-top: 50px"> <table align="left" border="0" style="width: 100%;"> <tbody> <tr> <td style="width: 350px;" valign="top"> <h1 style="text-align: left;"><strong>INVOICE</strong></h1> <h2 style="text-align: left;">#{{ invoice.number }}</h2> <table border="0" cellpadding="1" cellspacing="1" style="width: 343px;"> <tbody> <tr> <td style="width: 172px;"><strong>Invoice date:</strong><br /> {{ invoice.date|date("jS F Y") }}</td> <td style="width: 158px;"><strong>Customer name:</strong><br /> {{ invoice.clientContact.name }}</td> </tr> </tbody> </table> <table border="0" cellpadding="1" cellspacing="1" style="width: 345px;"> <tbody> <tr> <td style="width: 335px;"><strong>Animal name:</strong><br /> {{ invoice.animal.name }}</td> </tr> </tbody> </table> </td> <td style="width: 332px;" valign="bottom"> <div style="text-align: right;"><img src="{{ templatesettings.logoLocation }}" /></div> <p><br /> </p> </td> </tr> </tbody> </table> </div> Body <div style="margin: 30px 0px;"> <table style="width: 968px; font-size: 15px"> <thead> <tr style="background-color: #00BFA5;"> <td style="width: 30px"></td> <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: 79px; color:#000000;"> <span style="font-size:14px;"> <b>Discount</b> </span> </td> <td style="text-align: left; float: left; width: 79px; 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> <td style="width: 30px"></td> </tr> </thead> <tbody> {% for invoiceline in invoice.lineItems %} {% if invoiceline.isHeaderLine and not invoiceline.hasHeaderLine %} <tr> <td style="width: 30px; height: 30px;"></td> <td style="padding-left:10px; border-bottom:1px solid #00BFA5;">{{ invoiceline.product.name }}</td> <td style="border-bottom:1px solid #00BFA5;">{{ invoiceline.salesPerson.name }}</td> <td style="border-bottom:1px solid #00BFA5;">{{ invoiceline.quantity }}</td> {% if invoice.hasDiscounts %} <td style="border-bottom:1px solid #00BFA5;">{{ invoiceline.totalBeforeDiscount(true)|moneyformat }}</td> {% if invoiceline.totalDiscount(true) > 0 %} <td style="border-bottom:1px solid #00BFA5;">{{ invoiceline.totalDiscount(true)|moneyformat }}</td> <td style="border-bottom:1px solid #00BFA5;">{{ invoiceline.totalDiscountPercent|round(2) }}%</td> {% else %} <td style="border-bottom:1px solid #00BFA5;"></td> <td style="border-bottom:1px solid #00BFA5;"></td> {% endif %} {% endif %} <td style="border-bottom: 1px solid #00BFA5; text-align: right; width: 223px;">{{ invoiceline.total(true)|moneyformat }}</td> <td style="width: 30px"></td> </tr> {% if invoiceline.printContained %} {% for subinvoiceline in invoiceline.nestedLines %} <tr> <td style="width: 30px; height: 30px;"></td> <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> <td style="width: 30px"></td> </tr> {% if subinvoiceline.isHeaderline %} {% if subinvoiceline.printContained %} {% for subsubinvoiceline in subinvoiceline.nestedLines %} <tr> <td style="width: 30px; height: 30px;"></td> <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> <td style="width: 30px"></td> </tr> {% if subsubinvoiceline.isHeaderline %} {% if subsubinvoiceline.printContained %} {% for subsubsubinvoiceline in subsubinvoiceline.nestedLines %} <tr> <td style="width: 30px; height: 30px;"></td> <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> <td style="width: 30px"></td> </tr> {% endfor %} {% endif %} {% endif %} {% endfor %} {% endif %} {% endif %} {% endfor %} {% endif %} {% elseif not invoiceline.hasHeaderLine %} <tr> <td style="width: 30px; height: 30px;"></td> <td style="border-bottom:1px solid #00BFA5;">{{ invoiceline.product.name }}</td> <td style="border-bottom:1px solid #00BFA5;">{{ invoiceline.salesPerson.name }}</td> <td style="border-bottom:1px solid #00BFA5;">{{ invoiceline.quantity }}</td> {% if invoice.hasDiscounts %} <td style="border-bottom:1px solid #00BFA5;">{{ invoiceline.totalBeforeDiscount(true)|moneyformat }}</td> {% if invoiceline.totalDiscount(true) > 0 %} <td style="border-bottom:1px solid #00BFA5;">{{ invoiceline.totalDiscount(true)|moneyformat }}</td> <td style="border-bottom:1px solid #00BFA5;">{{ invoiceline.totalDiscountPercent|round(2) }}%</td> {% else %} <td style="border-bottom:1px solid #00BFA5;"></td> <td style="border-bottom:1px solid #00BFA5;"></td> {% endif %} {% endif %} <td style="border-bottom:1px solid #00BFA5; text-align:right;">{{ invoiceline.total(true)|moneyformat }}</td> <td style="width: 30px"></td> </tr> {% endif %} {% endfor %} </tbody> </table> <div><br/> </div> <table cellpadding="5" cellspacing="5" style="margin-right:15px;margin-left: auto; width: 200px;"> <tbody> <tr> <td style="width: 105px; padding-left: 15px;">Subtotal:</td> <td style="width: 68px; text-align: right; padding-right: 15px;"> <strong>{{ invoice.subTotal|moneyformat }}</strong> </td> </tr> {% if invoice.includesTax %} <tr> <td style="width: 105px; padding-left: 15px;">Including tax:</td> <td style="width: 68px; text-align: right; padding-right: 15px;"> <strong>{{ invoice.total|moneyformat }}</strong> </td> </tr> {% endif %} {% if invoice.hasDiscounts %} <tr> <td style="width: 105px; padding-left: 15px;">Discount:</td> <td style="width: 68px; text-align: right; padding-right: 15px;"> <strong>{{ invoice.totalDiscountAmountIncTax|moneyformat }}</strong> </td> </tr> {% endif %} <tr> <td style="width: 105px; padding-left: 15px;">Total:</td> <td style="width: 68px; text-align: right; padding-right: 15px;"> <strong>{{ invoice.total|moneyformat }}</strong> </td> </tr> </tbody> </table> <table cellpadding="5" cellspacing="5" style="margin-right:20px;margin-left: auto; width: 300px;"> <tbody> <tr> {% if invoice.paymentMethods %} <td style="text-align: right;">Payment method: <strong>{{ invoice.paymentMethods }}</strong> </td> {% endif %} <td style="text-align: right;">Amount paid: <strong>{{ invoice.paid|moneyformat }}</strong> </td> <td style="text-align: right;">Balance: <strong>{{ balance|moneyformat }}</strong> </td> </tr> </tbody> </table> </div> Footer <div style="background-color: #00BFA5; padding: 50px; height: 100px;"> <table cellpadding="1" cellspacing="1" style="width: 757px;"> <tbody> <tr> <td style="width: 479px;"> <table border="0" cellpadding="1" cellspacing="1" style="width: 500px;"> <tbody> <tr> <td> <span style="color:#ffffff;"> <span style="font-size:24px;"> <strong>Thank you for choosing {{ business.name }}</strong> </span> </span> </td> </tr> <tr> <td> <span style="color:#ffffff;"> <span style="font-size:14px;">{{ business.postalAddress.addressText(false, true) }} • {{ business.phoneNumber }} • {{ business.businessEmail }}</span> </span> </td> </tr> </tbody> </table> </td> <td style="text-align: right; vertical-align: middle;"> <div style="text-align: right;"><img src="{{ templatesettings.logoLocation }}" style="height: 80px; width: auto;"/></div> </td> </tr> </tbody> </table> </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 - 3(Document)Default Invoice Template - 4(Document)Default Invoice Template - 5(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)
