The anatomy of a credit card form

1-TrMa4_An7Rh8QuC4v1LbUg

At Wave, our Invoice product enables business owners to create and send invoices to their customers, and to have those invoices paid via credit card. My job was to design the credit card form, given a set of business requirements and constraints. This post is about the design considerations our team explored to arrive at the finished product.

In the screenshot above you can see a few takes for ensuring the user that the form is safe and secure.

The anatomy of a credit card form →

Coin

Coin is a connected device that contains all your credit, debit, gift, loyalty and membership cards in one place. Instead of carrying all those cards in your wallet just carry your Coin. The best part? Coin works anywhere those cards are accepted. Dip, swipe or slide; Coin knows all the moves.

Too bad it doesn’t support chip based cards though, but it will in future versions. When that version lands: SHUT UP AND TAKE MY MONEY!

Coin →

Loop – The world’s most accepted wallet

Loop is the first mobile wallet to let you securely store all your cards in your phone and let you pay at more than 90% of retailers.

Wirelessly perform a virtual swipe through the card slot and boom: you’ve just paid using your phone. Too bad they don’t ship outside the US or I’d back this one 🙁

Loop →
Loop on Kickstarter →

Stripe

Stripe is a simple, developer-friendly way to accept payments online.

It’s as easy as making one simple curl request

$ curl https://api.stripe.com/v1/charges \
   -u vtUQeOtUnYr7PGCLQ96Ul4zqpDUO4sOE: \
   -d amount=400 \
   -d currency=usd \
   -d "description=Charge for test@example.com" \
   -d "card[number]=4242424242424242" \
   -d "card[exp_month]=12" \
   -d "card[exp_year]=2012" \
   -d "card[cvc]=123"

Stripe →