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
TXN_TYPE_LABEL	VENTA (spanish)	i18n version of TXN_TYPE
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	* ** 0119
pin_entered	0
SUCCESS_RESPONSE	1
IAD	06010A03A00000
RECEIPT_TYPE_DESCRIPTION	* MERCHANT COPY **
CVM	VERIFICATION NOT REQUIRED
PIN_VERIFIED_DESCRIPTION	PIN VERIFIED
APP_EXP_DATE	1222
RECEIPT_COPY	* MERCHANT COPY **
REFERENCE	5a5ffb60-0d3c-11ea-9248-8bf5d5600868
SIGNATURE_REQUIRED	0
MERCHANT_NAME	Borgun Test Merchant
AUTH_CODE	123456
RECEIPT_TYPE	MERCHANT_COPY
RESPONSE	Successful
RESPONSE_LABEL	Autorizada (spanish)	i18n version of RESPONSE

Template Example

<HtmlReceiptTemplate><![CDATA[
<html>
    <head></head>
    <body>
        <header>
            <img class="center" src="https://hndpt.co/34r676D"/>
            {% if ($MERCHANT_NAME) %}
            <div id="merchant_name">
                <p class="large bold center">{$MERCHANT_NAME}</p>
            </div>
            {% endif %}
            {% if ($MERCHANT_LOCATION) %}
            <div id="merchant_location">
                <p class="center">{$MERCHANT_LOCATION}</p>
            </div>
            {% endif %}
            <div  id="datetime" 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_I18N) %}
            <div id="response">
                <p class="large bold center">{$RESPONSE_I18N}{% if ($ERROR_MESSAGE_I18N != null && ($ERROR_MESSAGE_I18N|trim != $RESPONSE_I18N|trim)) %}: {$ERROR_MESSAGE_I18N}{% endif %}</p>
            </div>
            {% elseIf ($RESPONSE) %}
            <div id="response">
                <p class="large bold center">{$RESPONSE}{% if ($ERROR_MESSAGE != null && $ERROR_MESSAGE|trim != $RESPONSE|trim) %}: {$ERROR_MESSAGE}{% endif %}</p>
            </div>
            {% endif %}
            {% if ($TXN_TYPE) %}
            <div id="txn_type">
                <p class="large bold center">{$TXN_TYPE_I18N}</p>
            </div>
            {% endif %}
            {% if ($AMOUNT) %}
            <div id="amount">
                <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 id="mid">
                <label class="left bold">{$MID_I18N}</label>
                <span class="right">{$MID}</span>
            </div>
            {% endif %}
            {% if ($TID) %}
            <div id="tid">
                <label class="left bold">{$TID_I18N}</label>
                <span class="right">{$TID}</span>
            </div>
            {% endif %}
            {% if ($CARD_NUMBER) %}
            <div id="card_number">
                <label class="left bold">{$APP_LABEL}</label>
                <span class="right">{$CARD_NUMBER}</span>
            </div>
            {% endif %}
            {% if ($ENTRY) %}
            <div id="entry">
                <label class="left bold">{$ENTRY_I18N}</label>
                <span class="right">{$ENTRY}</span>
            </div>
            {% endif %}
            {% if ($CVM != null) && ($TXN_TYPE != "SALE VOID") && ($TXN_TYPE != "REFUND VOID") %}
            <div id="cvm">
                <label class="left bold">{$CVM_I18N}</label>
                <span class="right">{$CVM}</span>
            </div>
            {% endif %}
            {% if ($AUTH_CODE) %}
            <div id="auth_code">
                <label class="left bold">{$AUTH_CODE_I18N}</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 id="guid">
                <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 id="receipt_type_description">
                <p class="center">{$RECEIPT_TYPE_DESCRIPTION}</p>
            </div>
            {% endif %}
            <div class="separator solid" style="margin-top: 10px; height: 2px; margin-bottom: 10px;"></div>
            {% if ($SWIPE != 1) %}
                {% if ($TVR != null || $AID != null || $IAD != null || $TSI != null || $ARC != null) %}
                <div>
                    <p class="center bold">{$EMV_DETAILS_I18N}</p>
                </div>
                {% endif %}
                {% if ($AID) %}
                <div id="aid">
                    <label class="small left bold">{$AID_I18N}</label>
                    <span class="left">{$AID}</span>
                </div>
                {% endif %}
                {% if ($TVR) %}
                <div id="tvr">
                    <label class="small left bold">{$TVR_I18N}</label>
                    <span class="left">{$TVR}</span>
                </div>
                {% endif %}
                {% if ($IAD) %}
                <div id="iad">
                    <label class="small left bold">{$IAD_I18N}</label>
                    <span class="left">{$IAD}</span>
                </div>
                {% endif %}
                {% if ($TSI) %}
                <div id="tsi">
                    <label class="small left bold">{$TSI_I18N}</label>
                    <span class="left">{$TSI}</span>
                </div>
                {% endif %}
                {% if ($ARC) %}
                <div id="arc">
                    <label class="small left bold">{$ARC_I18N}</label>
                    <span class="left">{$ARC}</span>
                </div>
                {% endif %}
                {% if ($TVR != null || $AID != null || $IAD != null || $TSI != null || $ARC != null) %}
                <div class="separator solid" style="margin-top: 10px; height: 2px; margin-bottom: 10px;"></div>
                {% endif %}
            {% endif %}
        </main>
        <footer>
            {% if ($SUCCESS_RESPONSE != 1 && $RESPONSE != $ERROR_MESSAGE) %}
            <div id="error_message">
                <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 id="signature">
                <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:

Cloud SDK Html Receipt Template