Tips for Minimizing Signup Friction When Using Credit Cards
In the world of subscription commerce, one key to success is providing a frictionless signup experience. Once prospects decide they’re ready to subscribe, you want to make sure that the process is as easy as it can be for them. Removing steps that aren’t necessary and ensuring that your signup form meets the highest standards of usability and security can make the difference between a prospect who converts and one who abandons before the transaction is complete.
Here’s a few tips from the experts at Recurly.
Don't ask for the credit card type
. The first 1 or 2 digits indicate the card type. For example, Visa cards always begin with a “4”.
As of October 2016,
MasterCard numbers can now begin with a "2"
(in addition to a "5"). Be sure that your credit card format accepts these new numbers.
For developers:
Validate the card number against the
, using JavaScript. This helps prevents the customer from submitting the form with an incorrect card number. Several jQuery plugins can perform this validation, properly format the card number (replace dashes with spaces, etc.), and allow for a natural input/typing process.
Make the expiration date easy to type or select
. The card's expiration date is printed numerically, so don't display a drop down with only month names. Better yet, use a jQuery plugin that makes it easy to type the card expiration date.
To minimize fraud,
collect the CVV, street address (line 1 only) and postal code
. Street address and postal code are used for address validation. City, state, and country are not validated (except for advanced AVS, which almost no one uses).
Ensure your order form works with popular auto-fill software
like 1Password and Google Chrome auto-fill. It's amazing how many sites block copy/paste or auto-fill when they attempt to validate input on each keystroke. This prevents auto-fill from quickly filling out a form which slows things down and can frustrate your prospects.
Don't display the error message that comes from the gateway
. Often times, gateways (other than Recurly, of course!) will return an obtuse error message formatted for a 12-character POS machine or otherwise not meant to be shown directly to the customer. Instead, display a helpful decline message in your customer's language.
Similarly,
display the correct error message
. A customer can have a valid card number that might only work for travel & entertainment, but not electronics. It's important then to tell the customer to try a different card, rather than retry because it was declined. Other decline reasons need similar messages to help the customer fix the issue: insufficient funds to complete the transaction, temporary hold -- contact your bank, or address or CVV does not match.
Want more tips? Read our blog posts on various best practices for subscription billing, payments, promotions, and more.