Handling Online Payments Part 11 - Finishing Up Our Payment Form
bystymiee08-08-201108:27 AM - edited 10-20-201109:55 AM
This is part eleven of a multi-part series on handling online payments.
In Part 1 of this series we identified our goals (creating a payment form that was usable, accessible, and secure) and began by creating the form we will use to capture payment information. In Part 2 of this series we continued this process by exploring how we will handle the data submitted by that form. In Part 3 of this series we took the data received and sanitized in Part 2 and validated that it was in a format we required. In Part 4 of this series we took the errors we found in Part 3 and displayed them in a user-friendly format to minimize cart abandonment. In Part 5 of this series we processed the payment and handled the response returned to us whether it be approved, declined, or an error completing the transaction process.
In this installment we will make a few final tweaks to finish our form.
Placing Our Stylesheet In An External File
The last installment of this series we improved our PHP code by placing our functions in a separate file. This made our form easier to maintain by removing the clutter created by having so much code in one place. We are going to apply this same logic to our CSS rules. We will take our CSS rules and place them in a file called stylesheet.css. We will then use the HTML <link> tag to include the stylesheet in our page.
Removing the CSS rules simplified our form by removing 62 lines of code and replacing it with only one. You will see larger gains if you create your own rules to custom the form even further then we have in this series. An added benefit of placing the CSS rules in an external file is browsers will cache the stylesheet so if the user has to return to the form for any reason, such as encountering an error or making a second purchase, the page will load faster because the browser does not have to request the stylesheet again.
Where Are The CVV Numbers?
By now you almost certainly have seen a payment form that requests either "the security code" for your credit card, also known as the CVV number. (If you are unsure of what this is, see Part 3 of this series for more information). It has become commonplace to ask for this when accepting a credit card payment online. However ubiquitous this may seem we want to err on the side of caution and assume our users do not know where to find this number. To help them along we can display sample credit cards that show where these numbers are located.
Below is the code we will use to do this (the images will be included in our sample code):
<label for="cvv"<?php if (array_key_exists('cvv', $errors)) echo ' class="labelerror"'; ?>>Security Code</label>
<input type="text" name="cvv" id="cvv" autocomplete="off" value="" maxlength="4">
<img src="/images/3digit.png" width="180" height="113" alt="Three digit CVV number on the back of the credit card">
<img src="/images/4digit.png" width="180" height="113" alt="Four digit CVV number on the front of the credit card">
Updated Payment Form
To see our new form with our new PHP code included just download the attachment at the end of this blog post. Don't forget to also download the PHP SDK.
Additonal Tips and Homework
This series may be over but that doesn't mean this form cannot be improved upon. Here are some suggestions for how you can make your own improvements:
Always use SSL with your payment form. Not only is it important to ensure the user's sensitive information, especially their credit card information, is safe from eavesdroppers. Just as important is that many users are trained to look for the lock icon or green address bar to see if the page is encrypted. They may not know how it is important. They just know they have to see it.