Link to home
Start Free TrialLog in
Avatar of mac_man
mac_man

asked on

secure orderform

how do I make this orderform secure so when customers input their credit card numbers no one else can get the number:

<html>
<head>
<title>Neil's Dynamic Order Form</title>
</head>
<body bgcolor="white">
<!-- This names the form, which is used in every reference -->
<form name="order">
<input type="hidden" name="information2" value>
<script language="JavaScript">

<!--
// Created by Neil McCorrison, http://neil.simplenet.com
// To change info, follow steps in order.
/////////////////////////////////////////////
//** Step 1 **\\

// You should only have to change the values below.  
// Change this to "yes" if you are using CGI, "no" if you're not.

cgi = "yes";

// put the location of your cgi program here, if cgi = yes
// don't have CGI, try out my Easy form mail at:
// http://neil.simplenet.com/formmail/

cgilocation = "http://neil.simplenet.com/formmail/formmail.hts"

// Change these two values for the e-mail to be sent to, and the subject

document.write('<input type="hidden" name="recipient" value="cybercj@erols.com">');
document.write('<input type="hidden" name="subject" value="order">');


// Change this value if you are using a CGI program such as Form Mail

document.write('<input type="hidden" name="redirect" value="http://neil.simplenet.com">');

/////////////////////////////
// -->

</script>

<!-- This  gives a message if the user is using IE -->

<script language="JavaScript">

<!--
if ((navigator.appName == "Microsoft Internet Explorer") && (cgi == "no")) {

document.write("Welcome Internet Explorer User.  The sending part of this form is only supported by Netscape, but you can still use it's funtionality.  After entering all your information, cut and paste all of the text inside of the large field at the bottom.")

}
// -->

</script>

<!-- This starts the table which will be 3 colums wide, and each cell contains different fields with different names. The onChange="compute()"
makes the form refresh when that field has changed.

//** Step 2 **\\
When adding new products
it is easiest to copy an entire row (<tr> through </tr>) of another product,
and then change the info -->

<table bgcolor="lightyellow" cellspacing="1"

  cellpadding="4">

    <tr>
      <td>Product</td>
      <td>Quantity</td>
      <td>Total for product</td>
    </tr>
    <tr>
      <td>Sweat Shirt - $21.95 </td>
      <td><select name="numofsweat" onChange="compute()" size="1">
        <option value="0">0 </option>
        <option value="1">1 </option>
        <option value="2">2 </option>
        <option value="3">3 </option>
        <option value="4">4 </option>
        <option value="5">5 </option>
      </select> </td>
      <td><input type="text" size="8" name="pricesweat" value="0.00"> </td>
    </tr>
    <tr>
      <td>Tee Shirt - $11.95 </td>
      <td><select name="numoftee" onChange="compute()" size="1">
        <option value="0">0 </option>
        <option value="1">1 </option>
        <option value="2">2 </option>
        <option value="3">3 </option>
        <option value="4">4 </option>
        <option value="5">5 </option>
      </select> </td>
      <td><input type="text" size="8" name="pricetee" value="0.00"> </td>
    </tr>
    <tr>
      <td>Jacket - $45.00 </td>
      <td><select name="numofjacket" onChange="compute()" size="1">
        <option value="0">0 </option>
        <option value="1">1 </option>
        <option value="2">2 </option>
        <option value="3">3 </option>
        <option value="4">4 </option>
        <option value="5">5 </option>
      </select> </td>
      <td><input type="text" size="8" name="pricejacket" value="0.00"> </td>
    </tr>
    <tr>
      <td>Socks - $5.00 </td>
      <td><select name="numofsocks" onChange="compute()" size="1">
        <option value="0">0 </option>
        <option value="1">1 </option>
        <option value="2">2 </option>
        <option value="3">3 </option>
        <option value="4">4 </option>
        <option value="5">5 </option>
      </select> </td>
      <td><input type="text" size="8" name="pricesocks" value="0.00"> </td>
    </tr>
    <tr>
      <td align="right">Sub-Total:</td>
      <td colspan="2"><input type="text" name="subtotal" size="32" value="0.00"></td>
    </tr>
    <tr>
      <td align="right">VA?</td>
      <td colspan="2"><select name="ca" size="1" onChange="compute()">
        <option>No</option>
        <option>Yes</option>
      </select> </td>
    </tr>
    <tr>
      <td align="right">Tax: 4.5%</td>
      <td colspan="2"><input type="text" name="tax" size="32" value="0.00"></td>
    </tr>
<!-- Delete this row, if you're not using a shipping field. -->
    <tr>
      <td align="right">Shipping</td>
      <td colspan="2"><select name="shipping" size="1" onChange="compute()">
        <option value="0">Select One</option>
        <option value="3.0">US Postal - $3.00</option>
        <option value="6.0">Fed Ex 2 day - $6.00</option>
        <option value="12.0">Fed Ex overnight - $12.00</option>
      </select></td>
    </tr>
<!-- ----------------------  -->
      <td align="right">Total:</td>
      <td colspan="2" align="left" valign="top"><input type="text" name="total" size="32" value="0.00"></td>
    </tr>
    <tr>
      <td align="right" valign="top">Your Name: </td>
      <td colspan="2" align="left" valign="top"><input type="text" name="theirname" size="32"
      onChange="compute()"></td>
    </tr>
    <tr>
      <td align="right" valign="top">Your E-mail: </td>
      <td colspan="2" align="left" valign="top"><input type="text" name="email" size="32"
      onChange="compute()"> </td>
    </tr>
    <tr>
      <td align="right" valign="top">Phone Number: </td>
      <td colspan="2" align="left" valign="top"><input type="text" name="phonenumber" size="32"
      onChange="compute()"></td>
    </tr>
    <tr>
      <td align="right" valign="top">Address: </td>
      <td colspan="2" align="left" valign="top"><textarea name="address" cols="32" rows="3"
      onChange="compute()"></textarea><br>
      </td>
    </tr>
    <tr>
      <td align="right">Payment Type:</td>
      <td colspan="2"><select name="paymenttype" size="1">
        <option value="Master Card">Master Card </option>
        <option value="Visa">Visa </option>
        <option value="Check">Check </option>
      </select></td>
    </tr>
    <tr>
      <td align="right">If credit card:</td>
      <td colspan="2">&nbsp;</td>
    </tr>
    <tr>
      <td align="right">Card Number:</td>
      <td colspan="2"><input type="text" name="cardnumber" size="12"> Exp. Date: <input
      type="text" name="expdate" size="8"> </td>
    </tr>
    <tr>
      <td align="right">If Check:</td>
      <td colspan="2">&nbsp;</td>
    </tr>
    <tr>
      <td align="right">Check Number:</td>
      <td colspan="2"><input type="text" name="checknumber" size="5"> </td>
    </tr>
    <tr>
      <td align="right">&nbsp;</td>
      <td colspan="2" align="right">If paying by check, mail check to:
            Name<br>
            Address<br>
            City, State Zip<br>
      Your order will be sent when the check clears. </td>
    </tr>
    <tr>
      <td colspan="3" align="left" valign="top"><input type="checkbox" name="cc"
      onClick="compute()" value="ON">Check here, If you would like to be e-mailed a copy of this
      order</td>
    </tr>
  </table>
<!-- This line creates a hidden field which contains the complete order to be sent, this field will be brought into the text area in the output window -->
<!-- This checks if it's Netscape, if so it will create another hidden field which will later be made equal to information2 hidden field-->
  <script language="JavaScript">

<!--

if ((navigator.appName == "Netscape") || (cgi == "yes")) { document.write("<input type=hidden name=information3>"); }

// Checks if IE, if so, it will display a textarea with all the information, (which is // information2).  IE does not support mailto: forms, so this textarea can be copied into their // e-mail.  The recipient e-mail is displayed if this is shown

if ((navigator.appName == "Microsoft Internet Explorer") && (cgi == "no")) {

document.write("Cut (control + c) all of the text inside of this box, open your e-software, and paste (control + v) into your e-mail. Send to: " + document.order.recipient.value + " with subject: " + document.order.subject.value + "<br><font face='arial, helvetica'><textarea name=information3 rows=20 cols=55></textarea></font>")
}

// -->

</script>

<p><br>

<!-- The checks for Netscape or CGI, if so, it displays a button to open the conformation, output widow -->  <script language="JavaScript">




<!--

if ((navigator.appName == "Netscape") || (cgi == "yes")) {

document.write('<input type=button value="Click here to open the conformation window" onClick="compute(); opentotalwindow()">');

    }

// -->




</script> <!-- Ends the form --> </p>

</form>

<!-- Comments will now be displayed following // to slashes -->

<script language="JavaScript">






<!--  

  // this line adds line breaks for the final output in textarea, it will
  // be formatted correctly, not just one very long line
  // to use, place + addreturn + anywhere there should be a break

  if (navigator.appVersion.lastIndexOf('Win') != -1) { addreturn = "\r\n"  } else { addreturn = "\n" }

  // this function creates two decimal places for each price value,
  // to use put value = decimal(fieldrefrence)
  // or document.order.fieldname = decimal(0)  to make that field equal to "0.00"
  // the reason it doesn't add a $ is because it still needs to grab a number value
  // and having a $, would make it a string, which can't be mathmatically added

function decimal(num) {

        string = "" + num;

        if (string.indexOf('.') == -1)

                return string + '.00';

        seperation = string.length - string.indexOf('.');

        if (seperation > 3)

                return string.substring(0,string.length-seperation+3);

        else if (seperation == 2)

                return string + '0';

        return string;

}

// this sets the default shipping values to no, so that one must be chosen to get
// the conformation window
shippingmethod = "None Chosen"; ship = "no";

// This is the main function for the form, it computes all the price field values
// and puts them in each field.  It also creates variables equal to what output will
// be for each product, depending on if more than 0 are selected.
//** Step 3 **\\
// When adding new products, copy one of the following lines for another producs
// and change the names (pricesweat & numofsweat) to the ones you named the select
// list and the text field for the new product.  Also change the number at the end which is the
// price.

function compute(form) {

  document.order.pricesweat.value = decimal(eval(document.order.numofsweat.selectedIndex) * 21.95)

  document.order.pricetee.value = decimal(eval(document.order.numoftee.selectedIndex) * 11.95)

  document.order.pricejacket.value = decimal(eval(document.order.numofjacket.selectedIndex) * 45.00)

  document.order.pricesocks.value = decimal(eval(document.order.numofsocks.selectedIndex) * 5.00)

/////////////////////////////////
//** Step 4 **\\
// you will need to add the field value for each product to this line
// pricevalue fields are set in step 3
// what this does is gets all the values, adds them together, and creates the subtotal value

  document.order.subtotal.value = decimal(eval(document.order.pricesweat.value) + eval(document.order.pricetee.value) + eval(document.order.pricejacket.value) + eval(document.order.pricesocks.value))
////////////
  if (document.order.ca.selectedIndex == 1) {

document.order.tax.value = decimal(eval(document.order.subtotal.value) * 0.045)

}

  if (document.order.ca.selectedIndex == 0) {  document.order.tax.value = decimal(0); }

// If you're not using shipping, delete the part " + eval(document.order.shipping.options[document.order.shipping.selectedIndex].value)" //
//
document.order.total.value = decimal(eval(document.order.subtotal.value) + eval(document.order.tax.value) + eval(document.order.shipping.options[document.order.shipping.selectedIndex].value));

// **Step 4.5 **\\

// this specifies the text to be used for the shipping method.
// If you're not using shipping, delete the entire code below.
if (document.order.shipping.selectedIndex == 1) { shippingmethod = "UPS 3 Day - 3.00"; ship = "yes" }
else if (document.order.shipping.selectedIndex == 2) { shippingmethod = "Fed Ex 2 day - $6.00"; ship = "yes"}
else if (document.order.shipping.selectedIndex == 3) { shippingmethod = "Fed Ex Overnight - $12.00"; ship = "yes"}
else { ship = "no" }
////////////////////////////////


//** Step 5 **\\
//  For each new product you will have to add a new area following the format below.
//  This checks if the product is selected for more than 0, and if so it creates a
//  line which will be used in the conformation window.
//  Lining up the the ('s after the : in each product is important because that is
//  how it will be lined up in the e-mail you get.


if (document.order.pricesweat.value > 0)

    sweattext =  ('Sweatshirt: (' + document.order.numofsweat.selectedIndex + ') $' + document.order.pricesweat.value + addreturn)

        else sweattext = "";

if (document.order.pricetee.value > 0)

    teetext =    ('Tee shirt:  (' + document.order.numoftee.selectedIndex + ') $' + document.order.pricetee.value + addreturn)

        else teetext = "";

if (document.order.pricejacket.value > 0)

    jackettext = ('Jacket:     (' + document.order.numofjacket.selectedIndex + ') $' + document.order.pricejacket.value + addreturn)

        else jackettext = "";

if (document.order.pricesocks.value > 0)

    sockstext =  ('Socks:      (' + document.order.numofsocks.selectedIndex + ') $' + document.order.pricesocks.value + addreturn)

        else sockstext = "";

// This checks if Credit Card field is NOT empty, if it's not the it displays credit

// info

if (document.order.cardnumber.value != "")

    cardtext = ('Credit Card: ' + document.order.paymenttype.options[document.order.paymenttype.selectedIndex].value + addreturn + 'Card Number: ' + document.order.cardnumber.value + addreturn +

            'Exp. Date:   ' + document.order.expdate.value + addreturn)

    else cardtext = "";

// This checks if Check field is NOT empty, if it's not the it displays check

// info

if (document.order.checknumber.value != "")

    checktext = (document.order.paymenttype.options[document.order.paymenttype.selectedIndex].value +  '#:' + document.order.checknumber.value + addreturn)

    else checktext = "";



// this sets up if copy will be mailed to sender
// notice how .checked is used to see if a checkbox is checked or not
// The "cc" stands for Carbon Copy
// What it does, if it's checked, it will make the new recipient equal to
// the original, plus the sender's e-mail.  Seperated by a comma.

if (document.order.cc.checked) {
 carbon = (',' + document.order.email.value);

// this line displays in the confirmation window, and also in the e-mail
 copy = ('Copy of order mailed to ' + document.order.email.value);      
             }

// otherwise (else) it will print the line above, but it will be blank.
  else { carbon = "";  copy = "" }

  recipient = document.order.recipient.value;

// declares that mailtopersons is equal to the recipient + the sender's e-mail
  mailtopersons = (recipient + carbon);

document.order.information2.value = (

//** Step 6 **\\
// This is a very important part of the order form, this is exactly how
// the output will be displayed.  Notice how some are variables and some are
// field references; This is because variables have been set up for some info,
// such as number of product over 0 as noted above.  The text inside the ' and '
// will be displayed exactly as shown (if using monospaced font) this is called a
// string and how it is displayed compared to the strings above will make the
// everything line up in the output. You can include a string containing only spaces.
// The addreturn adds a line break. The + adds the next item.  There
// must be a + before every new variable, string ( '  ' ), or field reference ( document.order.)

  '  ' + addreturn

  + 'Name:    ' + document.order.theirname.value + addreturn

  + 'Address: ' + addreturn +  document.order.address.value + addreturn

  + 'E-mail:  ' +  document.order.email.value + addreturn

  + 'Phone:   ' +  document.order.phonenumber.value + addreturn

// for every product you have added, you need to have the variable in this line.
// The variable is declared in step 5.  Make sure to put a + between each.
  + sweattext + teetext + jackettext + sockstext + addreturn

  + 'Sub-total: $' + document.order.subtotal.value + addreturn

  + 'Tax:       $' + document.order.tax.value + addreturn

  + 'Total:     $' + document.order.total.value + addreturn
  + 'Shipping method: ' + shippingmethod + addreturn + addreturn

  + cardtext

  + checktext + addreturn

  + addreturn + addreturn + copy

 

 

);

// this sets information3 field equal to info2 field

document.order.information3.value = document.order.information2.value;

                }









// function which opens a new window, which displays one textfield which

// contains all ordering info from hidden field information2

function opentotalwindow() {
if (ship != "yes") {
alert("You must choose a shipping method");
}
// put a // before this line if you are not using shipping.
if (ship == "yes") {


totwindow = window.open("", "totwindow", "resizable=yes,menubar=yes,status=yes,scrollbars=yes,width=400,height=375")



totwindow.document.write("<HEAD><TITLE>Order Confirmation</TITLE></head><body bgcolor=lightyellow>")

// replace the action with the CGI location, if using CGI

if (cgi == "yes") {

totwindow.document.write("<form name='confirm' action='" + cgilocation + "' method='post'>")

                }

if (cgi == "no") {

totwindow.document.write("<form name='confirm' action='mailto:" + mailtopersons + "?subject=" + document.order.subject.value + "' method='post'  enctype='text/plain'>")

}


totwindow.document.write("<b><center>Review your order, if there are any errors, click close. If everything is correct, click send.")

// makes it so the window contents can't be changed (netscape only)
totwindow.document.write("<br><center><font face='arial, helvetica'><textarea cols=30 rows=10 name='message' onFocus='document.confirm.message.blur()'>" + document.order.information2.value + "</textarea>")

if (cgi == "yes") {
totwindow.document.write("<input type=hidden name='email' value='" + document.order.email.value + "'>");
totwindow.document.write("<input type=hidden name=recipient value='" + mailtopersons + "'>")
totwindow.document.write("<input type=hidden name='subject' value='" + document.order.subject.value + "'>")
totwindow.document.write("<input type=hidden name='member' value='" + mailtopersons + "'>")
totwindow.document.write("<input type=hidden name='redirect' value='" + document.order.redirect.value + "'>")
totwindow.document.write("<input type=hidden name='from' value='" + document.order.email.value + "'>");

}
totwindow.document.write("<br><br><input type=submit value=' Send '>&nbsp;&nbsp;<input type=button value=' Close ' onClick='top.close()'><br>");


// writes a message for mailto: users, so that it doesn't get closed before it's done
if (cgi != "yes") {
totwindow.document.write("Wait for at least five seconds before closing this window, to make sure processing worked correctly.")
}
totwindow.document.write("<font size='-1'><br>If for some reason it didn't send correctly, you can save this window as a file, then open and send it later.</form></body></html>")

}
  }


// -->




</script>
</body>
</html>

ASKER CERTIFIED SOLUTION
Avatar of MasseyM
MasseyM
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial