SlideShare a Scribd company logo
1 of 183
Making Credit Card Forms
Beautiful
A Talk on Credit Card Forms
By Justin Woo
@jzwoo | juwoo@paypal.com
Justin Woo
[Developer Advocate]
Venmo + Braintree + PayPal
juwoo@paypal.com
@jzwoo
Justin Woo
[Developer Advocate]
Payment Geek
juwoo@paypal.com
@jzwoo
@jzwoo | juwoo@paypal.com
A Credit Card Form walks
into a bar……
@jzwoo | juwoo@paypal.com
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!
@jzwoo | juwoo@paypal.com
Making Credit Card Forms
Beautiful
A Credit Card Form walks
into a bar……
@jzwoo | juwoo@paypal.com
Making Credit Card Forms
Beautiful
A Credit Card Form walks
into a bar……
A series of Bad Jokes….
By Justin Woo
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
8 Things
Justin thinks merchants
should not* do
when trying to make him
buy more stuff
@jzwoo | juwoo@paypal.com
1.
Add a Captcha
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
2.
@jzwoo | juwoo@paypal.com
Ask users to register…
before purchasing
@jzwoo | juwoo@paypal.com
Shoppers who have cited ‘not
wanting to create an account’ with
merchant as reason for cart
abandonment.
Source: Fifth Gear
14%
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
@jzwoo
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
2b.
@jzwoo | juwoo@paypal.com
Not allow me to store
my
Credit Card
info
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
An American Express walks
into a bar in Moscow……
the bartender says,
“Sorry mate,
You aren’t allowed in here
without a ….”
“Visa”
@jzwoo | juwoo@paypal.com
3.
Not Auto-detecting
Credit Card Type
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
*Blatant copy of Wikipedia
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
jquerycreditcardvalidator.com/
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
creditcardjs.com/
3b.
@jzwoo | juwoo@paypal.com
You lost me at the
Card Security Number
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
http://jessepollak.github.io/card/
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
http://kenkeiter.com/skeuocard/
@jzwoo | juwoo@paypal.com
4.
No Validated
Credit Card # field
Inline
@jzwoo | juwoo@paypal.com
Luhn algorithm
4217 6511 1111 1119
@jzwoo | juwoo@paypal.com
4217 6511 1111 1119
9111 1111 1165 7124
@jzwoo | juwoo@paypal.com
4217 6511 1111 1119
9111 1111 1165 7124
9212 1212 1260 7228
@jzwoo | juwoo@paypal.com
4217 6511 1111 1119
9111 1111 1165 7124
9212 1212 1260 7228
@jzwoo | juwoo@paypal.com
4217 6511 1111 1119
9111 1111 1165 7124
9212 1212 1260 7228
14 + 6 + 11 + 19 = 50
@jzwoo | juwoo@paypal.com
4217 6511 1111 1119
9111 1111 1165 7124
9212 1212 1260 7228
14 + 6 + 11 + 19 = 50
50 % 10 == 0?
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
5.
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
@jzwoo | juwoo@paypal.com
http://zdfs.github.io/toscani/paymen
tInfo/index.html
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
Live Demo!
I Have a Dog
Who is Blind…BUT
Thinks he can see?!?!
@jzwoo | juwoo@paypal.com
People always want to pet
him..
especially kids!!!
@jzwoo | juwoo@paypal.com
I wrote an application
that….
@jzwoo | juwoo@paypal.com
charges people when they
want to pet him
@jzwoo | juwoo@paypal.com
I know what you are
thinking
@jzwoo | juwoo@paypal.com
I’m an a**hole
@jzwoo | juwoo@paypal.com
I’m actually trying to raise
money for his eye surgery
@jzwoo | juwoo@paypal.com
I promise!!!
@jzwoo | juwoo@paypal.com
6.
@jzwoo | juwoo@paypal.com
Not show appropriate
keyboard layouts
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
http://mobileinputtypes
.com/
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
Not disable auto-correct
when appropriate
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
<input type="text" autocorrect="off" />
@jzwoo | juwoo@paypal.com
7.
@jzwoo | juwoo@paypal.com
Not provide me a calendar
view when selecting dates
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
8.
Make it difficult to enter
Credit Card info on a
mobile device
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
Uber
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
JOIN ME
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
@jzwoo | juwoo@paypal.com
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”
@jzwoo | juwoo@paypal.com
Justin Woo
[Developer Advocate/Payment Geek]
Venmo + Braintree + PayPal
juwoo@paypal.com
@jzwoo

More Related Content

More from Justin Woo

Introduction to node
Introduction to nodeIntroduction to node
Introduction to nodeJustin Woo
 
Cracking Mobile Commerce
Cracking Mobile CommerceCracking Mobile Commerce
Cracking Mobile CommerceJustin Woo
 
Confoo - Making Payments Fun
Confoo - Making Payments FunConfoo - Making Payments Fun
Confoo - Making Payments FunJustin Woo
 
LA Mobile Camp
LA Mobile CampLA Mobile Camp
LA Mobile CampJustin Woo
 
Prodconf - A Credit Card Form walks into a Bar
Prodconf - A Credit Card Form walks into a BarProdconf - A Credit Card Form walks into a Bar
Prodconf - A Credit Card Form walks into a BarJustin Woo
 

More from Justin Woo (6)

Introduction to node
Introduction to nodeIntroduction to node
Introduction to node
 
Cracking Mobile Commerce
Cracking Mobile CommerceCracking Mobile Commerce
Cracking Mobile Commerce
 
Mrc 2015
Mrc 2015Mrc 2015
Mrc 2015
 
Confoo - Making Payments Fun
Confoo - Making Payments FunConfoo - Making Payments Fun
Confoo - Making Payments Fun
 
LA Mobile Camp
LA Mobile CampLA Mobile Camp
LA Mobile Camp
 
Prodconf - A Credit Card Form walks into a Bar
Prodconf - A Credit Card Form walks into a BarProdconf - A Credit Card Form walks into a Bar
Prodconf - A Credit Card Form walks into a Bar
 

Recently uploaded

The Art of Batik, template ppt aesthetic
The Art of Batik, template ppt aestheticThe Art of Batik, template ppt aesthetic
The Art of Batik, template ppt aestheticTiaFebriani
 
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...amitlee9823
 
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...SUHANI PANDEY
 
VVIP Pune Call Girls Dange Chowk (8250192130) Pune Escorts Nearby with Comple...
VVIP Pune Call Girls Dange Chowk (8250192130) Pune Escorts Nearby with Comple...VVIP Pune Call Girls Dange Chowk (8250192130) Pune Escorts Nearby with Comple...
VVIP Pune Call Girls Dange Chowk (8250192130) Pune Escorts Nearby with Comple...Call Girls in Nagpur High Profile
 
Dubai Call Girls Pro Domain O525547819 Call Girls Dubai Doux
Dubai Call Girls Pro Domain O525547819 Call Girls Dubai DouxDubai Call Girls Pro Domain O525547819 Call Girls Dubai Doux
Dubai Call Girls Pro Domain O525547819 Call Girls Dubai Douxkojalkojal131
 
CALL ON ➥8923113531 🔝Call Girls Kalyanpur Lucknow best Female service 🧵
CALL ON ➥8923113531 🔝Call Girls Kalyanpur Lucknow best Female service  🧵CALL ON ➥8923113531 🔝Call Girls Kalyanpur Lucknow best Female service  🧵
CALL ON ➥8923113531 🔝Call Girls Kalyanpur Lucknow best Female service 🧵anilsa9823
 
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...kumaririma588
 
Fashion trends before and after covid.pptx
Fashion trends before and after covid.pptxFashion trends before and after covid.pptx
Fashion trends before and after covid.pptxVanshNarang19
 
CBD Belapur Individual Call Girls In 08976425520 Panvel Only Genuine Call Girls
CBD Belapur Individual Call Girls In 08976425520 Panvel Only Genuine Call GirlsCBD Belapur Individual Call Girls In 08976425520 Panvel Only Genuine Call Girls
CBD Belapur Individual Call Girls In 08976425520 Panvel Only Genuine Call Girlsmodelanjalisharma4
 
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...Call Girls in Nagpur High Profile
 
Peaches App development presentation deck
Peaches App development presentation deckPeaches App development presentation deck
Peaches App development presentation decktbatkhuu1
 
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)amitlee9823
 
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779Delhi Call girls
 
DragonBall PowerPoint Template for demo.pptx
DragonBall PowerPoint Template for demo.pptxDragonBall PowerPoint Template for demo.pptx
DragonBall PowerPoint Template for demo.pptxmirandajeremy200221
 
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdf
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdfThe_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdf
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdfAmirYakdi
 
Editorial design Magazine design project.pdf
Editorial design Magazine design project.pdfEditorial design Magazine design project.pdf
Editorial design Magazine design project.pdftbatkhuu1
 

Recently uploaded (20)

The Art of Batik, template ppt aesthetic
The Art of Batik, template ppt aestheticThe Art of Batik, template ppt aesthetic
The Art of Batik, template ppt aesthetic
 
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
 
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
 
young call girls in Pandav nagar 🔝 9953056974 🔝 Delhi escort Service
young call girls in Pandav nagar 🔝 9953056974 🔝 Delhi escort Serviceyoung call girls in Pandav nagar 🔝 9953056974 🔝 Delhi escort Service
young call girls in Pandav nagar 🔝 9953056974 🔝 Delhi escort Service
 
VVIP Pune Call Girls Dange Chowk (8250192130) Pune Escorts Nearby with Comple...
VVIP Pune Call Girls Dange Chowk (8250192130) Pune Escorts Nearby with Comple...VVIP Pune Call Girls Dange Chowk (8250192130) Pune Escorts Nearby with Comple...
VVIP Pune Call Girls Dange Chowk (8250192130) Pune Escorts Nearby with Comple...
 
Dubai Call Girls Pro Domain O525547819 Call Girls Dubai Doux
Dubai Call Girls Pro Domain O525547819 Call Girls Dubai DouxDubai Call Girls Pro Domain O525547819 Call Girls Dubai Doux
Dubai Call Girls Pro Domain O525547819 Call Girls Dubai Doux
 
CALL ON ➥8923113531 🔝Call Girls Kalyanpur Lucknow best Female service 🧵
CALL ON ➥8923113531 🔝Call Girls Kalyanpur Lucknow best Female service  🧵CALL ON ➥8923113531 🔝Call Girls Kalyanpur Lucknow best Female service  🧵
CALL ON ➥8923113531 🔝Call Girls Kalyanpur Lucknow best Female service 🧵
 
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...Verified Trusted Call Girls Adugodi💘 9352852248  Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
 
Fashion trends before and after covid.pptx
Fashion trends before and after covid.pptxFashion trends before and after covid.pptx
Fashion trends before and after covid.pptx
 
CBD Belapur Individual Call Girls In 08976425520 Panvel Only Genuine Call Girls
CBD Belapur Individual Call Girls In 08976425520 Panvel Only Genuine Call GirlsCBD Belapur Individual Call Girls In 08976425520 Panvel Only Genuine Call Girls
CBD Belapur Individual Call Girls In 08976425520 Panvel Only Genuine Call Girls
 
꧁❤ Hauz Khas Call Girls Service Hauz Khas Delhi ❤꧂ 9999965857 ☎️ Hard And Sex...
꧁❤ Hauz Khas Call Girls Service Hauz Khas Delhi ❤꧂ 9999965857 ☎️ Hard And Sex...꧁❤ Hauz Khas Call Girls Service Hauz Khas Delhi ❤꧂ 9999965857 ☎️ Hard And Sex...
꧁❤ Hauz Khas Call Girls Service Hauz Khas Delhi ❤꧂ 9999965857 ☎️ Hard And Sex...
 
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
 
Peaches App development presentation deck
Peaches App development presentation deckPeaches App development presentation deck
Peaches App development presentation deck
 
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
 
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
 
Call Girls Service Mukherjee Nagar @9999965857 Delhi 🫦 No Advance VVIP 🍎 SER...
Call Girls Service Mukherjee Nagar @9999965857 Delhi 🫦 No Advance  VVIP 🍎 SER...Call Girls Service Mukherjee Nagar @9999965857 Delhi 🫦 No Advance  VVIP 🍎 SER...
Call Girls Service Mukherjee Nagar @9999965857 Delhi 🫦 No Advance VVIP 🍎 SER...
 
DragonBall PowerPoint Template for demo.pptx
DragonBall PowerPoint Template for demo.pptxDragonBall PowerPoint Template for demo.pptx
DragonBall PowerPoint Template for demo.pptx
 
B. Smith. (Architectural Portfolio.).pdf
B. Smith. (Architectural Portfolio.).pdfB. Smith. (Architectural Portfolio.).pdf
B. Smith. (Architectural Portfolio.).pdf
 
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdf
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdfThe_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdf
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdf
 
Editorial design Magazine design project.pdf
Editorial design Magazine design project.pdfEditorial design Magazine design project.pdf
Editorial design Magazine design project.pdf
 

ConvergeSE - Making Credit Card Forms Beautiful

Editor's Notes

  1. Make a joke about Developer presenting at a Designer track
  2. If you can’t beat them join them
  3. How do you pay in uber? I know what you are thinking, wait justin do we pay in Uber?
  4. If you make it easy for me to pay, YES I will give you my money…
  5. United Wifi
  6. Show you how easy it is to integrate
  7. Here is where I demo Braintree integration
  8. Number then letters?
  9. Not possible to put dash