Default Payment Template - 3(Document)
Header
<div style="margin: 12px;">
<table>
<tbody>
<tr>
<td height="8px" width="960px;"></td>
</tr>
</tbody>
</table>
<div class="header" style=" border-bottom: thin solid #e0e0e0;">
<table style="margin-bottom:1rem; width:100%">
<tbody>
<tr>
<td style="width:60%">
<table>
<tbody>
<tr>
<td style="font-size: 2.5rem; font-weight: bold;">PAYMENT RECEIPT</td>
</tr>
<tr>
<td style="font-size: 1.5rem;"> #{{ payment.number }}</td>
</tr>
</tbody>
</table>
<table style="margin-top:1rem; width:100%">
<tbody>
<tr>
<td style="padding-top: 1px; padding-bottom: 1px;"><strong>Receipt date:</strong></td>
<td style="padding-top: 1px; padding-bottom: 1px;"><strong>Receipt number:</strong></td>
<td style="padding-top: 1px; padding-bottom: 1px;"><strong>Customer number:</strong></td>
</tr>
<tr>
<td style="padding-top: 1px; padding-bottom: 1px;">{{ payment.date|dateformat }}</td>
<td style="padding-top: 1px; padding-bottom: 1px;">#{{ payment.number }}</td>
<td style="padding-top: 1px; padding-bottom: 1px;">{{ payment.clientContact.code }}</td>
</tr>
</tbody>
</table>
</td>
<td style="text-align:right; width:30%"><img alt="43" src="{{ templatesettings.logoLocation }}" style="width:30%" /></td>
</tr>
</tbody>
</table>
<table style="margin-bottom:1rem; margin-left:5px; width:100%">
<tbody>
<tr>
<td style="padding-top: 1px; padding-bottom: 1px;"><strong>Payment amount:</strong></td>
<td style="padding-top: 1px; padding-bottom: 1px;"><strong>Payment method:</strong></td>
<td style="padding-top: 1px; padding-bottom: 1px;"><strong>Account balance:</strong></td>
</tr>
<tr>
<td style="padding-top: 1px; padding-bottom: 1px;">{{ payment.amount|moneyformat }} </td>
<td style="padding-top: 1px; padding-bottom: 1px;">{{ payment.paymentMethod }} </td>
<td style="padding-top: 1px; padding-bottom: 1px;">{{ payment.clientContact.balanceAt|moneyformat }}</td>
</tr>
</tbody>
</table>
</div>
</div>
Body
<style>
body{
font-family: sans-serif;
}
table {
border-collapse: collapse;
}
table tr,td, th {
padding: 8px 2px;
}
.data-table tr:nth-child(even){
background-color: #dddddd;
}
.data-table td.subline {
color: #555555;
font-style: italic;
}
</style>
<div style="height: 12px;"></div>
<div class="content" style="padding: 1rem 5px 0 5px;">
{% if financialsettings.showInvoiceItemOnPaymentReceipt %}
{% for financialAllocation in financialAllocations %}
{% if financialAllocation.invoice %}
{% set invoice = financialAllocation.invoice %}
<table style="line-height:1; width:100%">
<tbody>
<tr>
<td><strong>Date:</strong> {{ financialAllocation.date|dateformat }}</td>
<td><strong>Record paid:</strong> {{ invoice.number }}</td>
</tr>
</tbody>
</table>
<table class="data-table" style="width:100%">
<tbody>
<tr colspan="3" style="background-color: #00BFA5;">
<th style="width:80%; text-align: left;">Description</th>
<th style="text-align: left;">Qty</th>
<th style="text-align: right;">Total</th>
</tr>
{% for invoiceexpense in invoice.lineItems %}
{% if invoiceexpense.isHeaderLine and not invoiceexpense.hasHeaderLine %}
<tr>
<td>{{ invoiceexpense.productName }}</td>
<td>{{ invoiceexpense.qty }}</td>
<td style="text-align:right">{{ invoiceexpense.total(true)|moneyformat }}</td>
</tr>
{% if invoiceexpense.printContained %}
{% for subline in invoiceexpense.nestedLines %}
<tr>
<td class="subline" style="padding-left: 8px;">{{ subline.productName }}</td>
<td class="subline">{{ subline.qty }}</td>
<td class="subline" style="text-align:right">{% if invoiceexpense.printContainedPrices %} {{ (subline.total(true))|moneyformat }} {% endif %}</td>
</tr>
{% if subline.isHeaderLine %}{% if subline.PrintContained %}{% for sub2line in subline.nestedLines %}
<tr>
<td class="subline" style="padding-left: 12px;">{{ sub2line.productName }}</td>
<td class="subline">{{ sub2line.qty }}</td>
<td class="subline" style="text-align:right">{% if subline.printContainedPrices %}{{ (sub2line.total(true))|moneyformat }} {% endif %}</td>
</tr>
{% if sub2line.isHeaderLine %}{% if sub2line.PrintContained %}{% for sub3line in sub2line.nestedLines %}
<tr>
<td class="subline" style="padding-left: 16px;">{{ sub3line.productName }}</td>
<td class="subline">{{ sub3line.qty }}</td>
<td class="subline" style="text-align:right">{% if sub2line.printContainedPrices %}{{ (sub3line.total(true))|moneyformat }} {% endif %}</td>
</tr>
{% endfor %}{% endif %}{% endif %}
{% endfor %}{% endif %}{% endif %}
{% endfor %}
{% endif %}
{% elseif not invoiceexpense.hasHeaderLine %}
<tr>
<td>{{ invoiceexpense.productName }}</td>
<td>{{ invoiceexpense.qty }}</td>
<td style="text-align:right">{{ invoiceexpense.total(true)|moneyformat }}</td>
</tr>
{% endif %}
{% endfor %}
</tbody>
</table>
<table style="text-align:right; width:100%">
<tbody>
<tr>
<td>Total: <strong>{{ financialAllocation.amount|moneyformat }}</strong></td>
</tr>
<tr>
<td>Paid: <strong>{{ financialAllocation.allocatedamount|moneyformat }}</strong></td>
</tr>
</tbody>
</table>
{% endif %}
{% endfor %}
{% else %}
<table class="data-table" style="width:100%; padding-bottom:1rem; line-height:2;">
<tbody>
<tr style="padding-bottom:1rem; background-color: #00BFA5;">
<th style="text-align: left; padding: 4px;">Date</th>
<th style="text-align: left; padding: 4px;">Record Paid</th>
<th style="text-align: left; padding: 4px;">Total</th>
<th style="text-align: left; padding: 4px;">Paid</th>
</tr>
{% for financialAllocation in financialAllocations %}
<tr>
<td style="text-align: left; padding: 4px; width: 30%;">{{ financialAllocation.date|dateformat }}</td>
<td style="text-align: left; padding: 4px; width: 30%;">{{ financialAllocation.invoice.number }}</td>
<td style="text-align: left; padding: 4px; width: 25%;">{{ financialAllocation.amount|moneyformat }}</td>
<td style="text-align: left; padding: 4px; width: 15%;">{{ financialAllocation.allocatedamount|moneyformat }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endif %}
</div>
{% if payment.comments is not empty %}
<div style="margin-top:4rem; padding-left: 12px;">
<div><strong>Payment Comments</strong></div>
<div>{{ payment.comments }}</div>
</div>
{% endif %}