How does this Online Payment form work?

Lowyat.NET forums

Lowyat.NET Kopitiam Garage Sales

Lowyat.NET Rules and Regulations FAQ Help Search Members

Welcome Guest ( Log In | Register )

Lowyat.NET -> Software -> Internet Related

Bump Topic Add Reply RSS Feed

Outline · [ Standard ] · Linear+

How does this Online Payment form work?, how is payment info passed to bank

views

TSokuribito	Nov 19 2018, 05:50 PM, updated 8y ago Show posts by this member only \| Post #1
Regular Senior Member 1,021 posts Joined: Mar 2010	» Click to show Spoiler - click again to hide... « CODE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="jquery.min.js"></script> <link rel="stylesheet" href="default.css" type="text/css" /> <script language="javascript" src="default.js"></script> <script language="javascript"> var fee = "0"; function calc_fee() { total = 0; for(i=1;i<=7;i++) { o = _get("amount_"+i); if(isNaN(o.value) \|\| o.value<0) { o.value = 0; } total = total + (o.value)1; } amount = _get("amount"); amount.value = format_currency(total,2); _get("amount_final").innerHTML = "MYR "+format_currency(total,2); } function get_symbol(c) { switch (c.toLowerCase()) { case "usd": return "$"; case "inr": return "Rs "; case "eur": return "€"; case "myr": return "MYR "; } } var units = new Array(); units["B"] = ["01-01","01-02","01-03","01-04","01-05","01-06","01-07","01-08","02-01","02-02","02-03","02-04","02-05","02-06","02-07","02-08","03-01","03-02","03-03","03-04","03-05","03-06","03-07","03-08","04-01","04-02","04-03","04-04","04-05","04-06","04-07","04-08","05-01","05-02","05-03","05-04","05-05","05-06","05-07","05-08","06-01","06-02","06-03","06-04","06-05","06-06","06-07","06-08","07-01","07-02","07-03","07-04","07-05","07-06","07-07","07-08","08-01","08-02","08-03","08-04","08-05","08-06","08-07","08-08","09-01","09-02","09-03","09-04","09-05","09-06","09-07","09-08","10-01","10-02","10-03","10-04","10-05","10-06","10-07","10-08","11-01","11-02","11-03","11-04","11-05","11-06","11-07","11-08","12-01","12-02","12-03","12-04","12-05","12-06","12-07","12-08","13-01","13-02","13-03","13-04","13-05","13-06","13-07","13-08","13A-01","13A-02","13A-03","13A-04","13A-05","13A-06","13A-07","13A-08","15-02","15-03","15-04","15-05","15-06","15-07","15-08","16-01","16-02","16-03","16-04","16-05","16-06","16-07","16-08","17-01","17-02","17-03","17-04","17-05","17-06","17-07","17-08","18-01","18-02","18-03","18-04","18-05","18-06","18-07","18-08","19-01","19-02","19-03","19-04","19-05","19-06","19-07","19-08","20-01","20-02","20-03","20-04","20-05","20-06","20-07","20-08""]; units["B1"] = ["01-01","01-02","01-03","01-04","01-05","01-06","01-07","01-08","02-01","02-02","02-03","02-04","02-05","02-06","02-07","02-08","03-01","03-02","03-03","03-04","03-05","03-06","03-07","03-08","05-01","05-02","05-03","05-04","05-05","05-06","05-07","05-08","06-01","06-02","06-03","06-04","06-05","06-06","06-07","06-08","07-01","07-02","07-03","07-04","07-05","07-06","07-07","07-08","08-01","08-02","08-03","08-04","08-05","08-06","08-07","08-08","09-01","09-02","09-03","09-04","09-05","09-06","09-07","09-08","10-01","10-02","10-03","10-04","10-05","10-06","10-07","10-08","11-01","11-02","11-03","11-04","11-05","11-06","11-07","11-08","12-01","12-02","12-03","12-04","12-05","12-06","12-07","12-08","13-01","13-02","13-03","13-04","13-05","13-06","13-07","13-08","13A-01","13A-02","13A-03","13A-04","13A-05","13A-06","13A-07","13A-08","15-01","15-02","15-03","15-04","15-05","15-06","15-07","15-08","16-01","16-02","16-03","16-04","16-05","16-06","16-07","16-08","17-03","17-04","17-05","17-06","18-03","18-04","18-05","18-06","3A-01","3A-02","3A-03","3A-04","3A-05","3A-06","3A-07","3A-08"]; units["B2"] = ["01-01","01-02","01-03","01-04","01-05","01-06","01-07","01-08","02-01","02-02","02-03","02-04","02-05","02-06","02-07","02-08","03-01","03-02","03-03","03-04","03-05","03-06","03-07","03-08","05-01","05-02","05-03","05-04","05-05","05-06","05-07","05-08","06-01","06-02","06-03","06-04","06-05","06-06","06-07","06-08","07-01","07-02","07-03","07-04","07-05","07-06","07-07","07-08","08-01","08-02","08-03","08-04","08-05","08-06","08-07","08-08","09-01","09-02","09-03","09-04","09-05","09-06","09-07","09-08","10-01","10-02","10-03","10-04","10-05","10-06","10-07","10-08","11-01","11-02","11-03","11-04","11-05","11-06","11-07","11-08","12-01","12-02","12-03","12-04","12-05","12-06","12-07","12-08","13-01","13-02","13-03","13-04","13-05","13-06","13-07","13-08","13A-01","13A-02","13A-03","13A-04","13A-05","13A-06","13A-07","13A-08","15-01","15-02","15-03","15-04","15-05","15-06","15-07","15-08","16-01","16-02","16-03","16-04","16-05","16-06","16-07","16-08","17-03","17-04","17-05","17-06","18-03","18-04","18-05","18-06","3A-01","3A-02","3A-03","3A-04","3A-05","3A-06","3A-07","3A-08"]; function loadSubBlocks() { $("#unit_id").empty().append("<option value=''>(Select Unit)</option>"); units[$("#block_id").val()].forEach(function(entry){ $("#unit_id").append("<option value='"+entry+"'>"+entry+"</option>"); }); } $(document).ready(function(){ $("#block_id").bind("change",loadSubBlocks); }); </script> <title>Pay Online to Condo XYZ</title> </head> <body> <div id="wrapper"> <div id="header"> <h1>Condo XYZ</h1> </div> <div id="content"> <h2>Online Payment</h2> <form method="post"> <fieldset> <legend>Payment Information</legend> <p> <label> Unit Number:</label> <select id="block_id" name="block_id"> <option value="">(Select Block)</option> <option value="B">Block B</option> <option value="B1">Block B1</option> <option value="B2">Block B2</option> </select> <select id="unit_id" title='Unit Number' name='unit_id'> <option>(Select Unit)</option> </select> </p> <p> <label>Instruction/Notes:</label> <input type="text" name="instruction" title="Instruction" size="40" /> </p> </fieldset> <fieldset> <legend>Amount Paying</legend> <p> <label>Service Charge:</label> MYR <input name="amount_1" id="amount_1" type="text" value="0" size="8" maxlength="8" title="Service Charge" onkeyup="javascript:calc_fee();" /> </p> <p> <label>Sinking Fund:</label> MYR <input name="amount_2" id="amount_2" type="text" value="0" size="8" maxlength="8" title="Sinking Fund" onkeyup="javascript:calc_fee();" /> </p> <p> <label>Water Charges:</label> MYR <input name="amount_3" id="amount_3" type="text" value="0" size="8" maxlength="8" title="Water Charges" onkeyup="javascript:calc_fee();" /> </p> <p> <label>Interest Charges:</label> MYR <input name="amount_4" id="amount_4" type="text" value="0" size="8" maxlength="8" title="Interest Charges" onkeyup="javascript:calc_fee();" /> </p> <p> <label>Insurance Charges:</label> MYR <input name="amount_5" id="amount_5" type="text" value="0" size="8" maxlength="8" title="Insurance Charges" onkeyup="javascript:calc_fee();" /> </p> <p> <label>Quit Rent:</label> MYR <input name="amount_6" id="amount_6" type="text" value="0" size="8" maxlength="8" title="Quit Rent" onkeyup="javascript:calc_fee();" /> </p> <p> <label>* Total Amount Paying:</label> <select name="currency" id="currency" onchange="javascript:calc_fee()" style="display:none;"> <option selected="selected" value="myr">MYR</option> </select> MYR <input name="amount" id="amount" type="text" value="0" size="8" maxlength="8" title="Total Amount Paying" onkeyup="javascript:calc_fee();" readonly /> </p> </fieldset> <fieldset> <legend>Payee's details</legend> <p> <label>* Your Full Name:</label> <select name="prefix_name" id="prefix_name" name="Prefix" title="Prefix"> <option value="">(Select Prefix)</option> <option>Mr</option> <option>Mrs</option> <option>Ms</option> </select> <input name="full_name" type="text" id="full_name" size="40" maxlength="128" title="Full Name" /> </p> <p> <label>* Your Email Address:</label> <input name="email" type="text" id="email" size="40" maxlength="128" title="Email Address" /> <span class="hint">Receipt would be sent on this email address.</span> </p> <p> <label>* Phone Number:</label> <input type="text" name="phone" title="Phone Number" size="20" /> <span class="hint">including code, eg. Code (012) 123 4567</span> </p> </fieldset> <fieldset> <legend>Payment Type</legend> <p> <label>Date of Payment:</label> <span style="font-weight:bold;">19 November 2018</span> </p> <p> <label>Amount Paying</label> <span style="font-weight:bold; font-size:16px;"><span id="amount_final">0.00</span> </span> </p> <p> <label>* Credit Card Type:</label> <select name='cc_type' id="cc_type" title="Credit Card Type"> <option value="">(Select)</option> <option>Visa</value> <option>Mastercard</value> </select> </p> <p> <label>* Credit Card Number:</label> <input name="cc_num" type="text" id="cc_num" size="20" maxlength="16" title="Credit Card Number" /> <span class='hint'>16 digit number without space or dash.</span> </p> <p> <label>* Credit Card Expiry:</label> <select name='cc_mm' id="cc_mm" title="Credit Card Expiry (Month)"> <option value="">(Month)</option> <option value="01">01</value> <option value="02">02</value> <option value="03">03</value> <option value="04">04</value> <option value="05">05</value> <option value="06">06</value> <option value="07">07</value> <option value="08">08</value> <option value="09">09</value> <option value="10">10</value> <option value="11">11</value> <option value="12">12</value> </select> <select name='cc_yy' id="cc_yy" title="Credit Card Expiry (Year)"> <option value="">(Year)</option> <option>2018</option><option>2019</option><option>2020</option><option>2021</option><option>2022</option><option>2023</option><option>2024</option><option>2025</option><option>2026</option><option>2027</option> </select> </p> <p> <label>* CVV2:</label> <input name="cc_cvv" type="password" id="cc_cvv" size="4" maxlength="3" title="Credit Card CVV2" /> <span class='hint'>3 digit number found on the back of your Credit Card</span> </p> </fieldset> <p class="buttons"> <input type="submit" onclick=" MM_validateForm( 'unit_id','','isSelect', 'prefix_name','','isSelect', 'full_name','','R', 'email','','RisEmail', 'phone','','RisNum', 'cc_type','','isSelect', 'cc_num','','RisNum', 'cc_mm','','isSelect', 'cc_yy','','isSelect', 'cc_cvv','','RisNum' ); return document.MM_returnValue" value="PAY" /> </p> </form> </div> <div id="footer"> <div class="copyright">© Copyright <a href="#">Condo XYZ</a>, 2008 - 18. All rights reserved.</div> <div class="footer-link">Powered by <a href="http://www.abc.com/?_ref=vkw" title="abc: Application Developer ">ABC</a></div> </div> </div> </body> </html> My condo management got someone to set up an online payment form to facilitate credit card payments instead of using one of the payment gateways. The full webpage code is in the spoiler above. Can someone familiar with html / javascript explain how the info submitted is passed to the payment gateway / bank for processing? Which part(s) of the code does that? For information, this form is implemented on our building manager's website (non-https). I myself don't dare use it because I think my CC# and CVV can be hijacked during transmission (no https) as well as captured by the building manager. Any web developers here? TIA >>Mods - apologies if wrong place to post This post has been edited by okuribito: Nov 19 2018, 05:52 PM
Card PM	Report Top Like Quote Reply

takemehomepls	Nov 19 2018, 06:00 PM Show posts by this member only \| Post #2
Getting Started Junior Member 124 posts Joined: Oct 2012 From: Cosmopolitan	Hi, may I know what is your default.js doing? Thanks.
Card PM	Report Top Like Quote Reply

mynewsin	Nov 19 2018, 06:05 PM Show posts by this member only \| Post #3
Getting Started Junior Member 113 posts Joined: Apr 2013	The code show by you are only front end. There is impossible to see what backend doing
Card PM	Report Top Like Quote Reply

TSokuribito	Nov 19 2018, 06:06 PM Show posts by this member only \| Post #4
Regular Senior Member 1,021 posts Joined: Mar 2010	Good question I dunno javascript ler but I download for you in spoiler >> » Click to show Spoiler - click again to hide... « CODE // JavaScript Document function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p); } if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_validateForm() { //v4.0 var i,p,q,nm,test,num,min,max,errors='',oVal,args=MM_validateForm.arguments; for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=MM_findObj(args[i]); if (val) { nm=val.title; oVal=val; if ( test.indexOf('isSelect') != -1 ) { if(oVal.selectedIndex==0) { errors = "Please select '" + nm + "'"; oVal.focus(); break; } } else if ((val=val.value)!="") { if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@'); if (p<1 \|\| p==(val.length-1)) { errors+='"' + nm + '"' + ' must contain an e-mail address.'; oVal.focus(); break; } // (p<1 \|\| p==(val.length-1)) } else if (test!='R') { num = parseFloat(val); if (isNaN(val)) { errors+='Please enter a valid number for "' + nm + '"' + '.'; oVal.focus(); break; } // if (isNaN(val)) if (test.indexOf('inRange') != -1) { p=test.indexOf(':'); min=test.substring(8,p); max=test.substring(p+1); if (num<min \|\| max<num) { errors+='"' + nm + '"' + ' must contain a number between '+min+' and '+max+'.'; oVal.focus(); break; } // if (num<min \|\| max<num) } // if (test.indexOf('inRange') != -1) } // else if (test!='R') } else if (test.charAt(0) == 'R') { errors += 'Please enter "' + nm + '"' + '.'; oVal.focus(); break; } // else if (test.charAt(0) == 'R') } // if (val) } // for if (errors) alert(errors); document.MM_returnValue = (errors == ''); } function format_number(pnumber,decimals){ if (isNaN(pnumber)) { return 0}; if (pnumber=='') { return 0}; var snum = new String(pnumber); var sec = snum.split('.'); var whole = parseFloat(sec[0]); var result = ''; if(sec.length > 1){ var dec = new String(sec[1]); dec = String(parseFloat(sec[1])/Math.pow(10,(dec.length - decimals))); dec = String(whole + Math.round(parseFloat(dec))/Math.pow(10,decimals)); var dot = dec.indexOf('.'); if(dot == -1){ dec += '.'; dot = dec.indexOf('.'); } while(dec.length <= dot + decimals) { dec += '0'; } result = dec; } else{ var dot; var dec = new String(whole); dec += '.'; dot = dec.indexOf('.'); while(dec.length <= dot + decimals) { dec += '0'; } result = dec; } return result; } function format_currency(num) { num = num.toString().replace(/\$\|\,/g,''); if(isNaN(num)) num = "0"; sign = (num == (num = Math.abs(num))); num = Math.floor(num100+0.50000000001); cents = num%100; num = Math.floor(num/100).toString(); if(cents<10) cents = "0" + cents; for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++) num = num.substring(0,num.length-(4i+3))+','+ num.substring(num.length-(4*i+3)); return (((sign)?'':'-') + num + '.' + cents); } function _get(o) { return document.getElementById(o); }
Card PM	Report Top Like Quote Reply

TSokuribito	Nov 19 2018, 06:11 PM Show posts by this member only \| Post #5
Regular Senior Member 1,021 posts Joined: Mar 2010	QUOTE(mynewsin @ Nov 19 2018, 06:05 PM) The code show by you are only front end. There is impossible to see what backend doing hmmmm ... but how backend know if got any new transaction coming from the frontend? Does the backend have code to look for activity OR frontend has code to pass info to backend or activate backend ? Last time I did a simple form in html, I remember I had to specify an action in the form eg email to me any form submitted
Card PM	Report Top Like Quote Reply

mynewsin	Nov 22 2018, 04:19 PM Show posts by this member only \| Post #6
Getting Started Junior Member 113 posts Joined: Apr 2013	QUOTE(okuribito @ Nov 19 2018, 06:11 PM) hmmmm ... but how backend know if got any new transaction coming from the frontend? Does the backend have code to look for activity OR frontend has code to pass info to backend or activate backend ? Last time I did a simple form in html, I remember I had to specify an action in the form eg email to me any form submitted From the code, it look like it passing the necessary info such as card number, cvv to backend. once u click the submit button, it will call a method and pass in the data to backend to continue the transation. Based on what you provided, i could not identify how it work.
Card PM	Report Top Like Quote Reply

TSokuribito	Nov 23 2018, 06:06 PM Show posts by this member only \| Post #7
Regular Senior Member 1,021 posts Joined: Mar 2010	CODE <input type="submit" onclick=" MM_validateForm( 'unit_id','','isSelect', 'prefix_name','','isSelect', 'full_name','','R', 'email','','RisEmail', 'phone','','RisNum', 'cc_type','','isSelect', 'cc_num','','RisNum', 'cc_mm','','isSelect', 'cc_yy','','isSelect', 'cc_cvv','','RisNum' ); return document.MM_returnValue" value="PAY" /> Looks like When click the submit button, it runs the form validation ... then nothing else ... what does return document.MM_returnValue" value="PAY" do? Anything in default.js? Looks like code for handling validation exceptions only?
Card PM	Report Top Like Quote Reply

« Next Oldest · Internet Related · Next Newest »

Add Reply Options

Change to:

0.0147sec

0.30

5 queries

GZIP Disabled
Time is now: 25th November 2025 - 04:10 AM

All Rights Reserved © 2002- 2025 Vijandren Ramadass (~unite against racism~)

Removal Request

Powered by Invision Power Board © 2025 IPS, Inc.