[memb_show_receipt]
This Applies to
Summary
This shortcode displays a receipt or invoice for the customer’s purchase. The look and feel of the invoice is completely customizable with a rich combination of HTML, CSS, merge codes and Memberium shortcodes. This combination enables you to design an invoice that looks the way you want.
Shortcode Examples
This shortcode is best used with the [memb_list_invoices] shortcode. You can use [memb_list_invoices] to list the customer’s invoices, and then link to a receipt page to display the detailed receipt for printing or saving. The simplest way to link the [memb_list_invoices] output is to use the %%invoice.id%% merge code to link to your receipt page, like this.
Example:
<a href="/my-receipt-page/?invoice_id=%%invoice.id%%">View Receipt</a></td>
Then, on your receipt page, pass the invoice_id from the URL to your [memb_show_receipt] shortcode like this:
[memb_show_receipt invoice_id={{get.invoice_id}}]
You can of course use any parameter name instead of “invoice_id”.
Display a receipt based on an invoice ID passed in the URL as “invoice_id”:
[memb_show_receipt invoice_id={{get.invoice_id}}]
Display a receipt based on an invoice ID passed in the URL as “id”:
[memb_show_receipt invoice_id={{get.id}}]
Example Overdue Receipt:
Example Paid Receipt:
Shortcode Parameters
invoice_id: The ID number of the invoice to display. Defaults to none. Required.
contact_id: The ID number of the contact who owns the invoice. Defaults to the contact ID of the currently logged in member. Optional.
date_format: The PHP date format to use for the receipt dates
Additional Information
The configuration of your receipt display is done in the Admin dashboard. Go to Memberium -> eCommerce, and click on the Invoices tab.
On this page you will see a six part form with each segment of the invoice or receipt to be displayed. We’ve also provided example code similar to what we use on our own sites, to get you started so that you don’t have to design your invoice from scratch. The design of this shortcode gives you almost total control over the look and feel of the invoice. The editor page also includes a list of the merge codes that you can use in your receipt.
The example code provided below is just an example for reference. It’s not the “best” way, or the only way. It’s just a sample to get you going. Obviously you’ll want to add your own artwork, and styling to match your brand the best. Any HTML designer should be able to work with our %% merge codes and shortcodes to make your vision a reality.
Example Header Line
<style>
/* Form Style */
.itemlabel { color: #fff; background-color:#000; border-radius: 5px; }
.itemlabel td { padding-left: 5px; }
.memberium-order-receipt table, .memberium-order-receipt tr, .memberium-order-receipt td { border: none; }
.memberium-order-receipt .logo { height: 125px; margin-right-5px; margin-top:-5px; border-radius: 7px; }
.memberium-order-receipt .addresstable { border-collapse:separate; border-spacing:10px; }
.billingaddress, .shippingaddress {
background-color:lightblue;
border-radius:10px;
padding:10px !important;
}
/* Ribbon Style */
.memberium-order-receipt { position: relative; margin: 0; padding: 10px; overflow: hidden; border: 1px solid #000000; }
/* The ribbons */
.corner-ribbon { width: 200px; background: #e43; position: absolute; top: 25px; left: -50px; text-align: center; line-height: 50px; letter-spacing: 1px; color: #f0f0f0; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); font-weight:bold; font-size: 130%; }
/* Custom styles */
.corner-ribbon.shadow { box-shadow: 0 0 3px rgba(0,0,0,.3); }
/* Different positions */
.corner-ribbon.top-left { top: 25px; left: -50px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }
.corner-ribbon.top-right { top: 25px; right: -50px; left: auto; transform: rotate(45deg); -webkit-transform: rotate(45deg); }
.corner-ribbon.bottom-left { top: auto; bottom: 25px; left: -50px; transform: rotate(45deg); -webkit-transform: rotate(45deg); }
.corner-ribbon.bottom-right { top: auto; right: -50px; bottom: 25px; left: auto; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }
/* Colors */
.corner-ribbon.white { background: #f0f0f0; color: #555; }
.corner-ribbon.black { background: #333; }
.corner-ribbon.grey { background: #999; }
.corner-ribbon.blue { background: #39d; }
.corner-ribbon.green { background: #2c7; }
.corner-ribbon.turquoise { background: #1b9; }
.corner-ribbon.purple { background: #95b; }
.corner-ribbon.red { background: #e43; }
.corner-ribbon.orange { background: #e82; }
.corner-ribbon.yellow { background: #ec0; }
</style>
[memb_if value1="%%invoice.overdue%%" test=gt value2=0]
<div class="corner-ribbon top-left red shadow">OVERDUE</div>
[else_if]
[memb_if1 value1="%%invoice.overdue%%" test=eq value2=0]
[memb_if2 value1="%%invoice.totalpaid%%" test=eq value2="%%invoice.invoicetotal%%"]
<div class="corner-ribbon top-left green shadow">PAID</div>
[else_if2]
<div class="corner-ribbon top-left orange shadow">CURRENT</div>
[/memb_if2]
[/memb_if1]
[/memb_if]
<img class="logo" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Company%20Logo&w=350&h=150" align="right">
<table style="width:100%; margin-top: 125px;">
<tr>
<td>
<h2>INVOICE</h2>
</td>
<td style="text-align:right;">
Invoice ID: %%invoice.id%%<br />
Order Date: %%order.datecreated%%<br />
</td>
</tr>
</table>
<table style="width:100%" class="addresstable">
<tr>
<td><strong>Billing Address</strong></td>
<td><strong>Shipping Address</strong></td>
</tr>
<tr>
<td class="billingaddress">
<strong>%%contact.firstname%% %%contact.lastname%%</strong><br />
%%contact.company%%<br />
%%contact.StreetAddress1%%<br />[memb_if value1="%%contact.StreetAddress2%%" test="gt" value2=""]%%contact.StreetAddress2%%<br />[/memb_if]
%%contact.city%%, %%contact.state%% %%contact.postalcode%%<br />
</td>
<td class="shippingaddress">
<strong>%%order.shipfirstname%% %%order.shiplastname%%</strong><br />
%%order.shipcompany%%<br />
%%order.shipstreet1%%<br />[memb_if value1="%%order.shipstreet2%%" test="gt" value2=""]%%order.shipstreet2%%<br />[/memb_if]
%%order.shipcity%%, %%order.shipstate%% %%order.shipzip%%<br />
</td>
</tr>
</table>
<table style="width:100%">
<tr class="itemlabel">
<td>Item</td>
<td style="width:100px;">Price</td>
<td style="width:150px;">Quantity</td>
<td style="width:100px;">Subtotal</td>
</tr>
Example Items
<tr> <td>%%item.itemname%%</td> <td>$%%item.ppu%%</td> <td>x%%item.qty%%</td> <td>$%%receipt.subtotal%%</td> </tr>
Example Header Payments
<tr> <td></td> <td></td> <td><strong>Total</strong></td> <td>$%%invoice.invoicetotal%%</td> </tr> <tr> <td></td> <td></td> <td><strong>Total Paid</strong></td> <td>$%%invoice.totalpaid%%</td> </tr> [memb_if value1="%%invoice.overdue%%" test="gt" value2="0"] <tr> <td></td> <td></td> <td><strong>Overdue Amount</strong></td> <td><strong style="color:red;">$%%invoice.overdue%%</strong></td> </tr> [/memb_if] </table> <strong>Payments</strong><br /> <table>
Example Payments
<tr> <td nowrap>%%payment.paydate%%</td> <td nowrap>$%%payment.payamt%%</td> <td nowrap>%%payment.paytype%%</td> <td nowrap>%%payment.paynote%%</td> </tr>
Example Scheduled Payments Header
</table> <strong>Scheduled Payments</strong><br /> <table style="width:100%;"> <tr><td>Due Date</td><td>Due</td><td>Paid</td></tr>
Example Scheduled Payments
<tr> <td style="width:150px;">%%scheduled.datedue%%</td> <td>$%%scheduled.amtdue%%</td> <td>$%%scheduled.amtpaid%%</td> </tr>
Example Footer
</table> <p align="right">Generated on [memb_date format="F d, Y"]</p>
For projects that require deep customization of the invoice beyond what can be done with shortcodes, we provide a memb_getReceipt() function to pull the raw data so that your PHP programmer can create anything you wish with complete control over the presentation.
FAQ
Does this shortcode generate PDF invoices?
No, this shortcode generates an HTML invoice. This invoice can be saved, printed, or converted to PDF by the customer’s browser and plugins. The invoice can also be copy/pasted into other apps such as Microsoft Word or OpenOffice. PDF generation is under consideration for a future release.
Can other people view my customer’s receipts if they get or guess the URLs?
No. When the invoice is requested, both the Contact ID and the Invoice ID must be supplied to the getReceipt() function. If the two ID’s don’t match, then nothing is displayed. As a best practice, only the Invoice ID is supplied from the URL, and the Contact ID is taken from the session of the currently logged in user.
[memb_show_receipt]
This Applies To
