Handling Online Payments Part 1 - Basic Information and Our Form
bystymiee01-05-201106:47 AM - edited 10-20-201110:00 AM
Accepting payment through a website is easily the most common reason why developers are reading this blog and visiting the Authorize.Net developer center. Doing so through a web form is not as easy as it seems and most implementations lack some, if not many, of the basic usability, accessibility, and security features a payment form should have. To help eliminate these shortcomings in your next payment form I am going to walk through the basics, and not-so-basics, of a good payment form in this multiple part blog series. Although the coding examples will be in PHP the concepts can be applied in any programming language.
Part I - Capturing Basic Information
In the first article of this series we are going to start with the basic structure of our form. We'll cover what information we want to capture and why we need to capture it.
What Do We Want To Capture? And Why Should We Capture It?
There are four basic pieces of information we will want to capture when accepting a payment online. They are:
The billing address is the address the customer has associated with the credit card they will be making payment with. This address is the same address the credit card statement is mailed to each month. This will comprise of two lines for the street address, city, state, and zip code. We will also include a field each for the first and last name. We will want this as two separate fields as many users will leave out their first or last name if not forced to provide it. I have seen orders come in to websites with only one "name" field containing data like, "The Smith Family" and "Bob, Mary, Johnny, and Stacey".
We need to capture this information as it is used to perform Address Verification (AVS).
This is the address the customer wishes to have their order shipped to. It may or may not be the same as the billing address. This is important to collect as many customers wish to have their orders sent to a different address then their billing address for a variety of reasons including:
No one is at the billing address during normal delivery hours
The billing address is Post Office Box
It is a gift and being sent to the gift recipient
Credit card information
This encompasses the credit card number, expiration date, and CVV number for the credit card the customer is making their payment with.
If we need to contact the customer for any reason how will we do it? We will capture their email address and telephone number as these are the two quickest and easiest ways to contact a customer.
Now that we know what information we will want to capture we can properly construct our web form. We'll use HTML 4.01 strict since xHTML is no longer the direction the web is taking and HTML 5 is still being fleshed out (not to mention support is still lacking in most web browsers as of the writing of this post).
We want to use POST as opposed to GET as GET places the submitted form values in the URL which is seen in the browser address bar. Not only does this make that information susceptible to snooping but it allows it to be saved in a browser's history which can be searched through at a later time by another user of that computer.
We use MAXLENGTH
The MAXLENGTH attribute of the INPUT tag allows us to limit the amount of characters a customer may enter into a form field. Typically this value is equal to the length specified in the database field in which this information will be stored. By having this value set we help to prevent the user from submitting too much information and forcing them to correct it only after they submit the form which is inconvenient.
We use LABELs
The LABEL tag defines a label for an INPUT element. The LABEL tag does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the label element, it toggles the form element for which it is associated with.
This basic form will capture the four basic pieces of information we will need to handle our orders. Your web application may have additional pieces of information you wish to capture. Naturally you can modify this form to accept them. Additionally, sometimes there is no product to be shipped, like when a donation is being made. In those cases the shipping address can be removed.
The Next Step
Now that we know what information we will want to capture, and we have our web page and form constructed, we will focus on receiving the submitted information. Sure, that sounds easy enough. Yet many developers fail to do this simple task well. Our next post will show how this is done using best practices.