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

3D Printing And Designing Final Report.pdf
3D Printing And Designing Final Report.pdf3D Printing And Designing Final Report.pdf
3D Printing And Designing Final Report.pdfSwaraliBorhade
 
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree 毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree ttt fff
 
Passbook project document_april_21__.pdf
Passbook project document_april_21__.pdfPassbook project document_april_21__.pdf
Passbook project document_april_21__.pdfvaibhavkanaujia
 
Architecture case study India Habitat Centre, Delhi.pdf
Architecture case study India Habitat Centre, Delhi.pdfArchitecture case study India Habitat Centre, Delhi.pdf
Architecture case study India Habitat Centre, Delhi.pdfSumit Lathwal
 
NATA 2024 SYLLABUS, full syllabus explained in detail
NATA 2024 SYLLABUS, full syllabus explained in detailNATA 2024 SYLLABUS, full syllabus explained in detail
NATA 2024 SYLLABUS, full syllabus explained in detailDesigntroIntroducing
 
call girls in Harsh Vihar (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Harsh Vihar (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️call girls in Harsh Vihar (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Harsh Vihar (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️9953056974 Low Rate Call Girls In Saket, Delhi NCR
 
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCRdollysharma2066
 
Kindergarten Assessment Questions Via LessonUp
Kindergarten Assessment Questions Via LessonUpKindergarten Assessment Questions Via LessonUp
Kindergarten Assessment Questions Via LessonUpmainac1
 
shot list for my tv series two steps back
shot list for my tv series two steps backshot list for my tv series two steps back
shot list for my tv series two steps back17lcow074
 
Introduction-to-Canva-and-Graphic-Design-Basics.pptx
Introduction-to-Canva-and-Graphic-Design-Basics.pptxIntroduction-to-Canva-and-Graphic-Design-Basics.pptx
Introduction-to-Canva-and-Graphic-Design-Basics.pptxnewslab143
 
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)jennyeacort
 
办理学位证(NTU证书)新加坡南洋理工大学毕业证成绩单原版一比一
办理学位证(NTU证书)新加坡南洋理工大学毕业证成绩单原版一比一办理学位证(NTU证书)新加坡南洋理工大学毕业证成绩单原版一比一
办理学位证(NTU证书)新加坡南洋理工大学毕业证成绩单原版一比一A SSS
 
PORTAFOLIO 2024_ ANASTASIYA KUDINOVA
PORTAFOLIO   2024_  ANASTASIYA  KUDINOVAPORTAFOLIO   2024_  ANASTASIYA  KUDINOVA
PORTAFOLIO 2024_ ANASTASIYA KUDINOVAAnastasiya Kudinova
 
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full NightCall Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full Nightssuser7cb4ff
 
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一diploma 1
 
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024CristobalHeraud
 
306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social MediaD SSS
 
VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130
VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130
VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130Suhani Kapoor
 
Design Portfolio - 2024 - William Vickery
Design Portfolio - 2024 - William VickeryDesign Portfolio - 2024 - William Vickery
Design Portfolio - 2024 - William VickeryWilliamVickery6
 

Recently uploaded (20)

3D Printing And Designing Final Report.pdf
3D Printing And Designing Final Report.pdf3D Printing And Designing Final Report.pdf
3D Printing And Designing Final Report.pdf
 
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree 毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
毕业文凭制作#回国入职#diploma#degree澳洲弗林德斯大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
 
Passbook project document_april_21__.pdf
Passbook project document_april_21__.pdfPassbook project document_april_21__.pdf
Passbook project document_april_21__.pdf
 
Architecture case study India Habitat Centre, Delhi.pdf
Architecture case study India Habitat Centre, Delhi.pdfArchitecture case study India Habitat Centre, Delhi.pdf
Architecture case study India Habitat Centre, Delhi.pdf
 
NATA 2024 SYLLABUS, full syllabus explained in detail
NATA 2024 SYLLABUS, full syllabus explained in detailNATA 2024 SYLLABUS, full syllabus explained in detail
NATA 2024 SYLLABUS, full syllabus explained in detail
 
call girls in Harsh Vihar (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Harsh Vihar (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️call girls in Harsh Vihar (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Harsh Vihar (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
 
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
 
Kindergarten Assessment Questions Via LessonUp
Kindergarten Assessment Questions Via LessonUpKindergarten Assessment Questions Via LessonUp
Kindergarten Assessment Questions Via LessonUp
 
shot list for my tv series two steps back
shot list for my tv series two steps backshot list for my tv series two steps back
shot list for my tv series two steps back
 
Introduction-to-Canva-and-Graphic-Design-Basics.pptx
Introduction-to-Canva-and-Graphic-Design-Basics.pptxIntroduction-to-Canva-and-Graphic-Design-Basics.pptx
Introduction-to-Canva-and-Graphic-Design-Basics.pptx
 
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)
 
办理学位证(NTU证书)新加坡南洋理工大学毕业证成绩单原版一比一
办理学位证(NTU证书)新加坡南洋理工大学毕业证成绩单原版一比一办理学位证(NTU证书)新加坡南洋理工大学毕业证成绩单原版一比一
办理学位证(NTU证书)新加坡南洋理工大学毕业证成绩单原版一比一
 
PORTAFOLIO 2024_ ANASTASIYA KUDINOVA
PORTAFOLIO   2024_  ANASTASIYA  KUDINOVAPORTAFOLIO   2024_  ANASTASIYA  KUDINOVA
PORTAFOLIO 2024_ ANASTASIYA KUDINOVA
 
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full NightCall Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
 
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
 
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
 
Cheap Rate ➥8448380779 ▻Call Girls In Iffco Chowk Gurgaon
Cheap Rate ➥8448380779 ▻Call Girls In Iffco Chowk GurgaonCheap Rate ➥8448380779 ▻Call Girls In Iffco Chowk Gurgaon
Cheap Rate ➥8448380779 ▻Call Girls In Iffco Chowk Gurgaon
 
306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media
 
VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130
VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130
VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130
 
Design Portfolio - 2024 - William Vickery
Design Portfolio - 2024 - William VickeryDesign Portfolio - 2024 - William Vickery
Design Portfolio - 2024 - William Vickery
 

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