convergese - making credit card forms beautiful

Making Credit Card FormsBeautiful

A Talk on Credit Card FormsBy Justin Woo

@jzwoo | [email protected]

Justin Woo

[Developer Advocate]Venmo + Braintree + PayPal

[email protected]@jzwoo

mailto:[email protected]

Justin Woo

[Developer Advocate]Payment Geek



A Credit Card Form walks into a bar……


he says to the bartender,

“I’ve been having a hard time meeting people”

the bartender says:

“Wait, aren’t you supposed to be good at generating…”

“interest”

THANK YOU!




A series of Bad Jokes….By Justin Woo


8 Things Justin thinks merchants

should not* do when trying to make him

buy more stuff


Add a Captcha


2.


Ask users to register…

before purchasing


Shoppers who have cited ‘not

wanting to create an account’

with merchant as reason for

cart abandonment. Source: Fifth Gear

14%

@jzwoo

2b.


Not allow me to store my

Credit Card info


An American Express walks into a bar in Moscow……

the bartender says,

“Sorry mate,You aren’t allowed in here without a ….”

“Visa”


Not Auto-detecting Credit Card Type


*Blatant copy of Wikipedia

jquerycreditcardvalidator.com/


http://jquerycreditcardvalidator.com/





creditcardjs.com/





3b.


You lost me at the Card Security

Number


http://jessepollak.github.io/card/


http://kenkeiter.com/skeuocard/


No ValidatedCredit Card # field

Inline


Luhn algorithm

4217 6511 1111 1119


4217 6511 1111 1119

9111 1111 1165 7124


4217 6511 1111 1119

9111 1111 1165 7124

9212 1212 1260 7228


4217 6511 1111 1119

9111 1111 1165 7124

9212 1212 1260 7228

14 + 6 + 11 + 19 = 50


4217 6511 1111 1119

9111 1111 1165 7124

9212 1212 1260 7228

14 + 6 + 11 + 19 = 50

50 % 10 == 0?@jzwoo | [email protected]

You don’t even limit my digits

Not limiting the number of digits

Card Number of Digits

AMEX 15

Visa 13 or 16

MasterCard 16

Discover 16

@jzwoo

http://zdfs.github.io/toscani/paymentInfo/index.html


Live Demo!

I Have a Dog

Who is Blind…BUT

Thinks he can see?!?!

People always want to pet him..

especially kids!!!


I wrote an application that….


charges people when they want to pet him


I know what you are thinking


I’m an a**hole


I’m actually trying to raise money for his

eye surgery


I promise!!!


6.


Not show appropriate keyboard layouts


http://mobileinputtypes.com/


Not disable auto-correct when appropriate


7.


Not provide me a calendar view when

selecting dates


Make it difficult to enter Credit Card info

on a mobile device


Uber


JOIN ME


A Credit Card walks into a bar……

the bartender says,

“I haven’t seen you in a while”

The credit card looks at him and says:

“Yeah, I had to go to jail. I was”

“Charged with bad humour”


Justin Woo

[Developer Advocate/Payment Geek]Venmo + Braintree + PayPal



convergese - making credit card forms beautiful

Design

credit card info

credit card type

validatedcredit card

credit card formsby

card security number

things justin

american express walks

bara series of bad jokes