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:'{@reference_no@}'}">
<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 {@first_name@},
</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;">
{@message@}
</p>
<div data-pv-component="text" data-pv-conditional="{@refunded_amount@} > 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="{@transaction_amount-refunded_amount@} > 0" style="font-family: Georgia, serif;">
Your payment was processed for {@transaction_amount-refunded_amount:currency@}.
</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="{@default_domain@}/account/transaction/{@transaction_no@}" 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="{@default_domain@}/account/transaction/{@transaction_no@}?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>
{@company_name@}
</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>