This shouldn’t come as a surprise, but you’re probably collecting information from your customers that you don’t need.
Sure, if you’re sending a physical product, you’ll definitely need to collect a shipping address. But if you’re doing pre-sales, don’t collect the shipping address right away. Let your customers select their shipping address when you’re actually ready to ship the items. It could be 1–3 months (or longer) before you’re shipping products, and customers may be moving in between then.
If you’re collecting a billing address, think about whether it’s worthwhile. Unless you’re selling items for over $100, are doing direct mail, have a high rate of fraud, or are even checking your customers AVS results (whether their address and zip code are a match), you can probably skip the billing address.
The phone number is a great example of a field you probably don’t need. You can just as easily contact your customers via email, which is ultimately better for everyone. Unless you’re doing text message marketing (which is awfully annoying), go ahead and hide this field. When was the last time you called your customers anyway?
2. Use IP geolocation to pre-populate the State and Country fields.
If you are collecting a customers billing and shipping information, at least make it easy for them. Nobody wants to look at a form, completely blank, with a ton of fields for your street address, zip code, city, state, country, etc… IP geolocation is incredibly accurate for both the State and Country fields. This is an easy one, as there are already dozens of services (both free and paid) that you can grab the geolocation information from, such as IP API, IPInfoDB, Free GeoIP, and of course MaxMind (which you should be using for fraud detection anyway). At CartSoft, we use the MaxMind database plus a proprietary blend of machine learning to determine the most accurate State and Country combinations.
Geo IP isn’t as accurate as GPS information, however it doesn’t require the annoying permissions approval that HTML5 Geolocation does. Some databases even offer city-level results, though be warned that they’re not nearly as accurate, and almost never accurate for mobile devices. Customers aren’t going to be excited about having to remove the wrong city that you pre-populated their form with.
3. Make sure your fields are setup for autocomplete.
Autocomplete, or “HTML5 Autofill” is a surprisingly easy way to nudge your customers along during the checkout process. Modern browsers are great at autocompleting for the basics, like your street address, but cause issues when they try to differentiate between billing and shipping addresses, state fields (and whether to include the abbreviation or the name), and other information.
Luckily, you can help them along by following the HTML5 autofill spec.
Here’s a quick chart to help your developers out.
Simple, right? And now your autofill forms will actually work. You can also add “shipping” and “billing” to the autocomplete tag to help differentiate between the billing and shipping addresses.
4. Enable credit card scanning on mobile devices.
Everyone knows that your checkout pages need to be responsive, but another great technique to help customers out is the “Scan Credit Card” option, available since iOS 8. If you’ve ever added a card to Apple Pay, you’ll see how surprisingly reliable the card number recognition is on iOS.
This is what the “Scan Credit Card” option looks like in iOS 8.
Theres a few ways to enable this, but the most reliable is simply adding ‘placeholder=”Card Number”’ to the card number field on your checkout page.
5. Simplify your credit card form as much as possible.
The credit card fields are the most critical part of your checkout page. The “card type” field is by far the most unnecessary field. You can easily determine the card type just by checking the first few digits of the card number. For example, every Visa card starts with a “4”. All of the other major credit cards have an established pattern too, which makes the “card type” field incredibly worthless.
The expiration field is another tricky one. Most checkout forms actually have a dropdown for the expiration month and a separate drop down for the expiration year. There’s been a ton of research on the best format for the expiration field, and it seems that asking for the expiration in the format “MM / YY” (the same format as on your card) works best. If at all possible, make the expiration field a text box instead of a drop down box. That works significantly better than displaying the month in name format, such as “January”.
Keeping with the theme of “displaying it like the card does”, adding spaces between the card number helps with readability, which decreases the number of declines you’ll have from invalid cards.
If all of this advice seems like a ton to add just for a credit card form — it is. Thankfully the wonderful folks over at Stripe have open-sourced a wonderful library called jQuery Payment that you can use to format your credit card fields using all the great tips I’ve outlined above.
It should come as no surprise that CartSoft has already implemented each of these tips on our checkout forms. Whether you’re selling digital products, physical products, subscriptions, or some other crazy combination, our tool lets you create a simple checkout page thats integrated with the marketing tools you’re already using.
