Exciting Payment UX with Interactive Credit Card
Paying with a card in physical stores is quite simple. You just need to enter your 4-digit code at the counter or the cashier just swipes your card and you are done. Quite simple.
Paying online is not that simple, as you are required to enter a lot info before confirming the payment. If you are an online shopper, probably you have seen lots of different forms.
Some of them are painless and the whole experience is quite smooth and intuitive. But some forms can be quite frustrating as they ask you to type manually not only the numbers, names and dates from your card but also your card type. Yes, there are still forms which require to choose whether your card is VISA, VISA Credit, Visa Debit, American Express or MasterCard.
Users do not like complicated and long forms. They want things to go smoothly and do payments right away.
Baymard Institute conducted a research about E-commerce Checkout and found out some interesting facts:
- 68.81% – average online shopping cart abandonment rate
- 27% of US online shoppers have abandoned an order in the past quarter solely due to a “too long / complicated checkout process”.
This means that 1 in 4 online shoppers decides not shop online at a particular website because of long and painful payment process.
Coping with abandoned shopping carts?
There are many ways to investigate where seems to be the problem in your case:
- Are you asking for too much information?
- How easy is for the users to add the needed information?
- Does your payment form have instant notifications when the info is wrong?
Figuring out the issue will help you offer your visitors better payment process.
Interactive Credit Card Plugin
Created by Jesse Pollak, this simple card plugin will improve significantly the user experience as it offers a simple and interactive way to fill in your card details.
Here are the pros of using this Card Plugin:
- No need to change your form (Card works as a drop in addition to your current credit card form. No need edit input names or HTML — you can leave everything as is.)
- Use just the CSS to style cards (Right now, card ships with pure-CSS cards for Mastercard, Visa, Discover, and American Express. You can see a demo usage here.)
Card Plugin Demo
Creating interactive experiences for truly boring tasks such as card filling in is respected and appreciated by the users. If it is smooth and painless, they will be back.
You may want to check: 7 reasons your website is not good enough