Invoice Summary Section Documentation

Overview

The invoice summary section provides a detailed breakdown of all transactions related to an invoice, including payments, credits, and adjustments. This section appears before the main invoice details when {{summary.show_invoice_summary}} is true.

Section Structure

The summary section is wrapped in a conditional block:

{{#summary.show_invoice_summary}}
<!-- Summary content -->
{{/summary.show_invoice_summary}}

Available Variables

All standard invoice variables are available in the summary section. Additionally, the following summary-specific variables are provided:

Summary Details

• {{summary.amount_due}} - Total amount due

• {{summary.current_date}} - Current date of the summary

• {{summary.show_invoice_summary}} - Boolean flag to control summary visibility

  Transaction Summary Table

The summary table displays individual transactions with the following columns:

• Date
• Amount Type
• Reference ID
• Remarks
• Amount

Each transaction in {{summary.summary}} contains:

• {{date}} - Transaction date

• {{amount_type}} - Type of transaction (e.g., payment, credit, adjustment)

• {{reference_id}} - Reference identifier for the transaction

• {{remarks}} - Additional notes about the transaction

• {{amount}} - Transaction amount

  Header Information

• {{logo}} - Organization's logo URL

• {{invoice_data.id}} - Invoice number

• {{billing_duration}} - Billing period duration

• {{invoice_data.invoice_date}} - Invoice creation date

• {{invoice_data.due_by}} - Payment due date

• {{customer.tax_id}} - Customer's tax ID (if available)

  Billing Information

• {{customer.name}} - Customer's name

• {{customer.address}} - Customer's billing address

• {{customer.email}} - Customer's email address

• {{seller.name}} - Seller's name

• {{seller.address}} - Seller's address

  Payment Information

If ACH details are available ({{ach_details}}), the following information is displayed:

• {{bank_name}} - Bank name
• {{routing_number}} - Routing number
• {{account_number}} - Account number
• {{swift_code}} - SWIFT code

Usage Example

{{#summary.show_invoice_summary}}
<div class="invoice-box">
  <!-- Header Section -->
  <div class="invoice-header">
    <div class="invoice-header-row">
      <div class="title">Invoice Summary</div>
      <img class="logo" src="{{logo}}" alt="Logo" />
    </div>
    <!-- Primary Details -->
    <div class="primary-details">
      <!-- Invoice Details -->
      <dl class="details-col">
        <div class="details-row">
          <dt>Invoice No.</dt>
          <dd>{{invoice_data.id}}</dd>
        </div>
        <div class="details-row">
          <dt>Billing period</dt>
          <dd>{{billing_duration}}</dd>
        </div>
      </dl>
      <!-- Dates -->
      <dl class="details-col">
        <div class="details-row">
          <dt>Invoice Date</dt>
          <dd>{{invoice_data.invoice_date}}</dd>
        </div>
        <div class="details-row">
          <dt>Due Date</dt>
          <dd>{{invoice_data.due_by}}</dd>
        </div>
      </dl>
    </div>
  </div>

  <!-- Summary Table -->
  <table>
    <tr>
      <td>Date</td>
      <td>Amount Type</td>
      <td>Reference Id</td>
      <td>Remarks</td>
      <td>Amount</td>
    </tr>
    {{#summary.summary}}
    <tr>
      <td>{{date}}</td>
      <td>{{amount_type}}</td>
      <td>{{reference_id}}</td>
      <td>{{remarks}}</td>
      <td>{{amount}}</td>
    </tr>
    {{/summary.summary}}
  </table>

  <!-- Total Amount Due -->
  <tfoot>
    <td colspan="4">
      Amount Due for Invoice <b>{{invoice_data.id}}</b> as of
      <b>{{summary.current_date}}</b>
    </td>
    <td>{{summary.amount_due}}</td>
  </tfoot>
</div>
{{/summary.show_invoice_summary}}

Notes

1. The summary section is optional and only appears when {{summary.show_invoice_summary}} is true
2. All currency values are automatically formatted according to the specified currency
3. Dates are formatted as "Jan 15, 2024" (Month Day, Year)
4. The summary section is followed by a page break (<div class="pagebreak"></div>) before the main invoice content
5. ACH payment details are only shown if {{ach_details}} is available