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
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

Template Example

...

language	xml


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 ($ERROR$PRINT_MESSAGE_I18N != null && ($ERROR_ERROR_MESSAGE_I18N|trim != $RESPONSE_I18N|trim))) %}:{% endif %}:</p>
        </div>
        {% endif %}</p>
        </div>
        {% if ($ERROR$PRINT_MESSAGE_I18N != null && ($ERROR_MESSAGE_I18N|trim != $RESPONSE_I18N|trim))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}{%                 {$RESPONSE}{% if ($ERROR_MESSAGE != null && ($ERROR_MESSAGE|trim != $RESPONSE|trim)if ($PRINT_ERROR_MESSAGE) %}: {% endif %}</p>
        </div>
        {% if ($ERROR_MESSAGE != null && ($ERROR_MESSAGE|trim != $RESPONSE|trim))$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 ($DUE$ACCOUNT_AMOUNTTYPE) %}
        <div id="dueaccount_amounttype">
            <label class="left bold">{$DUE$ACCOUNT_AMOUNTTYPE_I18N}</label>
            <span class="right">{$DUE_AMOUNT|currency($CURRENCY)$ACCOUNT_TYPE}</span>
        </div>
        {% endif %}
        <div class="separator dotted" style="margin-top: 10px; height: 2px; margin-bottom: 10px;"></div>
        {% if ($MID$DUE_AMOUNT) %}
        <div id="middue_amount">
            <label class="left bold">{$MID$DUE_AMOUNT_I18N}</label>
            <span class="right">{$MID$DUE_AMOUNT|currency($CURRENCY)}</span>
        </div>
        {% endif %}
        <div class="separator dotted" style="margin-top: 10px; height: 2px; margin-bottom: 10px;"></div>
        {% if ($TID$MID) %}
        <div id="tidmid">
            <label class="left bold">{$TID$MID_I18N}</label>
            <span class="right">{$TID$MID}</span>
        </div>
        {% endif %}
        {% if ($CARD_NUMBER$TID) %}
        <div id="card_numbertid">
            <label class="left bold">{$APP$TID_LABELI18N}</label>
            <span class="right">{$CARD_NUMBER$TID}</span>
        </div>
        {% endif %}
        {% if ($ENTRY$CARD_NUMBER) %}
        <div id="entrycard_number">
            <label class="left bold">{$ENTRY$APP_I18NLABEL}</label>
            <span class="right">{$ENTRY$CARD_NUMBER}</span>
        </div>
        {% endif %}
        {% if ($CVM != null) && ($TXN_TYPE != "SALE VOID") && ($TXN_TYPE != "REFUND VOID") %}$ENTRY) %}
        <div id="entry">
          <div id="cvm">             <label class="left bold">{$CVM$ENTRY_I18N}</label>
            <span class="right">{$CVM$ENTRY}</span>
        </div>
        {% endif %}
        {% if ($CVM != ($AUTH_CODEnull) && ($TXN_TYPE != "SALE VOID") && ($TXN_TYPE != "REFUND VOID") %}
        <div id="auth_codecvm">
            <label class="left bold">{$AUTH_CODE$CVM_I18N}</label>
            <span class="right">{$AUTH_CODE}</span>$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 %}
        {% if ($TENDER_TYPE_I18N) %}
        <div id="tender_type">
            <label class="left bold">{$TENDER_TYPE_I18N}</label>
            <span class="right">{$TENDER_TYPE}</span>
        </div>
        {% endif %}
        <div class="separator dotted" style="margin-top: 10px; height: 2px; margin-bottom: 10px;"></div>
        {% if ($ORIGINAL_REFERENCE) %}
            <div>
                <p class="left bold">GUID</p>
            </div>
            <div id="guid">
                <p class="small left">{$ORIGINAL_REFERENCE}</p>
            </div>
            <div>
                <p class="left bold">{$TXN_TYPE_I18N} GUID</p>
            </div>
            <div id="guid">
                <p class="small left">{$REFERENCE}</p>
            </div>
        {% elseIf ($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 ($REFERENCE$RRN) %}
        <div>
            <p class="left bold">GUID<>{$RRN_I18N}</p>
        </div>
        <div id="guidrrn">
            <p class="small left">{$REFERENCE$RRN}</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>

...

Versions Compared

Old Version 10

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 10

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