Search:

tqExpert Help

Home

Welcome to tqTag Web Suite

Introduction to tqTag Web Suite

What's New in tqTag Web Suite 1.3?

What Was New in tqTag Web Suite 1.2?

Website Creation Flow

Management of tqAdmins

Activate Website

tqTag Procedures

tqOption General Procedures

Sample Templates and Pages

Global Settings in Site Manager

Category and Content Management in Site Manager

Picture Display in Site Manager

Customer Management in Site Manager

eCommerce in Site Manager

Module Reference

tqTag Reference

tqOption Reference

General-Variable Reference

tqFunction Reference

Help > tqExpert Help > Sample Templates and Pages > eCommerce Templates and Pages > Payment-Details Page

Payment-Details Page

The payment-details page enables an online customer to specify a shipping option and credit card details.
This topic contains the following:

A screen capture of the relevant part of an actual payment-details page
A screen capture of of such a page displaying a transaction-problem message
The inner template on which the page is based
Selections from the Webpage sources generated by tqTag Web Suite for the relevant parts of these pages

Payment-Details Screen Capture

The labels on the screen-capture indicate where the following tqTags are implemented:

shoppingCartInfo — holds general shopping cart information, for example, number of items, number of rows, user currency, and total item amount
shipping — enables tqAdmins to specify product shipping options, such as carriers, user currencies, and shipping prices. E-customers select the options that they need.

To access this page online, do the following:

Go to http://israelmint.com/?section=185 (as shown in Products Page) and select one or more products.
Continue as shown in Shopping Cart and then click Proceed to Checkout.
As shown in User ID Page, do one of the following:
- If you already have a user ID, type the user ID and password, and then click enter.
- Enter the information under New client registration, and then click submit.
As shown in Delivery-Address Page, do one of the following:
- For shipping to the customer address displayed, click submit.
- For shipping to a different address, enter details under Shipping Information and then click submit.

Inner Template #465

The template for this payment-details page is not accessible through the online Website.

<tqtag type="alternative" name="alternative0">
<script type="text/javascript">location.href='@linkToStep2@'</script>
</tqtag>
<form method="post" action="@linkToStep5@" onsubmit="return checkRegisterForm();" id="step4biling">
<input type="hidden" name="saveToSession" value="cardDetails" />
<tqtag type="shoppingCartInfo" alternativeTag="alternative0" alternativeCondition="isNotLoggedIn">
<input type="hidden" name="supplier" value="israelmint">
<input type="hidden" name="currency" value="1">
<input type="hidden" name="sum" id="sum" value="@shoppingCartTotal@">
<input name="fNameShipping" value="@shippingInfofNameShipping@" type="hidden" />
<input name="lNameShipping" value="@shippingInfolNameShipping@" type="hidden" />
<input name="addressShipping" value="@shippingInfoaddressShipping@" type="hidden" />
<input name="cityShipping" value="@shippingInfocityShipping@" type="hidden" />
<input name="postalShipping" value="@shippingInfopostalShipping@" type="hidden" />
<input name="emailShipping" value="@shippingInfoemailShipping@" type="hidden" />
<input name="phoneShipping" value="@shippingInfophoneShipping@" type="hidden" />
<input name="faxShipping" value="@shippingInfofaxShipping@" type="hidden" />
<input name="fName" id="fName" value="@shippingInfofName@" type="hidden" />
<input name="lName" id="lName" value="@shippingInfolName@" type="hidden" />
<input name="address" id="address" value="@shippingInfoaddress@" type="hidden" />
<input name="city" id="city" value="@shippingInfocity@" type="hidden" />
<input name="postalCode" id="postalCode" value="@shippingInfopostalCode@" type="hidden" />
<input name="email" id="email" value="@shippingInfoemail@" type="hidden" />
<input name="phone" id="phone" value="@shippingInfophone@" type="hidden" />
<input name="fax" value="@shippingInfofax@" type="hidden" />
<tqtag type="shoppingCartItems" alternativeTag="emptyShoppingCart2" alternativeCondition="isShoppingCartEmpty">
<input type="hidden" name="basket-catalog @catalogID@" value="@productName@ Price @ourPrice@ Quantity Total Price @totalPriceInUserCurrency@" />
</tqtag>
<div class="Content">
<div class="ShoppingCart">
  <div class="Process">
   <div class="Checkout">Check out process</div>
   <ul class="Levels">
    <li class="Level1"><a href="@linkToStep1@">shopping cart</a></li>
    <li class="Level2"><a href="@linkToStep2@">user identification</a></li>
    <li class="Level3"><a href="@linkToStep3@">delivery address</a></li>
    <li class="Level4"><a class="selected" href="@linkToStep4@">means of payment</a></li>
   </ul>
  </div>
  <tqtag type="tranzilaResponseMessage"><div id="errorDiv" align="center" style="color:Red;">We are sorry, but the transaction could not be completed. <br />
  Error message received: <b>@title@</b></div></tqtag>

  <tqtag type="shoppingCartInfo" alternativeTag="alternative0" alternativeCondition="isNotLoggedIn">
   <div class="totalRed" >Total of @shoppingCartNumOfItems@<tqoption type="if" check="@shoppingCartNumOfItems@" against="1" operator="=" alternative0=" Items: ">{ ! Item: !}</tqoption> <b>@userCurrency@ @shoppingCartTotal@</b></div><br/>
  </tqtag>
  <tqtag type="shipping" name="shipping0" shippingCountry="201">
   <tqoption type="head" alternative0="">{ !Please Choose shipping method: <select name="shippingMethod" id="shippingMethod">!}0</tqoption>
   <option value="@id@">@carrierName@ - @userCurrency@ @shippingPriceInUserCurrency@</option>
   <tqoption type="tail" alternative0="">{ !</select>!}0</tqoption>
  </tqtag>
  <div class="processing" id="processing" style="display:none"></div>
  <div class="Payment" id="Payment">
   <h1>Credit card information</h1>
   <div class="Left">
    <form class="designed">
     <div class="FormRow">
      <div class="FieldName">Card type</div>
      <div class="FieldControl"><select><option value="">VISA</option><option value="">MasterCard</option><option value="">Amex</option></select></div>
     </div>
     <div class="FormRow">
      <div class="FieldName">Name on card</div>
      <div class="FieldControl"><input type="text" name="cardOwner" id="cardOwner" value="{ !@cardDetailscardOwner@!}" /></div>
     </div>
     <div class="FormRow">
      <div class="FieldName">Card number</div>
      <div class="FieldControl"><input type="text" name="cardNumber" id="cardNumber" value="{ !@cardDetailscardNumber@!}" /></div>
     </div>      <div class="FormRow">
      <div class="FieldName">Card security code (CVV)</div>
      <div class="FieldControl"><img class="question" src="images/question.gif" alt="" onmouseover="showByID('divQ');" onmouseout="hideByID('divQ')" />
      <input style="width:100px;" type="text" name="cardCvv" id="cardCvv" value="{ !@cardDetailscardCvv@!}" /></div>
      <div style="position:absolute;width:width:261;height:299;top:20;display:none;" id="divQ"><img src="images/cvv.gif" alt="" /></div>
     </div>     <div class="FormRow">
      <div class="FieldName">Expiry date</div>
      <div class="FieldControl ExpiryDate">
       <span>Month</span> <select name="expireMonth">
       <option <tqoption type="if" check="01" against="@cardDetailsexpireMonth@" alternative0="">{ ! selected="selected"!}0</tqoption>>01</option>
       <option <tqoption type="if" check="02" against="@cardDetailsexpireMonth@" alternative0="">{ ! selected="selected"!}0</tqoption>>02</option>
       <option <tqoption type="if" check="03" against="@cardDetailsexpireMonth@" alternative0="">{ ! selected="selected"!}0</tqoption>>03</option>
       <option <tqoption type="if" check="04" against="@cardDetailsexpireMonth@" alternative0="">{ ! selected="selected"!}0</tqoption>>04</option>
       <option <tqoption type="if" check="05" against="@cardDetailsexpireMonth@" alternative0="">{ ! selected="selected"!}0</tqoption>>05</option>
       <option <tqoption type="if" check="06" against="@cardDetailsexpireMonth@" alternative0="">{ ! selected="selected"!}0</tqoption>>06</option>
       <option <tqoption type="if" check="07" against="@cardDetailsexpireMonth@" alternative0="">{ ! selected="selected"!}0</tqoption>>07</option>
       <option <tqoption type="if" check="08" against="@cardDetailsexpireMonth@" alternative0="">{ ! selected="selected"!}0</tqoption>>08</option>
       <option <tqoption type="if" check="09" against="@cardDetailsexpireMonth@" alternative0="">{ ! selected="selected"!}0</tqoption>>09</option>
       <option <tqoption type="if" check="10" against="@cardDetailsexpireMonth@" alternative0="">{ ! selected="selected"!}0</tqoption>>10</option>
       <option <tqoption type="if" check="11" against="@cardDetailsexpireMonth@" alternative0="">{ ! selected="selected"!}0</tqoption>>11</option>
       <option <tqoption type="if" check="12" against="@cardDetailsexpireMonth@" alternative0="">{ ! selected="selected"!}0</tqoption>>12</option>
       </select>
         <span>Year</span>
       <select name="expireYear">
        <option value="09" <tqoption type="if" check="09" against="@cardDetailsexpireYear@" alternative0="">{ ! selected="selected"!}0</tqoption>>2009</option>
        <option value="10" <tqoption type="if" check="10" against="@cardDetailsexpireYear@" alternative0="">{ ! selected="selected"!}0</tqoption>>2010</option>
        <option value="11" <tqoption type="if" check="11" against="@cardDetailsexpireYear@" alternative0="">{ ! selected="selected"!}0</tqoption>>2011</option>
        <option value="12" <tqoption type="if" check="12" against="@cardDetailsexpireYear@" alternative0="">{ ! selected="selected"!}0</tqoption>>2012</option>
        <option value="13" <tqoption type="if" check="13" against="@cardDetailsexpireYear@" alternative0="">{ ! selected="selected"!}0</tqoption>>2013</option>
        <option value="14" <tqoption type="if" check="14" against="@cardDetailsexpireYear@" alternative0="">{ ! selected="selected"!}0</tqoption>>2014</option>
        <option value="15" <tqoption type="if" check="15" against="@cardDetailsexpireYear@" alternative0="">{ ! selected="selected"!}0</tqoption>>2015</option>
        <option value="16" <tqoption type="if" check="16" against="@cardDetailsexpireYear@" alternative0="">{ ! selected="selected"!}0</tqoption>>2016</option>
        <option value="17" <tqoption type="if" check="17" against="@cardDetailsexpireYear@" alternative0="">{ ! selected="selected"!}0</tqoption>>2017</option>
       </select>
      </div>
     </div>
   </div>
   <div class="Right CreditCards">
    <img src="images/creditcards/visa.gif" class="visa" alt="" />
    <img src="images/creditcards/master-card.gif" alt="" />
    <img src="images/creditcards/american-express.gif" class="americanexpress" alt="" />
    <img src="images/creditcards/diners.gif" alt="" />
   </div>
  </div>
  <div class="PaymentButtonsCont">
   <div class="PaymentButtons"id="PaymentButtons">
    <div class="Button">
     <div class="L"></div>
     <div class="C red"><button type="submit" class="red" style="background:transparent;border:0;width:130px;">Place Order</button></div>
     <div class="R"></div>
    </div>
   </div>
  </div>
</div>
</div>
</tqtag>
</form>
<script type="text/javascript">
function hidePaymentDivs(){
if (divObj = document.getElementById('errorDiv')){
  document.getElementById('errorDiv').style.display = "none";
}
document.getElementById('Payment').style.display = "none";
document.getElementById('PaymentButtons').style.display = "none";
document.getElementById('processing').style.display = "inline";
document.getElementById('processing').style.textAlign = "center";
document.getElementById('processing').innerHTML = "<br /><H1>Processing</H1><H1>Please Wait....</H1>";
}function checkRegisterForm() {
var cardOwnerOkay = 0;
var cardNumberOkay = 0;
var shippingOk = 0;
if (checkInputData("cardOwner","first name","fNameFail",5,"errorField","")===true) cardOwnerOkay=1; else cardOwnerOkay=0;
if (checkInputData("cardNumber","last name","lNameFail",12,"errorField","")===true) cardNumberOkay=1; else cardNumberOkay=0;
if (!getFieldValue('shippingMethod')) {
  alert ('You have to choose shipping method in order to continue');
  return false;
} else {
  shippingOk=1;
}

if ((cardOwnerOkay == 1) && (cardNumberOkay == 1) && (shippingOk==1)) {
  hidePaymentDivs();
  submitForm('step4biling');
  return true;
} else {
  alert ('some mandatory fields are empty. please correct the details and try again');
  return false;
}
}
</script>

Payment-Details Source Code

To access the complete source code for this page, do the following:

Perform the instructions under Payment-Details Screen Capture above.
Use your browser commands to view the page source.

<div class="totalRed" >Total of 2 Items: <b>$118.00</b></div><br/>

Please Choose shipping method:
<select name="shippingMethod" id="shippingMethod">
  <option value="8">Registerd Airmail - $24.99</option>
  <option value="12">Express shipping EMS - $44.79</option>
</select>
<div class="processing" id="processing" style="display:none"></div>
<div class="Payment" id="Payment">
<h1>Credit card information</h1>
<div class="Left">
  <form class="designed">
   <div class="FormRow">
    <div class="FieldName">Card type</div>
    <div class="FieldControl"><select><option value="">VISA</option><option value="">MasterCard</option><option value="">Amex</option></select></div>
   </div>
   <div class="FormRow">
    <div class="FieldName">Name on card</div>
    <div class="FieldControl"><input type="text" name="cardOwner" id="cardOwner" value="" /></div>
   </div>
   <div class="FormRow">
    <div class="FieldName">Card number</div>
    <div class="FieldControl"><input type="text" name="cardNumber" id="cardNumber" value="" /></div>
   </div>
   <div class="FormRow">
    <div class="FieldName">Card security code (CVV)</div>
    <div class="FieldControl"><img class="question" src="https://israelmint-com.ezadmin.eu/templates/t465/images/question.gif" alt="" onmouseover="showByID('divQ');" onmouseout="hideByID('divQ')" />
    <input style="width:100px;" type="text" name="cardCvv" id="cardCvv" value="" /></div>
    <div style="position:absolute;width:width:261;height:299;top:20;display:none;" id="divQ"><img src="https://israelmint-com.ezadmin.eu/templates/t465/images/cvv.gif" alt="" /></div>
   </div>
   <div class="FormRow">
    <div class="FieldName">Expiry date</div>
    <div class="FieldControl ExpiryDate">
     <span>Month</span>
     <select name="expireMonth">
      <option >01</option>
      <option >02</option>
      <option >03</option>
      <option >04</option>
      <option >05</option>
      <option >06</option>
      <option >07</option>
      <option >08</option>
      <option >09</option>
      <option >10</option>
      <option >11</option>
      <option >12</option>
     </select>
       <span>Year</span>
     <select name="expireYear">
      <option value="09" >2009</option>
      <option value="10" >2010</option>
      <option value="11" >2011</option>
      <option value="12" >2012</option>
      <option value="13" >2013</option>
      <option value="14" >2014</option>
      <option value="15" >2015</option>
      <option value="16" >2016</option>
      <option value="17" >2017</option>
     </select>
    </div>
   </div>
  </div>
<div class="Right CreditCards">
  <img src="https://israelmint-com.ezadmin.eu/templates/t465/images/creditcards/visa.gif" class="visa" alt="" />
  <img src="https://israelmint-com.ezadmin.eu/templates/t465/images/creditcards/master-card.gif" alt="" />
  <img src="https://israelmint-com.ezadmin.eu/templates/t465/images/creditcards/american-express.gif" class="americanexpress" alt="" />
  <img src="https://israelmint-com.ezadmin.eu/templates/t465/images/creditcards/diners.gif" alt="" />
</div>
</div>
<div class="PaymentButtonsCont">
<div class="PaymentButtons"id="PaymentButtons">
  <div class="Button">
   <div class="L"></div>
   <div class="C red"><button type="submit" class="red" style="background:transparent;border:0;width:130px;">Place Order</button></div>
   <div class="R"></div>
  </div>
</div>
</div>
</div>
</div>
</form>

Transaction-Problem Screen Capture

The label on the screen-capture indicates where the tranzilaResponseMessage tqTag is implemented. Online, you access this version of the Payment-Details page by entering legal but incorrect credit card information.

Confirmation Problem screen capture

Transaction-Problem Source Code

To access the complete source code for this page, do the following:

Perform the instructions under Transaction-Problem Screen Capture above.
Use your browser commands to view the page source.

<div id="errorDiv" align="center" style="color:Red;">We are sorry, but the transaction could not be completed. <br />
Error message received: <b>Refusal.</b></div>

Payment-Details Page

Payment-Details Screen Capture

Inner Template #465

Payment-Details Source Code

Transaction-Problem Screen Capture

Transaction-Problem Source Code

Related Topics

User Notes

Topic: Payment-Details Page