Search:
tqExpert Help
print
|
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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:
  1. Go to http://israelmint.com/?section=185 (as shown in Products Page) and select one or more products.
  2. Continue as shown in Shopping Cart and then click Proceed to Checkout.
  3. 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.
  4. 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

Payment screen capture

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>₪ @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@ - ₪ @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>
       &nbsp;&nbsp;<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:
  1. Perform the instructions under Payment-Details Screen Capture above.
  2. 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>
     &nbsp;&nbsp;<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:
  1. Perform the instructions under Transaction-Problem Screen Capture above.
  2. 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>   

User Notes

  Add Note

Topic: Payment-Details Page