Terminal design templates

 

With Netaxept Template system, you can retain the look and feel of your website throughout the payment process, even though the actual payment window is hosted by Netaxept. Template system is based on custom tags embedded in normal HTML, with the ability to style templates through inline styling (for example: {netaxept:terminal style="color:red" /}) and uploaded or linked CSS. In addition to the HTML and style attributes, you can change the elements around the payment window (such as background color and image) and within the payment window (such as background color, text color and terminal border).

Templates and CSS are added, maintained and previewed in Netaxept Admin's Options => Terminal => Terminal design tab. The actual HTML your template will consists of is also entered there, together with special tags that decide where the payment window is to be placed, and where the text and images are placed on transaction basis. Read more about template design from Netaxept Admin User Guide >

The design can be as light or complex as you want. Because of this Netaxept Customer Support doesn't provide support on designing and styling of HTML based templates. The merchant is expected to handle this area by themselves, while Netaxept Customer Support of course supports with requirements about the specific tags for templates.

 

Choosing the right template and tags per transaction

If you only have one template, this template can be activated in Netaxept Admin. However, if you have several templates (for example seasonal templates or different templates for special transactions), you can specify which template to use and information tags to be set per transaction by adding the following parameters to the Register call:

  • terminalDesign: Name of the terminal template you have created in Netaxept Admin and that will be used for the payment. With this parameter you can control the look of the payment window on a transaction basis. If this parameter is sent in, it will overrule any template that has been marked as active in Netaxept Admin and look up the correct template from the template names in the list of available templates. If the template cannot be looked up by name from Netaxept Admin, the default template will be used.
  • templateData: Template data is an array of key/value pairs and contains all the tags and their values that will replace the special HTML tags inside the template. This data is per transaction and will be merged into the active template. Several tags can be placed within curly brackets and different tags and their values are separated by a colon. If the template contains tags on the form {keyname /}, the region will be replaced by the value associated with the key "keyname". For example to set the 2 tags MerchantTime and MerchantTemperature and their values, templateData should be set as follows. These 2 tags also need to be part of the HTML template design in Netaxept Admin. In its simplest form the HTML written in Netaxept Admin's Template design section could be as follows.  
templateData:
{"MerchantTime":"13:26:59","MerchantTemperature":"+3C"}.

HTML in Template design section:
<p>Time is: {MerchantTime /}. Temprature is: {MerchantTemprature /}.</p>
<p>{netaxept:terminal /}</p>

The above HTML also include the 3rd tag, {netaxept:terminal /}, which is the tag showing the actual Netaxept payment window, allowing you to freely position the payment window to best suite your website’s design. Also, observe the extra space between the tag name and the slash (/). The HTML input is following JavaScript Object Notation (JSON).

 

Template helpers

Image upload

Templates need their images, and there are two options for accomplishing this. You can use the image upload functionality in Netaxept Admin if your need for images is quite limited (there are some restrictions on the upload). Doing this ensures that the images are delivered through an https-connection, avoiding browser warnings to the end-user about mixed content. The alternative is to link to images uploaded at a server of your choice. The advantage of this solution is that you are free to choose the format, dimensions and file sizes of the images, while the disadvantage is that you are responsible yourself for ensuring the https-delivery.

CSS

You are able to customize the formatting of your templates through CSS. In Netaxept Admin you can define a CSS file either through uploading it from a local stylesheet file or by linking it from an external source. The latter option requires the file to be accessible from a HTTPS request. The CSS can be defined either globally, for all templates, or for a specific template. Template-specific styling of course overrides global styling. CSS requires use of regular templates, as opposed to the mobile templates.

Meta tags

You can add meta tags which can be used to inform the browser of various extra information. A popular example is the ability to override the character set used in the template, telling the browser how to interpret special characters. Meta tags can be added and maintained directly below the template editor in Netaxept Admin. You have to add the entire meta tag you want to have included.

For example:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 

Mini payment window

For maximum control of the design of the payment window, Netaxept has a mini payment window. This window is optimized to be as small as possible and requires some adjustments if it is going to be used.

Please note that the mini payment window is supported only for card payments. If you are looking to implement other payment methods as well, we suggest a separate step for selecting payment method and implementing a path using mini payment window for card payments, and a separate path for other payment methods using a template version of the regular payment window.

The terminalLayout parameter must be set to "mini" to activate the mini payment window mode. Besides this, a template should be specified either through Netaxept Admin or by specifying the template name in terminalDesign parameter in the Register call.

Since the mini payment window is optimized for staying as small as possible, error messages are not displayed inside the mini payment window. Instead, the error message can be placed anywhere else on the webpage by using the specific error tag {netaxept:errorMessage /}. When using mini payment window, this tag is mandatory. Expanding the previous example, the minimal example would be as follows. Both the two special tags, {netaxept:terminal /} and {netaxept:errorMessage /}, need to be present in a template design for the mini payment window.

<p>Time is: {merchantTime /}. Temprature is: {merchantTemprature /}.</p>
<p>{netaxept:terminal /}</p>
<p>{netaxept:errorMessage /}</p>

For mini payment windows there is no transaction data displayed in the payment window. Therefore, we recommend passing in templateData tag about the transaction, such as the transaction amount and a description of the order, if applicable.

 

Custom Templates

The Custom template functionality is an additional service and intended for merchants who need even more flexibility when designing their payment window templates. To be able to utilize Custom templates, you need to have the correct additional service chosen in your Netaxept agreement based on which the functionality will be enabled for your merchant. Also, to use Custom templates, the terminalLayout parameter must be set to "custom" to activate the Custom template specific tags. 

Unless otherwise stated, what have been stated above regarding the regular templates, the same applies when using custom templates.

Tags used for Custom templates

The main difference between regular templates and custom templates is that the tag {netaxept:terminal /} is replaced with a set of individual tags described below. All tags are mandatory, except when explicitly mentioned for the tag. Tags are not case sensitive – some letters are capitalized here only for easier reading. Using templateData for passing data to the template in the Register call is also available.

Please note that the requirements for tags might change; optional tags may become mandatory, or vice versa, and new mandatory tags can be introduced. These changes would be enforced by the template editor in Netaxept Admin, which then means that you would need to update your template with these tags before changing other elements in your template.

All of these tags support both class and style-tags, enabling both inline styling and styling through CSS. If you wish to hide any of the information, for example order number, this can be done by adding style="display: none;"

An example of a basic custom template is:

<p>{netaxept:netsLogo /}</p>
<p>{netaxept:amount /}</p>
<p>{netaxept:currency /}</p>
<p>{netaxept:orderDescription /}</p>
<p>{netaxept:orderNumber /}</p>
<p>{netaxept:cardNumber /}</p>
<p>{netaxept:expiryDateMonth /}</p>
<p>{netaxept:expiryDateYear /}</p>
<p>{netaxept:securityCode /}</p>
<p>{netaxept:payButton /}</p>
<p>{netaxept:cancelButton /}</p>
<p>{netaxept:errorCode /}</p>
<p>{netaxept:errorMessage /}</p>

 

Information tags

  • {netaxept:netsLogo /}
    • Image – Nets logo that is unformatted and shown at 500 pixels wide and 165 pixels height. This can be altered using the style css-attribute, with height and width formatting. Comes in two themes, which you can set using the theme attributes: 1) color [default]: Use this for light backgrounds, 2) non-color: Use this for dark backgrounds.
    • Example: {netaxept:netsLogo theme="non-color" class="" style="width:150px;height:45px;" /}
  • {netaxept:amount /}
    • Text – Transaction amount before fee and rounding, shown with currency symbol.
    • Example: {netaxept:amount class="information" id="amount_text" /}
  • {netaxept:fee /}
    • Text – Fee based on either what is configured in the Register call or set in Netaxept Admin. If various fees are set based on card, this field would update itself based on the entered card number. Optional, but needed if fees are applied.
    • Example: {netaxept:fee class="information" id="fee_text" /}
  • {netaxept:rounding /}
    • Text – Rounding if set up either via API or in Netaxept Admin. Updates itself based on the same criteria as fee. Optional, but needed if rounding is applied.
    • Example: {netaxept:rounding class="information" id="rounding_text" /}
  • {netaxept:totalAmount /}
    • Text – The sum of the amount, fee and rounding. Updates itself based on the same criteria as fee. Optional, but should be included if using either fee or rounding.
    • Example: {netaxept:totalAmount class="information" id="total_amount_text" /}
  • {netaxept:currency /}
    • Text – Currency for this transaction, for example "EUR", "USD", "NOK" or "GBP".
    • Example: {netaxept:currency class="information" id="currency_text" /}
  • {netaxept:orderDescription /}
    • Text – Order description passed through the Register call for the transaction.
    • Example: {netaxept:orderdescription class="information" id="order_description_text" /}
  • {netaxept:orderNumber /}
    • Text – Order number passed through the Register call for the transaction.
    • Example: {netaxept:ordernumber class="information" id="order_number_text" /}

Card entry fields

  • {netaxept:cardNumber /}
    • Text box for entering the card number.
    • Example: {netaxept:cardnumber class="card_entry" id="card_number_entry" /}
  • {netaxept:expiryDateMonth /}
    • Dropdown list for selecting month for the card expiry date.
    • Example: {netaxept:expirydatemonth class="card_entry" id="month_card_entry" /}
  • {netaxept:expiryDateYear /}
    • Dropdown list for selecting year for the card expiry date.
    • Example: {netaxept:expirydateyear class="card_entry" id="year_card_entry" /}
  • {netaxept:securityCode /}
    • Text box for entering the security code for the card.
    • Example: {netaxept:securitycode class="card_entry" id="security_code_entry" /}

Buttons

  • {netaxept:payButton /}
    • Button for confirming either the purchase and/or the card registration for later purchases. Will have the text "Pay" or "Register" depending on the type of use.
    • Example: {netaxept:paybutton class="navigation_button" id="pay_button" /}
  • {netaxept:cancelButton /}
    • Button for cancelling the current purchase or card registration, and the consumer would be taken back to the merchant site.
    • Example: {netaxept:cancelbutton class="navigation_button" id="cancel_button" /}

Error handling

  • {netaxept:errorMessage /}
    • HTML DIV-tag displaying the error message, if any.
    • Example: {netaxept:errormessage class="error_handling" id="error_message" /}
  • {netaxept:errorCode /}
    • HTML DIV-tag displaying the error code, if any.
    • Example: {netaxept:errorcode class="error_handling" id="error_code" /}
  • {netaxept:cardNumberErrorMessage /}
    • Optional tag. HTML DIV-tag holding any error messages specific to the card number. If not specified, these messages are shown in the tag {netaxept:errorMessage /}.
    • Example: {netaxept:cardnumbererrormessage class="error_handling" id="card_number_error" /}
  • {netaxept:expiryErrorMessage /}
    • Optional tag. HTML DIV-tag holding any error messages specific to the expiry date. If not specified, these messages are shown in the tag {netaxept:errorMessage /}.
    • Example: {netaxept:expiryerrormessage class=" error_handling" id="expiry_error" /}
  • {netaxept:secureCodeErrorMessage /}
    • Optional tag. HTML DIV-tag holding any error messages specific to the security code. If not specified, these messages are shown in the tag {netaxept:errorMessage /}.
    • Example: {netaxept:securecodeerrormessage class=" error_handling" id="security_code_error" /}

Easy payment specific tags

  • {netaxept:maskedPan /}
    • Text – Showing a truncated card number (first 6 and last 4 digits) to let the customer see which card they are using. For example "492500******0004". The tag is optional but is required if you use Easy payment.
    • Example: {netaxept:maskedpan class="ep_information" id="masked_pan" /}
  • {netaxept:issuerLogo/}
    • Image – Showing the logo of the stored card, with size of 45 pixels wide and 27 pixels high. The tag is optional but is required if you use Easy payment.
    • Example: {netaxept:issuerlogo class="ep_information" id="issuer_logo" /}

Easy Payment and Recurring Payment

It's also possible to use Easy payment and Recurring payment with the Custom template. The API calls would be used exactly as with regular templates, the only changes are some adjustments in the HTML you would need to add to the template. The specific HTML for initial and subsequent transactions should be contained within specifically named <div> tags in the template. The three DIV IDs described below are all mutually exclusive, meaning that only one of them will be displayed at any given time.

Initial transaction should be contained within a DIV with the ID "CardPayment" (case sensitive). Note the lack of the security code field which needs to be placed outside of the specific DIVs.

<div id="CardPayment">
{netaxept:orderNumber /}
{netaxept:amount /}
{netaxept:cardNumber /}
{netaxept:expiryDateMonth /}
{netaxept:expiryDateYear /}
</div>

Initial card registration, when registering a card for later Easy or Recurring payments without performing a purchase at the same time (the Register call contains updateStoredPaymentInfo=true), should be contained within a DIV with the ID "UpdateStoredPayment".

<div id="UpdateStoredPayment">
{netaxept:cardNumber /}
{netaxept:expiryDateMonth /}
{netaxept:expiryDateYear /}
</div>

Subsequent transaction in the payment window is only applicable for Easy payment. To show the information required for the second transaction onward, you should include a DIV with the ID "EasyPayment".

<div id="EasyPayment">
{netaxept:maskedPan /}
{netaxept:issuerLogo /}
</div>

Regarding security code, the {netaxept:securityCode /} tag should not be within any of these tags, but handled outside of these DIVs, as if the template was not going to be used for registering tokens for Easy payment or Recurring payment.

An example of a complete custom template which relies on a linked CSS file. It accommodates regular payments, card registration for Easy or Recurring payment and subsequent transactions for Easy payment.

<h1>Test store</h1>
<div class="order_info">
                {netaxept:netsLogo theme="non-color" style="width:150px;height:45px;"/}
		<span class="order_info_row_label">Order Description:</span>
                <div id="order_description">{netaxept:orderDescription /}</div>
</div>
<div class="card_details" id="CardPayment">
                <span class="order_info_row_label">This template section is used for payments</span>
                <div class="card_details">
                <div class="card_details_row">
		<span class="order_info_row_label">Ordernumber:</span> {netaxept:orderNumber /}
                </div>
                <div class="card_details_row">
                <span class="order_info_row_label">Amount:</span> {netaxept:amount /}
                </div>
                <div class="card_details_row">
                <span class="order_info_row_label">Currency:</span> {netaxept:currency /}
                </div>
                <div class="card_details_row">
                <span class="order_info_row_label">Fee:</span> {netaxept:fee /}
                </div>
                <div class="card_details_row">
                <span class="order_info_row_label">Rounding:</span> {netaxept:rounding /}
                </div>
                <div class="card_details_row">
                <span class="order_info_row_label">Total amount:</span> {netaxept:totalAmount /}
		</div>
                </div>
                <div class="card_details_head">Card information</div>
                <div class="card_details_row">
                                <span class="card_detaild_row_label">Card Number:</span>
                                {netaxept:cardNumber class="sample" /}
                                {netaxept:cardNumberErrorMessage style="color: red;" /}
                </div>
                <div class="card_details_row">
                                <span class="card_detaild_row_label">Validity:</span>
                                {netaxept:expiryDateMonth class="sample"/}&nbsp;{netaxept:expiryDateYear class="sample" /}
                                {netaxept:expiryErrorMessage style="color: red;"/}
                </div>
</div>
<div class="card_details" id="UpdateStoredPayment">
                <span class="order_info_row_label">This template section is used to register the card without payment</span>
                <div class="card_details_row">
                                <span class="card_detaild_row_label">Card number:</span>
                                {netaxept:cardNumber class="sample" /}
                                {netaxept:cardNumberErrorMessage style="color: red;" /}
                </div>
                <div class="card_details_row">
                                <span class="card_detaild_row_label">Validity:</span>
                                {netaxept:expiryDateMonth class="sample"/}&nbsp;
				{netaxept:expiryDateYear class="sample" /}
                                {netaxept:expiryErrorMessage style="color: red;"/}
                </div>
</div>
<div id="EasyPayment">
                <div class="card_details_row">
                <div>
		<span class="card_detaild_row_label">Masked Pan</span>&nbsp;
                                {netaxept:maskedPan /}
				{netaxept:issuerLogo /}
                </div>
                </div>
</div>
<div class="card_details_row">
                <span class="card_detaild_row_label">CVV2/CVC2/CID:</span>
                {netaxept:securityCode  class="sample" /}
                {netaxept:secureCodeErrorMessage style="color: red;" /}
</div>
<div>
<div class="footer_block">
                                {netaxept:cancelButton /}
				{netaxept:payButton /}
                </div>
<div class="error_block">
                                {netaxept:errorMessage /}{netaxept:errorCode /}
</div>
</div>