This task explains how to configure HTML templates to display payment sequences on invoices, helping customers track billing periods for subscription-based products.

1. In the Content tab of the HTML template editor, drag the Columns component into the HTML template. A column block is displayed in the HTML template. It is best practice to add it to the middle of the template.
2. In the HTML template, click the Row block where you want to add the HTML code.
3. In the Content tab, drag the HTML component into the HTML template.
4. In the HTML template, click the HTML block. The Content panel is displayed on the right of the template editor.
5. In the HTML section, input the following HTML code in the HTML editor as an example. You can have your own table HTML code and use the expressions to calculate the payment sequence. You can refer to the description in the code example and the information that follows the code example. The expressions have the following constraints. If you have other billing periods, change the expressions.

   <style>
   <!-- not show all style code -->
   </style>
   {{#Invoice}}
   <table class="table-grid u_content_custom_generic_table_1">
   <thead><tr>
    <th style="width:auto; text-align:center;">
    Charge Name
    </th>
    <th style="width:auto; text-align:center;">
    Service Period
    </th>
    <th style="width:auto; text-align:center;">
    Payment Sequence
    </th>
    <th style="width:auto; text-align:right;">
    Unit Price
    </th>
    <th style="width:auto; text-align:right;">
    Quantity
    </th>
    <th style="width:auto; text-align:right;">
    Extended Price
    </th>
    <th style="width:auto; text-align:center;">
    Subscription Term
    </th></tr></thead>
   <tbody>
   {{#InvoiceItems}}
   <tr>
   <td style="width:auto; text-align:center;">{{ChargeName}}</td>
   <td style="width:auto; text-align:center;">{{ServiceStartDate|Localise}} - {{ServiceEndDate|Localise}}</td>
   <td style="width:auto; text-align:center;">
   <!-- calculate the Xth payment: X is the number of months between service start date and subscription term start date, divided by billing period →
   <!-- calculate total Y payments: Y is the number of months between subscription term start date and subscription term end date, divided by billing period -->
   {{#Wp_Eval}}
   1 + (new("java.text.SimpleDateFormat","yyyy-MM-dd").parse("{{ServiceStartDate}}").getYear() - new("java.text.SimpleDateFormat","yyyy-MM-dd").parse("{{Subscription.TermStartDate}}").getYear()) * 12 + (new("java.text.SimpleDateFormat","yyyy-MM-dd").parse("{{ServiceStartDate}}").getMonth() - new("java.text.SimpleDateFormat","yyyy-MM-dd").parse("{{Subscription.TermStartDate}}").getMonth()) / ("{{RatePlanCharge.BillingPeriod}}" == "Month" ? 1 : ("{{RatePlanCharge.BillingPeriod}}" == "Quarter" ? 3 : ("{{RatePlanCharge.BillingPeriod}}" == "Semi-Annual" ? 6 : ("{{RatePlanCharge.BillingPeriod}}" == "Annual" ? 12 : 24))))
   {{/Wp_Eval}}
    of
   {{#Wp_Eval}}
   ("{{Subscription.CurrentTermPeriodType}}" == "Year" ? {{Subscription.CurrentTerm}} * 12 : {{Subscription.CurrentTerm}}) / ("{{RatePlanCharge.BillingPeriod}}" == "Month" ? 1 : ("{{RatePlanCharge.BillingPeriod}}" == "Quarter" ? 3 : ("{{RatePlanCharge.BillingPeriod}}" == "Semi-Annual" ? 6 : ("{{RatePlanCharge.BillingPeriod}}" == "Annual" ? 12 : 24))))
   {{/Wp_Eval}}
   </td>
   <td style="width:auto; text-align:right;">{{Invoice.Account.Currency|Symbol}}{{UnitPrice|Round(2)|Localise}}</td>
   <td style="width:auto; text-align:right;">{{Quantity|Round(2)|Localise}}</td>
   <td style="width:auto; text-align:right;">{{Invoice.Account.Currency|Symbol}}{{ChargeAmount|Round(2)|Localise}}</td>
   <td style="width:auto; text-align:center;">{{Subscription.TermStartDate|Localise}} - {{Subscription.TermEndDate|Localise}}</td>
   </tr>
   {{/InvoiceItems}}
   </tbody>
   </table>
   {{/Invoice}}

   • Only the following billing periods are available:

     • Month

     • Quarter

     • Semi-Annual

     • Annual

   • You must set your subscription's term type to termed rather than evergreen.

   • Only the following subscription term period types are available:

     • Month

     • Year

6. View the template in Edit mode. You can edit the HTML source to change the text, font size, font color, rotation, and opacity.
7. Click Preview , and select an account and an invoice in the Preview Settings section to preview the corresponding PDF file.