a credit card walks into a bar... (cristiano betta)

205
@cbetta A Credit Card Walks into a Bar... by Cristiano Betta 1 Developer Advocate @braintree_dev A talk on credit cards in eCommerce

Upload: future-insights

Post on 21-Jul-2015

335 views

Category:

Design


0 download

TRANSCRIPT

Page 1: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

A Credit Card Walks into a Bar...

by Cristiano Betta

1

Developer Advocate @braintree_dev

A talk on credit cards in eCommerce

Page 2: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 3: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 4: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Cristiano Betta

Developer Advocate Braintree_Dev.

Page 5: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 6: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 7: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 8: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Cristiano Betta

Developer Advocate Braintree_Dev.

Page 9: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Cristiano Betta

Developer Advocate Braintree_Dev.

Page 10: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Cristiano Betta

Developer Advocate Braintree_Dev.

Page 11: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 12: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta11

Page 13: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta12

Page 14: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 15: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 16: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

I have a Cat

Page 17: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Who has a “special” condition

Page 18: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta17

Page 19: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta17

Page 20: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

But he thinks he is the king of the house

Page 21: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 22: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Actually he has a kidney condition

Page 23: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

People always want to see more photos and

videos

Page 24: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

so...

Page 25: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

I wrote an application that...

Page 26: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

charges people money to see his face

Page 27: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 28: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 29: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 30: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 31: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 32: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 33: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 34: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 35: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 36: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 37: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 38: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 39: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

I know what you are thinking...

Page 40: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

I am an a**hole

Page 41: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

I am actually raising money for his kidney

surgery

Page 42: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

I promise!

Page 43: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 44: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 45: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

A Credit Card Walks into a Bar...

Page 46: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

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...”

Page 47: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

“interest”

Page 48: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

THANK YOU!

Page 49: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

I <3 U FOWD

Page 50: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

A Credit Card Walks into a Bar_

Page 51: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 52: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 53: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 54: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Things people should not do when building a Credit Card Form

Page 55: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 56: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Things I think you should not do when building a Credit Card Form

Page 57: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 58: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

baymard.com/lists/cart-abandonment-rate

Page 59: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 60: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

1.

Page 61: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Add a CAPTCHA

Page 62: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

CAPTCHACompletely Automated Public Turing test

to tell Computers and Humans Apart

Page 63: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 64: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 65: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 66: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 67: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta55

Page 68: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 69: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta57

Page 70: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

CAPTCHACompletely Automated Public Turing test

to tell Computers and Humans Apart

Page 71: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

CAPTCHACompletely Automated Process

That Causes Headaches and Anger

Page 72: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

2.

Page 73: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Ask users to register

Page 74: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Ask users to register ...before purchasing

Page 75: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 76: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 77: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 78: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 79: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 80: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 81: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 82: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 83: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 84: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 85: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 86: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 87: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 88: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

A Credit Card Form Walks into a Bar...

Page 89: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

the bartender says,

“Why do you keep coming in here day after day ?”

The credit card form looks at him miserably says

“I’m just looking for some..."

Page 90: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

“validation”

Page 91: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Don’t autodetect credit card type

Page 92: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 93: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 94: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 95: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

* totally copied from Wikipedia

Page 96: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 97: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 98: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 99: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 100: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 101: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta89

jquerycreditcardvalidator.com

Page 102: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta90

creditcardjs.com

Page 103: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta91

www.lukew.com/ff/entry.asp?1667

Page 104: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta91

www.lukew.com/ff/entry.asp?1667

Page 105: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

I <3 Braintree

Page 106: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

obviously...

Page 107: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 108: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 109: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 110: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

3.

Page 111: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

C.V.Who?

Page 112: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 113: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 114: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 115: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 116: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 117: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 118: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

jessepollak.github.io/card

Page 119: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 120: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 121: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 122: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

kenkeiter.com/skeuocard

Page 123: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 124: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 125: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 126: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 127: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 128: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 129: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

4.

Page 130: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

You don’t format dates as they are on my card

Page 131: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 132: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 133: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 134: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

5.

Page 135: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

5.

Page 136: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 137: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

A Credit Card Form Walks into a Bar...

Page 138: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

he tries to pick up someone at the bar,

They turn him down.

The credit card form looks at the bartender and says

“Well, this is awkward normally I’m

the one who..."

Page 139: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

“Declines”

Page 140: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

5.

Page 141: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

You don’t validate my card number inline

Page 142: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Luhn Algorithm

Page 143: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

4217 6511 1111 1119

Page 144: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

4217 6511 1111 1119

9111 1111 1156 7124

Page 145: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

4217 6511 1111 1119

9111 1111 1156 7124

9212 1212 1213 7228

Page 146: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

14 + 6 + 11 + 19 = 50

4217 6511 1111 1119

9111 1111 1156 7124

9212 1212 1253 7228

Page 147: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

50 % 10 == 0 ?

4217 6511 1111 1119

14 + 6 + 11 + 19 = 50

9111 1111 1156 7124

9212 1212 1253 7228

Page 148: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 149: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 150: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 151: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 152: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 153: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 154: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta141

Page 155: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta142

Page 156: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

6.

Page 157: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

6.

Page 158: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

5b.

Page 159: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

You don’t know your limits!

Page 160: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Card! Number of Digits!

AMEX! 15!

Visa! 13 or 16!

MasterCard! 16!

Discover! 16!

Page 161: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta148

Page 162: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta149

Page 163: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta150

Page 164: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta151

Page 165: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta152

Page 166: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta153

Page 167: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

6.

Page 168: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

You don’t remember me

Page 169: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta156

Page 170: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta157

Page 171: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta158

Page 172: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta159

Page 173: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

7.

Page 174: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

You remember too many details!

Page 175: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

And then you lose them!

Page 176: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

2014

Page 177: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

2014Home Depot 56M

Page 178: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

2014Home Depot 56M JP Morgan Chase 76M

Page 179: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

2014Home Depot 56M JP Morgan Chase 76M Staples 1.6M

Page 180: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Tokenization

Page 181: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 182: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 183: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 184: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 185: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta166

Page 186: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

A Credit Card Form Walks into a Bar...

Page 187: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

the bartender says,

“You are new to this joint aren’t you?”

The credit card form looks at him and says

“Yeah, I just..."

Page 188: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

“Discovered it”

Page 189: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

8.

Page 190: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

You have a “reset” button

Page 191: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 192: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 193: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

9.

Page 194: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Where was I again?

Page 195: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 196: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 197: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 198: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

One more joke?

Page 199: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

An American Express Walks into a Bar in Moscow...

Page 200: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

the bartender says,

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

Page 201: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

“VISA”

Page 202: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Page 203: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

baddonationforms.tumblr.com

Page 204: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Cristiano Betta

Developer Advocate Braintree_Dev.

[email protected]

Page 205: A Credit Card Walks Into a Bar... (Cristiano Betta)

@cbetta

Cristiano Betta

Developer Advocate Braintree_Dev.

[email protected]