Receipt Page

Each time a customer completes a successful order payment in LemonStand, they are shown a receipt page that lists the details of their order. Each payment method in LemonStand allows you to set a receipt page specific to the payment method type.


You can create and use the same receipt page for every payment method enabled within LemonStand, or you can create a different receipt page for each. Here is an example of the receipt page included with the Zest theme:


Creating a Receipt Page

To create a receipt page, login to the backend of your store and then add a new page. You can name your receipt page anything you like. For example, "Thank you!". Also, set a URL for your receipt page. The URL can be whatever you like as long as the URL value is followed by the:paymenthash parameter. For example, "/thankyou/:paymenthash". The :paymenthash parameter will load the invoice object based on the hash value passed into the receipt page's URL when the page is loaded.

For the receipt page to work you also need to make sure you set the page's action to shop:receipt. The shop:receipt action will prepare the invoice and payment variables for use with your receipt page, which will give you access to order invoices, shipments and items.

The invoice object being loaded for the receipt page has the possibility of being null, if the invoice trying to be loaded does not exist in the system. It's suggested to always check that the invoice being loaded is valid, by using {% if invoice %}. We also want to check if the invoice being loaded has been paid or not before displaying the receipt page. This can be done using {% if invoice.isPaid() %}.

The following code illustrates the typical structure for a receipt page:

<code class="language-twig"><div class="row">
  <div class="content twelve columns">
   {% if invoice %}
     <div class="row">
       {{ partial('shop-invoiceitems') }}
     </div>
    {% if invoice.isPaid() %}
       <div class="row">
         <div class="three columns offset-by-nine data-list align-right">
           {{ partial('shop-invoicetotals') }}
         </div>
       </div>
    {% else %}
      <p><a class="button" href="{{ site_url('review/'~invoice.order.order_hash) }}">Pay the order</a></p>
    {% endif %}
   {% else %}
      <p class="flash error">Invoice not found.</p>
   {% endif %}
  </div>
</div></code>
    

Listing Invoice Items

In order to output a list of items included in an invoice, we first need to access the shipment that contains the invoice items. Currently LemonStand does not allow for multiple shipments per order, so we simply access all shipments by using {% for shipment in invoice.shipments %}. We can then iterate through the items contained within the shipment by using {% for item in shipment.shipmentItems %}.

The following code illustrates the typical structure for an invoice items partial:

<code class="language-twig">{% for shipment in invoice.shipments %}
    {% for item in shipment.shipmentItems %}
    <tr>
      <td><h3>{{ item.product.name }}</h3></td>
      <td><img src="{{ item.product.images.first.thumbnail(80, 80) }}"/></td>   
      <td class="narrow"><i>{{ item.quantity|number_format(0) }}</i></td>
      <td class="narrow"><i>{{ item.pivot.price|currency }}</i></td>
      <td class="narrow"><i>{{ 0|currency }}</i></td>
      <td class="narrow"><i>{{ (item.quantity *item.pivot.price)|currency }}</i></td>
    </tr>
    {% endfor %}
  {% endfor %}</code>
    

Listing Invoice totals

An invoice wouldn't be complete without a section listing the breakdown of the dollar amount totals for the invoice. Invoice totals can be accessed via the order object. Below is an example of a basic invoice totals partial:

<code class="language-twig"><p><strong>Subtotal:</strong> <i>{{ invoice.order.subtotal_invoiced|currency }}</i></p>
<p><strong>Sales Tax:</strong> <i>{{ invoice.order.total_sales_tax|currency }}</i></p>
<p><strong>Shipping:</strong> <i>{{ invoice.order.total_shipping_quote|currency }}</i></p>
{% if invoice.order.total_shipping_tax %}
  <p><strong>Shipping Taxes:</strong> <i>{{ invoice.order.total_shipping_tax|currency }}</i></p>
{% endif %}
<p class="subtotal"><strong>Total:</strong>  <i>{{ invoice.order.total|currency }}</i></p></code>
    

Listing Invoice Taxes

If you have taxes on your products and would like to let the customer know what kind of taxes they were charged for, you can add the following lines to your receipt page.

<code class="language-twig"><ul>
    {% for tax in invoice.taxes %}
        <li>{{ tax.tax_name }} ({{ tax.tax_rate }}) {{ tax.tax_amount|currency }}</li>
    {% endfor %}
</ul></code>