Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 4 Next »

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>
            <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_LABEL) %}
        <div>
            <p class="large bold center">{$RESPONSE_LABEL}</p>
        </div>
        {% elseIf ($RESPONSE) %}
        <div>
            <p class="large bold center">{$RESPONSE}</p>
        </div>
        {% endif %}
        {% if ($TXN_TYPE) %}
        <div>
            <p class="large bold center">{$TXN_TYPE_LABEL}</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}</label>
            <span class="right">{$MID}</span>
        </div>
        {% endif %}
        {% if ($TID) %}
        <div>
            <label class="left bold">{$TID_LABEL}</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_LABEL}</label>
            <span class="right">{$ENTRY}</span>
        </div>
        {% endif %}
        {% if ($CVM) %}
        <div>
            <label class="left bold">{$CVM_LABEL}</label>
            <span class="right">{$CVM}</span>
        </div>
        {% endif %}
        {% if ($AUTH_CODE) %}
        <div>
            <label class="left bold">{$AUTH_CODE_LABEL}</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>
        {% if ($SWIPE != 1) %}
          {% if ($AID || $TVR || $IAD || $TSI || $ARC) %}
          <div>
              <p class="center bold">{$EMV_DETAILS_LABEL}</p>
          </div>
          {% endif %}
          {% if ($AID) %}
          <div>
              <label class="small left bold">{$AID_LABEL}</label>
              <span class="left">{$AID}</span>
          </div>
          {% endif %}
          {% if ($TVR) %}
          <div>
              <label class="small left bold">{$TVR_LABEL}</label>
              <span class="left">{$TVR}</span>
          </div>
          {% endif %}
          {% if ($IAD) %}
          <div>
              <label class="small left bold">{$IAD_LABEL}</label>
              <span class="left">{$IAD}</span>
          </div>
          {% endif %}
          {% if ($TSI) %}
          <div>
              <label class="small left bold">{$TSI_LABEL}</label>
              <span class="left">{$TSI}</span>
          </div>
          {% endif %}
          {% if ($ARC) %}
          <div>
              <label class="small left bold">{$ARC_LABEL}</label>
              <span class="left">{$ARC}</span>
          </div>
          {% endif %}
          {% if ($AID || $TVR || $IAD || $TSI || $ARC) %}
          <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>
            <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:

  • No labels

Copyright 2018 Handpoint