Where is defined
The Html receipt template is defined as a child element of the <config> element, which is the root element of the Card Reader Config:
<config>
<HtmlReceiptTemplate><![CDATA[
/// ------ Html Template goes here --------- ////
]]></HtmlReceiptTemplate>
</config>
Since we are using a Java Template Engine called Chunk which is not pure XML we need to wrap it in a CDATA section.
How a Template Engine Works
The template engine enables us to combine a Receipt Template and a set of specific values to render a receipt:
Template Elements
Since the final HTML Receipt must be converted later to the printer format, we are using only a subset of HTML to make this conversion task easier. See Html Print Format
Adding Logic to the Template
Chunk supports a number of commands or expressions to control what we render. For instance we could print the error message only if the transaction failed:
<footer>
...
{% if ($SUCCESS_RESPONSE != 1) %}
<div>
<p class="large center">{$ERROR_MESSAGE}</p>
</div>
<div class="separator solid" style="margin-top: 10px; height: 2px; margin-bottom: 10px;"></div>
{% endif %}
...
</footer>
Go to the Chunk Documentation for a complete list of features.
Transaction Data
This is the template variables we currently have to generate dynamic content:
Field Name | Value Example | Description |
|---|---|---|
MID | 000000001754852 | |
AID | A0000000031010 | |
TXN_TYPE | SALE | |
TVR | 0000000000 | |
CURRENCY_WITH_AMOUNT | USD 55.00 | |
ARC | 0000 | |
TIME | 16:25 | |
DATE | 22.11.2019 | |
TSI | 0000 | |
ENTRY | Contactless | |
ERROR_MESSAGE | Successful | |
MERCHANT_LOCATION | Ármúli 30 108 reykjavik | |
APP_LABEL | VISA CREDIT | |
TID | 01754852 | |
CARD_NUMBER |
| |
pin_entered | 0 | |
SUCCESS_RESPONSE | 1 | |
IAD | 06010A03A00000 | |
RECEIPT_TYPE_DESCRIPTION |
| |
CVM | VERIFICATION NOT REQUIRED | |
PIN_VERIFIED_DESCRIPTION | PIN VERIFIED | |
APP_EXP_DATE | 1222 | |
RECEIPT_COPY |
| |
REFERENCE | 5a5ffb60-0d3c-11ea-9248-8bf5d5600868 | |
SIGNATURE_REQUIRED | 0 | |
MERCHANT_NAME | Borgun Test Merchant | |
AUTH_CODE | 123456 | |
RECEIPT_TYPE | MERCHANT_COPY | |
RESPONSE | Successful |
Template Example
<HtmlReceiptTemplate><![CDATA[
<html>
<head></head>
<body>
<header>
<img class="center" src="https://hndpt.co/34r676D"/>
{% if ($MERCHANT_NAME) %}
<div>
<p class="large bold center">{$MERCHANT_NAME}</p>
</div>
{% endif %}
{% if ($MERCHANT_LOCATION) %}
<div>
<p class="center">{$MERCHANT_LOCATION}</p>
</div>
{% endif %}
<div class="separator solid" style="margin-top: 10px; height: 2px; margin-bottom: 10px;"></div>
{% if ($DATETIME) %}
<div>
<label class="left">{$DATETIME|date}</label>
<span class="right">{$DATETIME|time}</span>
</div>
{% endif %}
</header>
<main>
{% if ($RESPONSE) %}
<div>
<p class="large bold center">{$RESPONSE}</p>
</div>
{% endif %}
{% if ($TXN_TYPE) %}
<div>
<p class="large bold center">{$TXN_TYPE}</p>
</div>
{% endif %}
{% if ($AMOUNT) %}
<div>
<p class="xlarge bold center">{$AMOUNT|currency($CURRENCY)}</p>
</div>
{% endif %}
<div class="separator dotted" style="margin-top: 10px; height: 2px; margin-bottom: 10px;"></div>
{% if ($MID) %}
<div>
<label class="left bold">MID</label>
<span class="right">{$MID}</span>
</div>
{% endif %}
{% if ($TID) %}
<div>
<label class="left bold">TID</label>
<span class="right">{$TID}</span>
</div>
{% endif %}
{% if ($CARD_NUMBER) %}
<div>
<label class="left bold">{$APP_LABEL}</label>
<span class="right">{$CARD_NUMBER}</span>
</div>
{% endif %}
{% if ($ENTRY) %}
<div>
<label class="left bold">ENTRY MODE</label>
<span class="right">{$ENTRY}</span>
</div>
{% endif %}
{% if ($CVM) %}
<div>
<label class="left bold">CVM</label>
<span class="right">{$CVM}</span>
</div>
{% endif %}
{% if ($AUTH_CODE) %}
<div>
<label class="left bold">AUTH CODE</label>
<span class="right">{$AUTH_CODE}</span>
</div>
{% endif %}
<div class="separator dotted" style="margin-top: 10px; height: 2px; margin-bottom: 10px;"></div>
{% if ($REFERENCE) %}
<div>
<p class="left bold">GUID</p>
</div>
<div>
<p class="small left">{$REFERENCE}</p>
</div>
{% endif %}
<div class="separator dotted" style="margin-top: 10px; height: 2px; margin-bottom: 10px;"></div>
{% if ($RECEIPT_TYPE_DESCRIPTION) %}
<div>
<p class="center">{$RECEIPT_TYPE_DESCRIPTION}</p>
</div>
{% endif %}
<div class="separator solid" style="margin-top: 10px; height: 2px; margin-bottom: 10px;"></div>
<div>
<p class="center bold">EMV DETAILS</p>
</div>
{% if ($AID) %}
<div>
<label class="small left bold">AID</label>
<span class="left">{$AID}</span>
</div>
{% endif %}
{% if ($TVR) %}
<div>
<label class="small left bold">TVR</label>
<span class="left">{$TVR}</span>
</div>
{% endif %}
{% if ($IAD) %}
<div>
<label class="small left bold">IAD</label>
<span class="left">{$IAD}</span>
</div>
{% endif %}
{% if ($TSI) %}
<div>
<label class="small left bold">TSI</label>
<span class="left">{$TSI}</span>
</div>
{% endif %}
{% if ($ARC) %}
<div>
<label class="small left bold">ARC</label>
<span class="left">{$ARC}</span>
</div>
{% endif %}
<div class="separator solid" style="margin-top: 10px; height: 2px; margin-bottom: 10px;"></div>
</main>
<footer>
{% if ($SUCCESS_RESPONSE != 1) %}
<div>
<p class="large center">{$ERROR_MESSAGE}</p>
</div>
<div class="separator solid" style="margin-top: 10px; height: 2px; margin-bottom: 10px;"></div>
{% endif %}
<div class="separator" style="margin-top: 20px; margin-bottom: 20px;"></div>
{% if ($SIGNATURE ) %}
<div>
<img class="center" src="{$SIGNATURE}"/>
</div>
<div class="separator solid" style="margin-top: 10px; height: 2px; margin-bottom: 10px;"></div>
{% endif %}
</footer>
</body>
</html>
]]>
</HtmlReceiptTemplate>
This is how it looks rendered as HTML in the mPOS Handpoint app:
And this the PAX printed version of it:
