ezyVet Surcharge: Updating an Invoice Template for Generating Invoices and Receipts – PayJunction Support

Note: This requires using ezyVet’s TWIG templates. Classic templates are not supported.

This guide walks you through adding the required surcharge information to your ezyVet invoice template to help ensure compliance with card brand rules and applicable state laws.

The simplest approach is to insert the full HTML code example below into your existing invoice template or invoice footer template. You may need to remove any duplicate or conflicting fields and adjust the styling so it matches the rest of your invoice.

If you prefer a more customized approach, continue reading for a breakdown of the required surcharge elements and how to incorporate them into your template.

Full HTML Code Example:

<div style="height: 50px;">
  <div style="float: left; width: 345px; height: 90px;">
    <div style="width: 305px;">
      <div style="font-size:10px;"></div>
    </div>
  </div>

  <div style="float: right; width: 400px; font-size: 13px;">
    <div style="height: 80px; float: right; width: 235px; padding-left: 45px; font-size: 13px;">

      <div style="float: right; width: 130px; text-align: right;">
        {{ invoice.subTotal | moneyformat }}
      </div>
      <div style="float: left; width: 100px; text-align: left;">Subtotal</div>

      <div style="color:#888888;">
        <div style="float: right; width: 130px; text-align: right;">
          {{ invoice.Gst | moneyformat }}
        </div>
        <div style="float: left; width: 100px; text-align: left;">Tax</div>
      </div>

      <div style="float: right; width: 130px; font-weight: bold; text-align: right;">
        {{ invoice.Total | moneyformat }}
      </div>
      <div style="float: left; width: 100px; font-weight: bold; text-align: left;">Base Total</div>

      <br />

      {% if invoice.surchargeAmount %}
        <div style="float: right; width: 130px; font-weight: bold; text-align: right;">
          {{ invoice.paid | moneyformat }}
        </div>
        <div style="float: left; width: 100px; font-weight: bold; text-align: left;">Base Paid</div>

        <div style="float: right; width: 130px; text-align: right;">
          {{ invoice.surchargeAmount | moneyformat }}
        </div>
        <div style="float: left; width: 100px; text-align: left;">Surcharge Paid</div>
      {% endif %}

      <div style="float: right; width: 130px; text-align: right;">
        {{ (invoice.paid + invoice.surchargeAmount) | moneyformat }}
      </div>
      <div style="float: left; width: 100px; text-align: left;">Total Paid</div>
    </div>

    {% if invoice.surchargeAmount %}
      <div style="float: right; width: 230px; text-align: left;">
        <p>A surcharge was applied to cover our costs of credit card acceptance.</p>
      </div>
    {% endif %}
  </div>
</div>

<br />

{% if invoice.outstanding > 0 %}
<table border="1" style="font-size:10px; width:100%">
  <tbody>
    <tr>
      <td colspan="2">
        <p>A 3% surcharge applies to all credit card payments. 
        No surcharge is applied to debit card, cash, or check payments.</p>
      </td>
    </tr>
    <tr>
      <td><strong>Surcharge</strong></td>
      <td>{{ (invoice.outstanding * 0.03) | moneyformat }}</td>
    </tr>
    <tr>
      <td><strong>Outstanding Total With Surcharge</strong></td>
      <td><strong>{{ (invoice.outstanding * 1.03) | moneyformat }}</strong></td>
    </tr>
  </tbody>
</table>
{% endif %}

Pre-Payment Disclosure

If your practice provides customers with invoices before payment, those invoices must include:

A clear statement that a surcharge will be applied to credit card payments, including the surcharge percentage
The surcharge amount
The total amount (i.e., base amount plus surcharge)

Here's an example invoice:

The HTML code below will display the surcharge information when the invoice has an outstanding balance. Add this code in the appropriate location within your invoice template. If you need help with styling, contact the ezyVet Support team.

Code Example:

{% if invoice.outstanding > 0 %}
<table border="1" style="font-size:10px; width:100%">
  <tbody>
    <tr>
      <td colspan="2">
        <p>A 3% surcharge applies to all credit card payments. 
        No surcharge is applied to debit card, cash, or check payments.</p>
      </td>
    </tr>
    <tr>
      <td><strong>Surcharge</strong></td>
      <td>{{ (invoice.outstanding * 0.03) | moneyformat }}</td>
    </tr>
    <tr>
      <td><strong>Outstanding Total With Surcharge</strong></td>
      <td><strong>{{ (invoice.outstanding * 1.03) | moneyformat }}</strong></td>
    </tr>
  </tbody>
</table>
{% endif %}

Post-payment Disclosure

If your practice provides customers with invoices after payment, those invoices must include:

A statement indicating that a surcharge was applied
The base amount paid
The surcharge amount
The total amount paid (i.e., base amount plus surcharge)

Example invoice footer:

The HTML code below will display the surcharge information when a surcharge has been applied. Add this code in the appropriate location within your invoice template. If you need assistance with styling, contact the ezyVet Support team.

Code Example:

<div style="height: 50px;">
  <div style="float: left; width: 345px; height: 90px;">
    <div style="width: 305px;">
      <div style="font-size:10px;"></div>
    </div>
  </div>

  <div style="float: right; width: 400px; font-size: 13px;">
    <div style="height: 80px; float: right; width: 235px; padding-left: 45px; font-size: 13px;">

      <div style="float: right; width: 130px; text-align: right;">
        {{ invoice.subTotal | moneyformat }}
      </div>
      <div style="float: left; width: 100px; text-align: left;">Subtotal</div>

      <div style="color:#888888;">
        <div style="float: right; width: 130px; text-align: right;">
          {{ invoice.Gst | moneyformat }}
        </div>
        <div style="float: left; width: 100px; text-align: left;">Tax</div>
      </div>

      <div style="float: right; width: 130px; font-weight: bold; text-align: right;">
        {{ invoice.Total | moneyformat }}
      </div>
      <div style="float: left; width: 100px; font-weight: bold; text-align: left;">Base Total</div>

      <br />

      {% if invoice.surchargeAmount %}
        <div style="float: right; width: 130px; font-weight: bold; text-align: right;">
          {{ invoice.paid | moneyformat }}
        </div>
        <div style="float: left; width: 100px; font-weight: bold; text-align: left;">Base Paid</div>

        <div style="float: right; width: 130px; text-align: right;">
          {{ invoice.surchargeAmount | moneyformat }}
        </div>
        <div style="float: left; width: 100px; text-align: left;">Surcharge Paid</div>
      {% endif %}

      <div style="float: right; width: 130px; text-align: right;">
        {{ (invoice.paid + invoice.surchargeAmount) | moneyformat }}
      </div>
      <div style="float: left; width: 100px; text-align: left;">Total Paid</div>
    </div>

    {% if invoice.surchargeAmount %}
      <div style="float: right; width: 230px; text-align: left;">
        <p>A surcharge was applied to cover our costs of credit card acceptance.</p>
      </div>
    {% endif %}
  </div>
</div>