To configure your website to accept customer payments for invoices, you will need to ensure the following templates are completed:

  • invoices/index.liquid 
  • invoices/show.liquid 

Additionally, the email customers receive notifying them either to pay their invoice or that their invoice is past due can be customized.

Listing invoices

On the invoices/index.liquid template, the list of invoices associated with the currently logged in customer can be displayed.

Example template content

<table>
  <thead>
    <tr>
      <th>Invoice #</th>
      <th>Date</th>
      <th>Due</th>
      <th>Balance</th>
    </tr>
  </thead>
  <tbody>
    {% for invoice in invoices %}
      <tr>
        <td>
          <a href="{{invoice.url}}">
            {{ invoice.id }}
          </a>
        </td>
        <td>
          {{invoice.invoice_date}}
        </td>
        <td>
          {{invoice.due_on | date: "%-d %B %Y"}}
        </td>
        <td>
          {{invoice.balance | currency }}
        </td>
      </tr>
    {% endfor %}
  </tbody>
</table>

The value provided for invoice.url is a publicly accessible web page that renders the content provided in invoices/show.liquid this is the same url that will provided to customers in the email notifying them to pay their invoice. This allows your customer to pass along their payment page to others without requiring a login. This would be especially helpful if they sent the payment link to a coworker that handles accounts payable, for example.

Viewing and paying invoices

The invoice page should show relevant details of the invoice and, if it has a remaining balance, allow the customer to add a payment.

Example template content

<h1>{{company_name}}</h1>
<h2>INVOICE</h2>

<table class="ui table definition">
  <tr>
    <td>
      Invoice #
    </td>
    <td>
      {{invoice.id}}
    </td>
  </tr>
  <tr>
    <td>
      Invoice Date
    </td>
    <td>
      {{invoice.invoice_date | date: '%m/%d/%Y'}}
    </td>
  </tr>
  <tr>
    <td>
      Due Date
    </td>
    <td>
      {{invoice.due_on | date: '%m/%d/%Y'}}
    </td>
  </tr>
  <tr>
    <td>
      Amount Due
    </td>
    <td>
      {{invoice.balance | currency}}
    </td>
  </tr>
</table>

<div>
  <h3>Shipping Address</h3>
  {% if invoice.shipping_address.company_name %}
    {{ invoice.shipping_address.company_name }}<br />
  {% endif %}
  {{ invoice.shipping_address.full_name }}<br />
  {{ invoice.shipping_address.full_street }}<br />
  {{ invoice.shipping_address.city_state_postal_code }}<br />
  {{ invoice.shipping_address.phone_number }}<br />
</div>

<div>
  <h3>Billing Address</h3>
  {% if invoice.billing_address.company_name %}
    {{ invoice.billing_address.company_name }}<br />
  {% endif %}
  {{ invoice.billing_address.full_name }}<br />
  {{ invoice.billing_address.full_street }}<br />
  {{ invoice.billing_address.city_state_postal_code }}<br />
  {{ invoice.billing_address.phone_number }}<br />
</div>

<table>
  <thead>
    <tr>
      <th>Item</th>
      <th>Description</th>
      <th>Quantity</th>
      <th>Price</th>
      <th>Line Total</th>
    </tr>
  </thead>
  <tbody>
    {% for item in invoice.items %}
      <tr>
        <td>{{item.title}}</td>
        <td>{{item.description}}</td>
        <td>{{item.quantity | delimited}}</td>
        <td>{{item.price | currency}}</td>
        <td>{{item.line_total | currency}}</td>
      </tr>
    {% endfor %}
  </tbody>
</table>

<table>
  <tr>
    <td>
      Subtotal
    </td>
    <td>
      {{ invoice.subtotal | currency }}
    </td>
  </tr>
  <tr>
    <td>
      Tax
    </td>
    <td>
      {{ invoice.tax | currency }}
    </td>
  </tr>
  <tr>
    <td>
      Shipping
    </td>
    <td>
      {{ invoice.shipping | currency }}
    </td>
  </tr>
  <tr>
    <td>
      Total
    </td>
    <td>
      {{ invoice.total | currency }}
    </td>
  </tr>
  <tr>
    <td>
      Payments
    </td>
    <td>
      {{ invoice.payments_total | currency }}
    </td>
  </tr>
  <tr>
    <td>
      Amount Due
    </td>
    <td>
      {{ invoice.balance | currency }}
    </td>
  </tr>
</table>

{% if invoice.balance > 0 %}
  <button class="_cohub_pay_invoice_button" data-invoice-id="{{invoice.invoice_hash}}">
    Pay Now
  </button>
{% endif %}

To allow your customers to pay their invoice, Cohub provides a javascript app that can be included on your webpage and be triggered by clicking on an element with a class name of "_cohub_pay_invoice_button". 

For this to work, two tags must be added inside your web page's <head> : the Cohub application script  tag, and two meta tags that provides the application with a key to allow credit card tokenization and an authenticity token to verify the requesting site's origin. The tokenization key is provided as a liquid variable, and the application script is provided as a liquid filter.

Example inclusion layout

<head>
  ...
  other content, such as <title>, <script>, and <style> tags
  ...

  <meta name="cohub_payment_key" content="{{ cohub_payment_key }}" />
  <meta name="csrf_token" content="{{ csrf_token }}">
  {% invoice_payment_script %}
</head>

With these elements included, and the button provided as detailed above, your customer will be guided through Cohub's payment application to add a payment to their invoice.

Related Topics:

Did this answer your question?