HTML form for entering credit card information

Bare minimum form

The basic HTML tags used to construct such a form would be written as follows:

<form method="post" action="my-credit-card-processing-script">
</form>

"my-credit-card-processing-script" is a fictitious name that has to be replaced with an URL to the real script that processes the submitted information. We'll discuss that later in this Guide.

The minimum information required to charge a credit card is:

• Amount of purchase
• Credit card number
• Card expiration date

The following code represents the bare minimum that would need to be inserted into a page to submit the credit card information:

<form action="my-credit-card-processing-script" method="post">
<input type="hidden" name="Amount" value="14.95">
Card Number: <input type="text" name="Card_Num"><br>
Card Expiration Date (mmyy): <input type="text" name="Exp_Date"><br>
<input type="submit" value="SUBMIT PAYMENT">
</form>

Submitting more information

The "bare minimum" form is practically useless. Normally you would like to know who paid for what, so we need to add more input fields to the form.

If you sell only one product or service or you want your customer to pay for each product you sell online separately - you can include the product code in the payment form. Web sites offering a range of products of services usually have a "shopping cart" application, which allows to collect everything into one "basket" and to assign a unique Order ID to it. In this case, we can add only the Order ID to the form:

<input type="hidden" name="Order_ID" value="123456">

In addition to that, you should collect the complete billing information, which helps preventing fraudulent credit card transactions:

• Cardholder's First Name
• Cardholder's Last Name
• Card ID (CVV2) Number - additional code that is printed on the card only and does not appear in statements and receipts *)
• Billing Address (address at which the credit card bills are received): Street name and house number, City, State or Province, ZIP or Postal Code and Country

We can code a form that includes all this information as follows:

<form action="my-credit-card-processing-script" method="post">
<input type="hidden" name="Amount" value="14.95">
<input type="hidden" name="Order_ID" value="18752">
<table>
<tr>
<td>Cardholder's First Name:</td>
<td><input type="text" name="First_Name"></td>
</tr><tr>
<td>Cardholder's Last Name:</td>
<td><input type="text" name="Last_Name"></td>
</tr><tr>
<td>Credit Card Number:</td>
<td><input type="text" name="Card_Num"></td>
</tr><tr>
<td colspan="2" align="center">
<small>Please enter the expiration date as follows:
two digits of month and two digits of year.
For instance, January 2008 has to be entered as 0108:</small></td>
</tr><tr>
<td>Exp. date (mmyy):</td>
<td><input type="text" name="Exp_Date" maxlength="4"></td>
</tr><tr>
<td colspan="2" align="center">
<small>The Card Verification Code (Card ID or CVV2)
is required for American Express,Visa and MasterCard.
Please enter: for American Express - 4 digits on front of card;
for Visa and Mastercard - last 3 digits on back of card:</small>
</td>
</tr><tr>
<td>Card Number:</td>
<td><input type="text" name="Card_Code"></td>
</tr><tr>
<td colspan="2" align="center"><small>
Please enter the address at which the credit card bills are received:
</small></td>
</tr><tr>
<td>Street Address:</td>
<td><input type="text" name="Address"></td>
</tr><tr>
<td>City:</td>
<td><input type="text" name="City"></td>
</tr><tr>
<td>State/Province:</td>
<td><input type="text" name="State"></td>
</tr><tr>
<td>Zip/Postal Code:</td>
<td><input type="text" name="Zip"></td>
</tr><tr>
<td>Country:</td>
<td><input type="text" name="Country"></td>
</tr><tr>
<td colspan="2" align="center">
<input type="submit" value="Submit payment">
</td>
</tr>
</table>
</form>

*) The card security code is a number printed on the card. The number is not embossed on the card and therefore not printed on receipts, making it much harder for anyone other than the cardholder to know what the code is. The format and position of the security code varies across card schemes. Some cards have a three-digit number printed at the end of the cards' signature strip. Some (AMEX cards for example) have a four-digit number on the front of the card. Some card issuers refer to this number as the 'Security Code' (for AMEX cards) and others as 'Card Verification Value'. It may also go by the name of 'CVV2' for Visa Cards, or 'Card Verification Code' (CVS) for MasterCard.

Processing script sample

The simplest way of processing the submitted data is to send it by email. Here is a very short implementation, in PHP:

<?php
$MailBody = '';
foreach ( $_POST as $Name => $Value ) {
  $MailBody .= "$Name = $Value\n";
  }
mail('billing@mysite.com', 'Payment', $MailBody);
?>

A similar technique could be used to save the data in a file.

Credit Card validation

We cannot completely validate a credit card without running it through a Web server that handles credit card transactions. However, we can perform a check to make sure the number is well formed before we try and process it. If the number fails the test, we know that it isn't a valid credit card number.

We can test the following:

• Major credit cards have 13-16 digits
• First four digits indicate type of card (VISA, MC, AMEX, etc.)
• Credit card numbers are encoded with a "Check Digit". A check digit is the last digit that validates the authenticity of the number. A special algorithm applied to the other digits of the number yields the check digit. By running the algorithm we can verify that the digitsmake a valid combination.

Checking Credit Card Type by First Four Digits

The first 4 digits	Card Issuer
3000 to 3059 3600 to 3699 3800 to 3889	Diners Club
3400 to 3499 3700 to 3799	American Express
3528 to 3589	JCB
3890 to 3899	Carte Blanche
4000 to 4999	Visa
5100 to 5599	MasterCard
5610	Australian BankCard
6011	Discover / Novus

*) Note: this table is incomplete and is used here only as a sample.

Credit Card Validation Script Sample (PHP)

<?php
echo IsCCNumberValid( '4111111111111111' );

function IsCCNumberValid( $a_CCNumber ) {

# --- Card Number has to have 13-16 digits
$NumDigits = strlen( $a_CCNumber );
if( $NumDigits < 13 or $NumDigits > 16 ) return false;

# --- First 4 digist must be within a certain range
$aAllValidFirst4Digits = array(
 array(4000,4999),
 array(3000,3059),
 array(3600,3699),
 array(3800,3889),
 array(3400,3499),
 array(3700,3799),
 array(3528,3589),
 array(3890,3899),
 array(5100,5599),
 array(5610,5610),
 array(6011,6011)
 );
$First4Digits = substr($a_CCNumber, 0, 4);
$First4DigitsOK = false;
foreach( $aAllValidFirst4Digits as $aV4D ) {
 if( $First4Digits >= $aV4D[0] and $First4Digits <= $aV4D[1] ) {
  $First4DigitsOK = true;
  break;
  }
 }
if( !$First4DigitsOK ) return false;

# --- Control sum of digits must be correct
$Checksum = 0;
for ($nPos = 1 - ($NumDigits % 2); $nPos < $NumDigits; $nPos += 2) {
 $Checksum += substr($a_CCNumber, $nPos, 1);
 }
for ($nPos = ($NumDigits % 2); $nPos < $NumDigits; $nPos += 2) {
 $Digit = intval(substr($a_CCNumber, $nPos, 1)) * 2;
 $Checksum += ($Digit < 10) ? $Digit : ($Digit - 9);
 }
return ($Checksum % 10 == 0);
}
?>