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:

...

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 /wiki/spaces/TP/pages/1409187843

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:

...

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
ORIGINAL_REFERENCE	5a5ffb60-0d3c-11ea-9248-8bf5d5600868	This field only appears in the case of a reversal. It represents the GUID of the transaction being reversed.
SIGNATURE_REQUIRED	0
MERCHANT_NAME	Borgun Test Merchant
AUTH_CODE	123456
RECEIPT_TYPE	MERCHANT_COPY
RESPONSE	Successful

Template Example

...

language	xml

...


RESPONSE_LABEL	Autorizada (spanish)	i18n version of RESPONSE
AMOUNT_LABEL	Amount
TIP_AMOUNT_LABEL	Tip	Taken from the header field in TipConfiguration Object
TOTAL_AMOUNT_LABEL	Total Amount
TENDER_TYPE_I18N	Tipo de Pago (Spanish)	Translated value of “Tender Type“
TENDER_TYPE	Credit

Template Example

Code Block

language	xml

<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|trim}{% if ($PRINT_ERROR_MESSAGE_I18N) %}:{% endif %}</p>
        </div>
        {% if ($PRINT_ERROR_MESSAGE_I18N) %}
        <div id="error_response_message">
            <p class="large bold center">{$ERROR_MESSAGE_I18N}</p>
        </div>
        {% endif %}
        {% elseIf ($RESPONSE) %}
        <div id="response">
            <p class="large bold center">{$RESPONSE|trim}{% if ($PRINT_ERROR_MESSAGE) %}:{% endif %}</p>
        </div>
        {% if ($PRINT_ERROR_MESSAGE) %}
        <div id="error_response_message">
            <p class="large bold center">{$ERROR_MESSAGE}</p>
        </div>
        {% endif %}
        {% endif %}
        {% if ($TXN_TYPE) %}
        <div id="txn_type">
            <p class="large bold center">{$TXN_TYPE_I18N}</p>
        </div>
        {% endif %}
        {% if ($TOTAL_AMOUNT) %}
        {% if ($AMOUNT) %}
        <div id="amount">
            <label class="left">{$AMOUNT_LABEL}: </label>
            <span class="large right">{$AMOUNT|currency($CURRENCY)}</span>
        </div>
        {% endif %}
        {% if ($TIP_AMOUNT) %}
        <div id="tip_amount">
            <label class="left">{$TIP_AMOUNT_LABEL}: </label>
            <span class="large right">{$TIP_AMOUNT|currency($CURRENCY)}</span>
        </div>
        {% endif %}
        <div id="total_amount">
            <label class="xlarge left bold">{$TOTAL_AMOUNT_LABEL}: </label>
            <span class="xlarge bold right">{$TOTAL_AMOUNT|currency($CURRENCY)}</span>
        </div>
        {% elseIf ($AMOUNT) %}
        <div id="amount">
            <label class="left">{$AMOUNT_LABEL}: </label>
            <span class="large right">{$AMOUNT|currency($CURRENCY)}</span>
        </div>
        {% endif %}
        {% if ($ACCOUNT_TYPE) %}
        <div id="account_type">
            <label class="left bold">{$ACCOUNT_TYPE_I18N}</label>
            <span class="right">{$ACCOUNT_TYPE}</span>
        </div>
        {% endif %}
        {% if ($DUE_AMOUNT) %}
        <div id="due_amount">
            <label class="left bold">{$DUE_AMOUNT_I18N}</label>
            <span class="right">{$DUE_AMOUNT|currency($CURRENCY)}</span>
        </div>
        {% endif %}
        <div class="separator dotted" style="margin-top: 10px; height: 2px; margin-bottom: 10px;"></div>
        {% if ($MID) %}
       <img class="center" src="https://hndpt.co/34r676D"/<div id="mid">
        {% if ($MERCHANT_NAME) %} <label    class="left bold">{$MID_I18N}</label>
   <div>          <span   <p class="large bold centerright">{$MERCHANT_NAME$MID}</p>span>
        </div>
        {% endif %}
        {% if ($MERCHANT_LOCATION$TID) %}
         <div><div id="tid">
            <p<label class="centerleft bold">{$MERCHANT$TID_LOCATIONI18N}</p>label>
        </div>         {% endif %}<span class="right">{$TID}</span>
        </div>
   <div class="separator solid" style="margin-top: 10px; height: 2px; margin-bottom: 10px;"></div>{% endif %}
         {% if ($DATETIME$CARD_NUMBER) %}
         <div><div id="card_number">
            <label class="left bold">{$DATETIME|date$APP_LABEL}</label>
            <span class="right">{$DATETIME|time$CARD_NUMBER}</span>
        </div>
        {% endif %}
        {% if ($ENTRY) %}
    </header>     <div id="entry">
            <label class="left bold">{$ENTRY_I18N}</label>
    <main>        <span {% if ($RESPONSE) %}class="right">{$ENTRY}</span>
        </div>
   <div>     {% endif %}
     <p class="large bold center">{$RESPONSE}</p>
        </div>
        {% endif %}{% if ($CVM != null) && ($TXN_TYPE != "SALE VOID") && ($TXN_TYPE != "REFUND VOID") %}
        <div id="cvm">
  {% if ($TXN_TYPE) %}       <label  <div>class="left bold">{$CVM_I18N}</label>
            <p<span class="large bold center"right">{$TXN_TYPE$CVM}</p>span>
        </div>
        {% endif %}
        {% if ($AMOUNT$AUTH_CODE) %}
         <div><div id="auth_code">
            <p<label class="xlargeleft bold center">{$AMOUNT|currency($CURRENCY)}</p>">{$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 ($MID$TENDER_TYPE_I18N) %}
        <div  <div>id="tender_type">
             <label class="left bold">MID<>{$TENDER_TYPE_I18N}</label>
            <span class="right">{$MID$TENDER_TYPE}</span>
        </div>
        {% endif %}
        <div class="separator dotted" style="margin-top: 10px; height: 2px;    <margin-bottom: 10px;"></div>
        {% endifif ($ORIGINAL_REFERENCE) %}
        {% if ($TID) %} <div>
       <div>         <p    <label class="left bold">TID<>GUID</label>
p>
           <span class="right">{$TID}</span></div>
            <div id="guid">
 </div>         {% endif %}    <p class="small left">{$ORIGINAL_REFERENCE}</p>
  {% if ($CARD_NUMBER) %}       </div>
 <div>           <div>
 <label class="left bold">{$APP_LABEL}</label>             <span<p class="left bold"right">{$CARD$TXN_TYPE_NUMBERI18N}</span> GUID</p>
            </div>
        {% endif %}  <div id="guid">
     {% if ($ENTRY) %}        <p <div>
class="small left">{$REFERENCE}</p>
           <label class="left bold">ENTRY MODE</label> </div>
        {% elseIf ($REFERENCE) %}
  <span class="right">{$ENTRY}</span>         </div><div>
        {% endif %}      <p class="left bold">GUID</p>
{% if ($CVM) %}         <div></div>
            <label<div classid="left bold">CVM</label>"guid">
                <span<p class="rightsmall left">{$CVM$REFERENCE}</span>p>
            </div>
        {% endif %}
        {% if ($AUTH_CODE$RRN) %}
        <div>
            <label<p class="left bold">AUTH CODE</label>>{$RRN_I18N}</p>
        </div>
        <div id="rrn">
            <span<p class="rightsmall left">{$AUTH_CODE$RRN}</span>p>
        </div>
        {% endif %}
        <div class="separator dotted" style="margin-top: 10px; height: 2px; margin-bottom: 10px;"></div>
        {% if ($REFERENCE$RECEIPT_TYPE_DESCRIPTION) %}
        <div>
            <p class="left bold">GUID</p><div id="receipt_type_description">
        </div>
        <div>             <p class="small leftcenter">{$REFERENCE$RECEIPT_TYPE_DESCRIPTION}</p>
        </div>
        {% endif %}
        <div class="separator dottedsolid" style="margin-top: 10px; height: 2px; margin-bottom: 10px;"></div>
        {% if ($SWIPE != 1) %}
        {% if ($TVR != null || $AID != null || $IAD != null || $TSI != null || {%$ARC if ($RECEIPT_TYPE_DESCRIPTION!= null) %}
        <div>
            <p class="center bold">{$RECEIPT$EMV_TYPEDETAILS_DESCRIPTIONI18N}</p>
        </div>
        {% endif %}
        {% if ($AID) %}
        <div classid="aid"separator>
solid" style="margin-top: 10px; height: 2px; margin-bottom: 10px;"></div>      <label class="small  <div>left bold">{$AID_I18N}</label>
            <p<span class="center bold">EMV DETAILS</p>left">{$AID}</span>
        </div>
        {% endif </div>%}
        {% if ($AID$TVR) %}
         <div><div id="tvr">
            <label class="small left bold">AID<>{$TVR_I18N}</label>
            <span class="left">{$AID$TVR}</span>
        </div>
        {% endif %}
        {% if ($TVR$IAD) %}
         <div><div id="iad">
            <label class="small left bold">TVR<>{$IAD_I18N}</label>
            <span class="left">{$TVR$IAD}</span>
        </div>
        {% endif %}
        {% if ($IAD$TSI) %}
         <div><div id="tsi">
            <label class="small left bold">IAD<>{$TSI_I18N}</label>
            <span class="left">{$IAD$TSI}</span>
        </div>
        {% endif %}
        {% if ($TSI$ARC) %}
        <div><div id="arc">
            <label class="small left bold">TSI<>{$ARC_I18N}</label>
            <span class="left">{$TSI$ARC}</span>
        </div>
        {% endif %}
        {% if ($ARC) %}
        <div>
            <label class="small left bold">ARC</label>
   $TVR != null || $AID != null || $IAD != null || $TSI != null || $ARC != null) %}
        <span<div class="left">{$ARC}</span>
        <separator solid" style="margin-top: 10px; height: 2px; margin-bottom: 10px;"></div>
        {% endif %}
 
      <div class="separator solid" style="margin-top: 10px; height: 2px; margin-bottom: 10px;"></div>{% endif %}
    </main>
    <footer>
        {% if ($SUCCESS_RESPONSE != 1 && $RESPONSE != $ERROR_MESSAGE) %}
        <div><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><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:

...

Versions Compared

Old Version 1

New Version Current

Key

Where is defined

How a Template Engine Works

Template Elements

Adding Logic to the Template

Transaction Data

Template Example

Template Example

Page Comparison

Versions Compared

Old Version 1

New Version Current

Key

Where is defined

How a Template Engine Works

Template Elements

Adding Logic to the Template

Transaction Data

Template Example

Template Example