When viewing a receipt in the member/customer portal, users can save their receipt (for transactions or orders) as a PDF by simply clicking the Download as PDF button.
When clicking on that button, the member portal will automatically download a copy of their receipt as a PDF.
The PDF will include your logo, contact info and basic information about the purchase. If it's for an order, it will include each item on the order.
Alternatively, you can e-mail the receipt directly to your customer by viewing the transaction in the Control Panel and selecting E-mail Receipt. Enter your message and we'll take care of the rest. Your member will receive an email containing a link to view the receipt online or to download as a PDF.
After sending your first transaction receipt, you will notice a new e-mail in your Notifications Engine called Transaction Receipt. This e-mail is already wired up to send out, but you can choose to customize the design or experience when they receive this e-mail.
The Download as PDF option is also available for transactions and orders in the Control Panel.
The HTML and HAPI code to achieve the above is (please feel free to change the fonts and styling as required):
<table x-pv-duplicate="1" x-pv-snippet="wrapper" border="0" cellpadding="0" cellspacing="0" class="full-width" style="background-color:#FFFFFF; margin: 0px auto;" width="100%" data-pv-component="transaction" data-pv-parameters="{totalResults:'1',transaction_no:'{@[email protected]}'}">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="full-width" width="600" style="max-width: 560px; margin: 0px auto;">
<tbody>
<tr x-pv-skip="1">
<td height="20" style="height:20px; font-size: 0px; line-height: 0; border-collapse: collapse;" valign="top"></td>
</tr>
<tr x-pv-skip="1">
<td height="20" style="height:20px; font-size: 0px; line-height: 0; border-collapse: collapse;" valign="top"></td>
</tr>
<tr x-pv-skip="1">
<td height="10" style="height:10px; font-size: 0px; line-height: 0; border-collapse: collapse;" valign="top"></td>
</tr>
<tr>
<td valign="top" align="left" style="text-decoration: none; line-height: 22px; font-size: 14px; font-weight: 400; font-family: Georgia, serif;" class="">
Dear {@[email protected]},
</td>
</tr>
<tr x-pv-skip="1">
<td height="10" style="height:10px; font-size: 0px; line-height: 0; border-collapse: collapse;" valign="top"></td>
</tr>
<tr>
<td valign="top" align="left" style="text-decoration: none; line-height: 22px; font-size: 14px; font-weight: 400; font-family: Georgia, serif;" class="">
<p style="font-family: Georgia, serif;">
{@[email protected]}
</p>
<div data-pv-component="text" data-pv-conditional="{@[email protected]} > 0" style="font-family: Georgia, serif;">
You were issued a refund of
<span data-pv-element="refunded_amount" data-pv-type="currency">
$0.00
</span>
.
</div>
<div data-pv-component="text" data-pv-conditional="{@[email protected]} > 0" style="font-family: Georgia, serif;">
Your payment was processed for {@transaction_amount-refunded_amount:[email protected]}.
</div>
You can view your transaction and download a PDF copy by visiting the links below.
</td>
</tr>
<tr x-pv-skip="1">
<td height="10" style="height:10px; font-size: 0px; line-height: 0; border-collapse: collapse;" valign="top"></td>
</tr>
<tr>
<td align="left" style="font-family: Georgia, serif;">
<table align="left" border="0" cellpadding="0" cellspacing="0" style="margin: 0px auto;">
<tbody>
<tr>
<td style="padding-top:5px; padding-bottom:5px;" valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="border-radius: 5px;background-color: #000000;margin: 0px auto;">
<tbody>
<tr>
<td align="center" height="45" style="font-size: 14px; color: rgb(255, 255, 255); font-weight: normal; font-family: 'Open Sans', Arial, Helvetica, sans-serif; word-break: break-word; background-clip: padding-box; padding-left: 25px; padding-right: 25px; line-height: 22px; background-color: rgb(194, 152, 81);" valign="middle" class="">
<a border="0" href="{@[email protected]}/account/transaction/{@[email protected]}" style="color: rgb(255, 255, 255); text-decoration: none; border-style: none; line-height: 22px; font-size: 14px; font-weight: 400; font-family: Georgia, serif;">
View Transaction
</a>
</td>
</tr>
</tbody>
</table>
</td>
<td>
</td>
<td style="padding-top:5px; padding-bottom:5px;" valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="border-radius: 5px;background-color: #000000;margin: 0px auto;">
<tbody>
<tr>
<td align="center" height="45" style="font-size: 14px; color: rgb(255, 255, 255); font-weight: normal; font-family: 'Open Sans', Arial, Helvetica, sans-serif; word-break: break-word; background-clip: padding-box; padding-left: 25px; padding-right: 25px; line-height: 22px; background-color: rgb(194, 152, 81);" valign="middle" class="">
<a border="0" href="{@[email protected]}/account/transaction/{@[email protected]}?do=pdf" style="color: rgb(255, 255, 255); text-decoration: none; border-style: none; line-height: 22px; font-size: 14px; font-weight: 400; font-family: Georgia, serif;">
Download PDF
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr x-pv-skip="1">
<td height="10" style="height:10px; font-size: 0px; line-height: 0; border-collapse: collapse;" valign="top"></td>
</tr>
<tr>
<td valign="top" align="left" style="text-decoration: none; line-height: 22px; font-size: 14px; font-weight: 400; font-family: 'Open Sans', Arial, Helvetica, sans-serif;" class="">
<div data-pv-textwrapper="true" class="" style="font-family: Georgia, serif;">
Thank you,
<br>
{@[email protected]}
</div>
</td>
</tr>
<tr x-pv-skip="1">
<td height="20" style="height:20px; font-size: 0px; line-height: 0; border-collapse: collapse;" valign="top"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>