Skip to content

    Custom templates

    The Custom template functionality is an additional service and allows even more flexibility when designing the payment window templates.

    Introduction

    To be able to use Custom templates functionality, you need to have the correct additional service chosen in your Netaxept agreement. Otherwise the functionality will not be enabled in your account.

    In order to use Custom templates, the Register call's terminalLayout parameter must be set to custom.

    The main difference between regular templates and custom templates is that the tag netaxept:terminal is replaced with a set of individual tags as described below.

    How to use individual tags

    The tags available for customization are listed below. All tags are mandatory, except when explicitly mentioned otherwise.

    Tags are not case sensitive – some letters are capitalized here only for easier reading. Using templateData for passing data to the template with the Register call is also possible.

    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. As a consequence 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;.

    Here is an example of a basic custom template:

    Basic custom template

    <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 formating.
    • light background: set theme:default
    • dark backgrounds: set theme:non-color

    {netaxept:netsLogo theme="non-color" class="" style="width:150px;height:45px;"}

    {netaxept:amount}
    Text
    Transaction amount before fee and rounding, shown with currency symbol.

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

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

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

    {netaxept:totalAmount class="information" id="total_amount_text"}

    {netaxept:currency}
    Text
    Currency for this transaction, for example "EUR", "USD", "NOK" or "GBP".

    {netaxept:currency class="information" id="currency_text"}

    {netaxept:orderDescription}
    Text
    Order description passed through the Register call for the transaction.

    {netaxept:orderdescription class="information" id="order_description_text"}

    {netaxept:orderNumber}
    Text
    Order number passed through the Register call for the transaction.

    {netaxept:ordernumber class="information" id="order_number_text"}

    Card entry fields

    {netaxept:cardNumber}
    Text
    Text box for entering the card number.

    {netaxept:cardnumber class="card_entry" id="card_number_entry"}

    {netaxept:expiryDateMonth}
    Dropdown
    List for selecting month for the card expiry date.

    {netaxept:expirydatemonth class="card_entry" id="month_card_entry"}

    {netaxept:expiryDateYear}
    Dropdown
    List for selecting year for the card expiry date.

    {netaxept:expirydateyear class="card_entry" id="year_card_entry"}

    {netaxept:securityCode}
    Text
    Text box for entering the security code for the card.

    {netaxept:securitycode class="card_entry" id="security_code_entry"}

    Buttons

    {netaxept:payButton}
    Button
    Button to confirm either the purchase and/or the card registration for later purchases. Will have the text "Pay" or "Register" depending on the type of use.

    {netaxept:paybutton class="navigation_button" id="pay_button"}

    {netaxept:cancelButton}
    Button
    Button to either cancel the current purchase or to register a card. The consumer would be taken back to the merchant site.

    {netaxept:cancelbutton class="navigation_button" id="cancel_button"}

    Error handling

    {netaxept:errorMessage}
    HTML DIV-tag
    Displays the error message, if any.

    {netaxept:errormessage class="error_handling" id="error_message"}

    {netaxept:errorCode}
    HTML DIV-tag
    Displays the error code, if any.

    {netaxept:errorcode class="error_handling" id="error_code"}

    {netaxept:cardNumberErrorMessage}
    Optional tag. HTML DIV-tag
    Holds any error messages specific to the card number. If not specified, these messages are shown in the tag {netaxept:errorMessage}.

    {netaxept:cardnumbererrormessage class="error_handling" id="card_number_error"}

    {netaxept:expiryErrorMessage}
    Optional tag. HTML DIV-tag
    Holds any error messages specific to the expiry date. If not specified, these messages are shown in the tag {netaxept:errorMessage}.

    {netaxept:expiryerrormessage class=" error_handling" id="expiry_error"}

    {netaxept:secureCodeErrorMessage}
    Optional tag. HTML DIV-tag
    Holds any error messages specific to the security code. If not specified, these messages are shown in the tag {netaxept:errorMessage /}.

    {netaxept:securecodeerrormessage class=" error_handling" id="security_code_error"}

    Easy payment and Recurring Payment

    Custom templates also work with Easy payments and Recurring payments. The API calls remain exactly as with regular templates, the only changes are some HTML adjustments.

    The specific HTML for initial and subsequent transactions must appear in specifically named <div> tags in the template. The three <div> IDs below are all mutually exclusive, so only one of them will be displayed at any given time.

    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.

    Initial transaction - sample

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

    Initial transaction should appear 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 <div>s.

    Initial card registration - sample

    <div id="UpdateStoredPayment">
      {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".

    Subsequent transaction - sample

    <div id="EasyPayment">
      {netaxept:maskedPan /}
      {netaxept:issuerLogo /}
    </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".

    Easy payment specific tags

    Some of the available tags are Easy payment specific:

    {netaxept:maskedPan}
    Text
    Shows a truncated card number (first 6 and last 4 digits) to let the customer see which card they are using. For example: 492500xxxxx0004. The tag is optional but is required if you use Easy payment.

    {netaxept:maskedpan class="ep_information" id="masked_pan"}

    {netaxept:issuerLogo}
    Image
    Shows 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.

    {netaxept:issuerlogo class="ep_information" id="issuer_logo"}

    Complete sample of a custom template

    Below is 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.

    Complete custom template - sample

    <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"/}
            {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"/}
            {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>
                {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>