Source

Mobile POS Front End / build / web / paymentForm.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title id="systemName">Mobile POS</title>

        <link href="css/bootstrap.css" rel="stylesheet">

    </head>

    <body>
        <div class="container">
            <img id ="mainBanner" src="img/banner.png" />
        </div>

        <div class="container">
            <div class="row">
                <div class="span12  " id="div_productExecuteSummary">
                    <Legend> Summary of order </Legend>
                    <table class="table table-bordered" id="table_productExecuteSummary">
                        <thead>
                            <tr>
                                <th >Item(Qty)</th>
                                <th>Total Price</th>
                            </tr>
                        </thead>

                        <tbody>
                        </tbody>
                    </table>

                    <h5 id="TotalPrice"> </h5>
                </div>
            </div>
            <p/>
            <div class="row">
                <div class="span12" id="customerPaymentDetail">  
                    <Legend> Customer payment detail </Legend>

                    <div class="row">
                        <form class="form-horizontal">
                            <div class="control-group" id="creditCardNoGroup">
                                <label class="control-label" for="textCreditCard" >Credit Card No </label>

                                <div class="controls">
                                    <input class="input-large"  type="text"  id="textCreditCard"> <br>
                                </div>
                            </div>
                            <div class="control-group" id="creditCw2Group">
                                <label class="control-label" for="textCW2" >CW2/CVC2 </label>

                                <div class="controls">
                                    <input class="input-large" type="text"  id="textCW2"> <br>
                                </div>
                            </div>
                            <div class="control-group" id="creditCardExpiryGroup">
                                <label class="control-label" for="textCreditCardExpiry">Credit Card Expiry Date (MMYY) </label>

                                <div class="controls">
                                    <input class="input-large" type="text"  id="textCreditCardExpiry"> <br>
                                </div>
                            </div>
                        </form>

                    </div>

                    <div class="row">

                        <button class="btn   btn-primary" type="button" id="btnBackProductSearch"> < Back to product search</button>
                        <button class="btn offset1  btn-primary" id="btnFinish" type="button">Submit payment detail!</button>

                    </div> <!-- end of col for customer payment details -->

                    <div class="row">
                        <p id="errorMessage" class="text-error offset4"> </p>
                    </div>
                </div>

            </div>

            <script src="js/jquery-1.8.2.min.js"></script>
            <script src="js/bootstrap.min.js"></script>
            <script src="js/json2.js"></script>
            <!-- config java script -->
            <script src="js/mainConfig.js"></script>

            <script>
                
                $(document).ready(function(){
                    //mainconfig.js function
                    runAtStartUp();
                     
                    getProductDataFromCookieAndDisplay();
                    var orderId = readCookie('orderId');
            
                    var totalPrice = readCookie('grandTotal');
                    $('#TotalPrice').text("Total: $"+totalPrice);
            
                });
                
                /*
                 *Function  load what the user has added the item in the shopping cart to the summary order page
                 */
                function getProductDataFromCookieAndDisplay()
                {
                    var shoppingCartCookie = new Array();
                    shoppingCartCookie = $.parseJSON(readCookie('shoppingCart'));
                    if(shoppingCartCookie!=null)
                    {
                        for(var i=0;i<shoppingCartCookie.length;i++)
                        {        
                            var productId = shoppingCartCookie[i].productId;
                            var productName = shoppingCartCookie[i].productName;
                            var productQty = shoppingCartCookie[i].productQty;
                                    
                            var productTotal = shoppingCartCookie[i].productTotal;
                            var productNameAndQty = productName+"("+productQty+")";
                                    
                            var tableDetailHeader ="<tr>";
                            var tableProductNameAndQty ="<td class=\""+productId+"\" id=\"productNameAndQty\">"+productNameAndQty+"</td>";
                            var tableProductTotal ="<td id=\"productTotal\">"+productTotal+"</td>";
                            var tableDetailFooter ="</tr>";
                            var entireTable = tableDetailHeader + tableProductNameAndQty + tableProductTotal +tableDetailFooter;
                                    
                            $("#table_productExecuteSummary > tbody:last").append(entireTable);
                                    
                        }
                    } 
                }
                
                $('#btnBackProductSearch').click(function()
                {
                    window.location = "index.html";
                });
  
            
                $('#btnFinish').click(function()
                {
                
                    if(validateCreditCardField() == false)
                        return;
                
                    var orderId = readCookie('orderId');
                    var cardNo = $('#textCreditCard').val();
                    var code = $('#textCW2').val();
                    var expiryDate = $('#textCreditCardExpiry').val();
         
                    var creditCardInfo = { "Order_ID": orderId, "cardno": cardNo, "code": code, "expiryDate": expiryDate };
                    var accepted = false;
                    $.ajax({
                        type: "POST",
                        url: "http://lowe.jschua.com/DinoPos/api/creditcards",
                        async:false,
                        data: JSON.stringify(creditCardInfo),
                        contentType: "application/json; charset=utf-8",
                        statusCode: {
                            202: function () {
                                accepted = true;
                                },
                            406: function () {
                                $('#errorMessage').text("Invalid credit card detail!");
                            }
                        },
                        success: function (data) {
                            createCookie('receiptId',data,0);
                            createCookie('creditCardNo',cardNo,0);
                            window.location = "customerDetail.html";
                        },
                        dataType: "text",
                        error: function (jqXHR, textStatus, errorThrown) {
                            $('#result').text("The following error occured: " + textStatus, errorThrown);
                        }
                    });
                });
                
                /**
                * Function validate the input such as
                * 1) Whether input field is blank
                * 2) CC Expiry date correct format
                * 3) Keyed in numbers not String
                * 
                * @return true if valid input
                * @return false if invalid input
                */
                function validateCreditCardField()
                {
                    var validInput = true;
                
                    var userCreditCardNo = $('#textCreditCard').val();
                    var userCw2Code = $('#textCW2').val();
                    var userExpiryDate = $('#textCreditCardExpiry').val();
                 
                    removeExistingErrorMessage(); 
                 
                    if (userCreditCardNo.length==0){
                        //alert("credit card no cannot be blank!");
                
                        var errorMessage = document.createElement("text");
                        errorMessage.className="text-error offset2";
                        errorMessage.id = "creditNoError";
                        errorMessage.innerHTML = "Credit card number is blank!"
                    
                        var controlGroup = document.getElementById("creditCardNoGroup");
                        controlGroup.appendChild(errorMessage);
                    
                        validInput= false;
                    }
                    if (userCw2Code.length==0){
                        //alert("credit card no cannot be blank!");
                
                        var errorMessage = document.createElement("text");
                        errorMessage.className="text-error offset2";
                        errorMessage.id = "credCw2Error";
                        errorMessage.innerHTML = "cw2 number is blank!"
                    
                        var controlGroup = document.getElementById("creditCw2Group");
                        controlGroup.appendChild(errorMessage);
                    
                        validInput=false;
                    }
                
                    if (userExpiryDate.length==0){
                        //alert("credit card no cannot be blank!");
                
                        var errorMessage = document.createElement("text");
                        errorMessage.className="text-error";
                        errorMessage.id = "creditExpiryError";
                        errorMessage.innerHTML = "&nbsp&nbsp&nbsp &nbspCredit card expiry date is blank!"
                    
                        var controlGroup = document.getElementById("creditCardExpiryGroup");
                        controlGroup.appendChild(errorMessage);
                    
                        validInput=false;
                    } 
                    else if(userExpiryDate.length!=4 || !isNumber(userExpiryDate))
                    {
                        var errorMessage = document.createElement("text");
                        errorMessage.className="text-error";
                        errorMessage.id = "creditExpiryError";
                        errorMessage.innerHTML = "&nbsp&nbsp&nbsp &nbspDate must in in integer and 4 digits!"
                    
                        var controlGroup = document.getElementById("creditCardExpiryGroup");
                        controlGroup.appendChild(errorMessage);
                    
                        validInput=false;
                    }
                 
                    return validInput;
                }
            
                function removeExistingErrorMessage(){
                    $('#creditNoError').remove();
                    $('#credCw2Error').remove();
                    $('#creditExpiryError').remove();
                
                }
                function isNumber (o){
                    return ! isNaN (o-0) && o != null;
                }
            
                function createCookie(name,value,days) {
                    if (days) {
                        var date = new Date();
                        date.setTime(date.getTime()+(days*24*60*60*1000));
                        var expires = "; expires="+date.toGMTString();
                    }
                    else var expires = "";
                    document.cookie = name+"="+value+expires+"; path=/";
                }
            
                function readCookie(name) {
                    var nameEQ = name + "=";
                    var ca = document.cookie.split(';');
                    for(var i=0;i < ca.length;i++) {
                        var c = ca[i];
                        while (c.charAt(0)==' ') c = c.substring(1,c.length);
                        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
                    }
                    return null;
                }
  
            </script>

    </body>

</html>
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.