DevTalks Bucharest 2015 - A Credit Card Walks into a Bar...

My talk from DevTalks Bucharest 2015

Transcript

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

   View Slide

2. @cbetta
   @braintree_dev
   A Credit Card Form
   Walks into a Bar...
   A talk on credit cards in eCommerce
   

   View Slide

3. @cbetta
   @braintree_dev
   A Credit Card Form
   Walks into a Bar...
   A talk on credit cards in eCommerce
   A series of bad jokes
   Developer Advocate
   @braintree_dev
   by Cristiano Betta
   

   View Slide

4. @cbetta
   @braintree_dev
   

   View Slide

5. @cbetta
   @braintree_dev
   

   View Slide

6. @cbetta
   @braintree_dev
   A Credit Card
   Walks into a Bar...
   

   View Slide

7. @cbetta
   @braintree_dev
   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...”
   

   View Slide

8. @cbetta
   @braintree_dev
   “interest”
   

   View Slide

9. @cbetta
   @braintree_dev
   THANK YOU!
   

   View Slide

10. @cbetta
    @braintree_dev
    I <3 U Bucharest
    

    View Slide

11. @cbetta
    @braintree_dev
    A Credit Card
    Walks into a Bar_
    

    View Slide

12. @cbetta
    @braintree_dev
    I have a Cat
    

    View Slide

13. @cbetta
    @braintree_dev
    Who has a “special”
    condition
    

    View Slide

14. @cbetta
    @braintree_dev 14
    

    View Slide

15. @cbetta
    @braintree_dev
    But he thinks he is the
    king of the house
    

    View Slide

16. @cbetta
    @braintree_dev
    

    View Slide

17. @cbetta
    @braintree_dev
    Actually he has a
    kidney condition
    

    View Slide

18. @cbetta
    @braintree_dev
    People always want to
    see more photos and
    videos
    

    View Slide

19. @cbetta
    @braintree_dev
    especially kids
    

    View Slide

20. @cbetta
    @braintree_dev
    so...
    

    View Slide

21. @cbetta
    @braintree_dev
    I wrote an application
    that...
    

    View Slide

22. @cbetta
    @braintree_dev
    charges people money to
    see his face
    

    View Slide

23. @cbetta
    @braintree_dev
    

    View Slide

24. @cbetta
    @braintree_dev
    

    View Slide

25. @cbetta
    @braintree_dev
    

    View Slide

26. @cbetta
    @braintree_dev
    

    View Slide

27. @cbetta
    @braintree_dev
    I know what you are
    thinking...
    

    View Slide

28. @cbetta
    @braintree_dev
    I am an a**hole
    

    View Slide

29. @cbetta
    @braintree_dev
    I am actually raising
    money for his kidney
    surgery
    

    View Slide

30. @cbetta
    @braintree_dev
    I promise!
    

    View Slide

31. @cbetta
    @braintree_dev
    

    View Slide

32. @cbetta
    @braintree_dev
    A Credit Card Form
    Walks into a Bar...
    

    View Slide

33. @cbetta
    @braintree_dev
    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..."
    

    View Slide

34. @cbetta
    @braintree_dev
    “validation”
    

    View Slide

35. @cbetta
    @braintree_dev
    

    View Slide

36. @cbetta
    @braintree_dev
    

    View Slide

37. @cbetta
    @braintree_dev
    Things people should not do when
    building a Credit Card Form
    

    View Slide

38. @cbetta
    @braintree_dev
    Things I think you should not do
    when building a Credit Card Form
    

    View Slide

39. @cbetta
    @braintree_dev
    

    View Slide

40. @cbetta
    @braintree_dev
    baymard.com/lists/cart-abandonment-rate
    

    View Slide

41. @cbetta
    @braintree_dev
    1.
    

    View Slide

42. @cbetta
    @braintree_dev
    Add a CAPTCHA
    

    View Slide

43. @cbetta
    @braintree_dev
    CAPTCHA
    Completely Automated Public Turing test
    to tell Computers and Humans Apart
    

    View Slide

44. @cbetta
    @braintree_dev
    

    View Slide

45. @cbetta
    @braintree_dev
    

    View Slide

46. @cbetta
    @braintree_dev
    

    View Slide

47. @cbetta
    @braintree_dev
    

    View Slide

48. @cbetta
    @braintree_dev
    

    View Slide

49. @cbetta
    @braintree_dev
    

    View Slide

50. @cbetta
    @braintree_dev
    CAPTCHA
    Completely Automated Public Turing test
    to tell Computers and Humans Apart
    

    View Slide

51. @cbetta
    @braintree_dev
    CAPTCHA
    Completely Automated Process
    That Causes Headaches and Anger
    

    View Slide

52. @cbetta
    @braintree_dev
    2.
    

    View Slide

53. @cbetta
    @braintree_dev
    Ask users to register
    

    View Slide

54. @cbetta
    @braintree_dev
    Ask users to register
    ...before purchasing
    

    View Slide

55. @cbetta
    @braintree_dev
    

    View Slide

56. @cbetta
    @braintree_dev
    

    View Slide

57. @cbetta
    @braintree_dev
    

    View Slide

58. @cbetta
    @braintree_dev
    

    View Slide

59. @cbetta
    @braintree_dev
    

    View Slide

60. @cbetta
    @braintree_dev
    

    View Slide

61. @cbetta
    @braintree_dev
    

    View Slide

62. @cbetta
    @braintree_dev
    

    View Slide

63. @cbetta
    @braintree_dev
    

    View Slide

64. @cbetta
    @braintree_dev
    A Credit Card Form
    Walks into a Bar...
    

    View Slide

65. @cbetta
    @braintree_dev
    the bartender says,
    “I haven’t seen you in a while!”
    The credit card form
    looks at him and says
    “Yeah, I had to go to jail. I was...”
    

    View Slide

66. @cbetta
    @braintree_dev
    “Charged with bad humour"
    

    View Slide

67. @cbetta
    @braintree_dev
    3.
    

    View Slide

68. @cbetta
    @braintree_dev
    Ask me for the
    credit card type?
    

    View Slide

69. @cbetta
    @braintree_dev
    

    View Slide

70. @cbetta
    @braintree_dev
    

    View Slide

71. @cbetta
    @braintree_dev
    

    View Slide

72. @cbetta
    @braintree_dev
    * totally copied from Wikipedia
    

    View Slide

73. @cbetta
    @braintree_dev
    

    View Slide

74. @cbetta
    @braintree_dev
    

    View Slide

75. @cbetta
    @braintree_dev
    

    View Slide

76. @cbetta
    @braintree_dev
    

    View Slide

77. @cbetta
    @braintree_dev
    

    View Slide

78. @cbetta
    @braintree_dev
    jquerycreditcardvalidator.com
    

    View Slide

79. @cbetta
    @braintree_dev
    

    View Slide

80. @cbetta
    @braintree_dev
    creditcardjs.com
    

    View Slide

81. @cbetta
    @braintree_dev
    

    View Slide

82. @cbetta
    @braintree_dev
    I <3 Braintree
    

    View Slide

83. @cbetta
    @braintree_dev
    obviously...
    

    View Slide

84. @cbetta
    @braintree_dev
    

    View Slide

85. @cbetta
    @braintree_dev
    

    View Slide

86. @cbetta
    @braintree_dev
    

    View Slide

87. @cbetta
    @braintree_dev
    github.com/braintree/card-validator
    

    View Slide

88. @cbetta
    @braintree_dev
    

    View Slide

89. @cbetta
    @braintree_dev
    4.
    

    View Slide

90. @cbetta
    @braintree_dev
    C.V.Who?
    

    View Slide

91. @cbetta
    @braintree_dev
    

    View Slide

92. @cbetta
    @braintree_dev
    

    View Slide

93. @cbetta
    @braintree_dev
    

    View Slide

94. @cbetta
    @braintree_dev
    

    View Slide

95. @cbetta
    @braintree_dev
    

    View Slide

96. @cbetta
    @braintree_dev
    

    View Slide

97. @cbetta
    @braintree_dev
    jessepollak.github.io/card
    

    View Slide

98. @cbetta
    @braintree_dev
    

    View Slide

99. @cbetta
    @braintree_dev
    

    View Slide

100. @cbetta
     @braintree_dev
     

     View Slide

101. @cbetta
     @braintree_dev
     kenkeiter.com/skeuocard
     

     View Slide

102. @cbetta
     @braintree_dev
     

     View Slide

103. @cbetta
     @braintree_dev
     

     View Slide

104. @cbetta
     @braintree_dev
     

     View Slide

105. @cbetta
     @braintree_dev
     

     View Slide

106. @cbetta
     @braintree_dev
     

     View Slide

107. @cbetta
     @braintree_dev
     

     View Slide

108. @cbetta
     @braintree_dev
     Hosted Fields
     

     View Slide

109. @cbetta
     @braintree_dev
     braintreepayments.com/features/hosted-fields
     

     View Slide

110. @cbetta
     @braintree_dev
     

     View Slide

111. @cbetta
     @braintree_dev
     5.
     

     View Slide

112. @cbetta
     @braintree_dev
     You don’t format dates as
     they are on my card
     

     View Slide

113. @cbetta
     @braintree_dev
     

     View Slide

114. @cbetta
     @braintree_dev
     

     View Slide

115. @cbetta
     @braintree_dev
     

     View Slide

116. @cbetta
     @braintree_dev
     6.
     

     View Slide

117. @cbetta
     @braintree_dev
     6.
     

     View Slide

118. @cbetta
     @braintree_dev
     A Credit Card Form
     Walks into a Bar...
     

     View Slide

119. @cbetta
     @braintree_dev
     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..."
     

     View Slide

120. @cbetta
     @braintree_dev
     “Declines”
     

     View Slide

121. @cbetta
     @braintree_dev
     6.
     

     View Slide

122. @cbetta
     @braintree_dev
     You don’t validate my card
     number inline
     

     View Slide

123. @cbetta
     @braintree_dev
     Luhn Algorithm
     

     View Slide

124. @cbetta
     @braintree_dev
     4217 6511 1111 1119
     

     View Slide

125. @cbetta
     @braintree_dev
     4217 6511 1111 1119
     9111 1111 1156 7124
     

     View Slide

126. @cbetta
     @braintree_dev
     4217 6511 1111 1119
     9111 1111 1156 7124
     9212 1212 1213 7228
     

     View Slide

127. @cbetta
     @braintree_dev
     14 + 6 + 11 + 19 = 50
     4217 6511 1111 1119
     9111 1111 1156 7124
     9212 1212 1253 7228
     

     View Slide

128. @cbetta
     @braintree_dev
     50 % 10 == 0 ?
     4217 6511 1111 1119
     14 + 6 + 11 + 19 = 50
     9111 1111 1156 7124
     9212 1212 1253 7228
     

     View Slide

129. @cbetta
     @braintree_dev
     

     View Slide

130. @cbetta
     @braintree_dev
     

     View Slide

131. @cbetta
     @braintree_dev
     

     View Slide

132. @cbetta
     @braintree_dev
     

     View Slide

133. @cbetta
     @braintree_dev
     

     View Slide

134. @cbetta
     @braintree_dev
     

     View Slide

135. @cbetta
     @braintree_dev
     

     View Slide

136. @cbetta
     @braintree_dev
     

     View Slide

137. @cbetta
     @braintree_dev
     7.
     

     View Slide

138. @cbetta
     @braintree_dev
     7.
     

     View Slide

139. @cbetta
     @braintree_dev
     6b.
     

     View Slide

140. @cbetta
     @braintree_dev
     You don’t know your
     limits!
     

     View Slide

141. @cbetta
     @braintree_dev
     Card! Number of Digits!
     AMEX! 15!
     Visa! 13 or 16!
     MasterCard! 16!
     Discover! 16!
     

     View Slide

142. @cbetta
     @braintree_dev
     

     View Slide

143. @cbetta
     @braintree_dev
     

     View Slide

144. @cbetta
     @braintree_dev
     

     View Slide

145. @cbetta
     @braintree_dev
     

     View Slide

146. @cbetta
     @braintree_dev
     

     View Slide

147. @cbetta
     @braintree_dev
     

     View Slide

148. @cbetta
     @braintree_dev
     7.
     

     View Slide

149. @cbetta
     @braintree_dev
     You don’t remember me
     

     View Slide

150. @cbetta
     @braintree_dev
     

     View Slide

151. @cbetta
     @braintree_dev
     

     View Slide

152. @cbetta
     @braintree_dev
     

     View Slide

153. @cbetta
     @braintree_dev
     

     View Slide

154. @cbetta
     @braintree_dev
     

     View Slide

155. @cbetta
     @braintree_dev
     

     View Slide

156. @cbetta
     @braintree_dev
     8.
     

     View Slide

157. @cbetta
     @braintree_dev
     You remember too much
     

     View Slide

158. @cbetta
     @braintree_dev
     And then you lose my details!
     

     View Slide

159. @cbetta
     @braintree_dev
     2014
     Home Depot 56M
     JP Morgan Chase 76M
     Staples 1.6M
     

     View Slide

160. @cbetta
     @braintree_dev
     Tokenization
     

     View Slide

161. @cbetta
     @braintree_dev
     

     View Slide

162. @cbetta
     @braintree_dev
     

     View Slide

163. @cbetta
     @braintree_dev
     One more joke?
     

     View Slide

164. @cbetta
     @braintree_dev
     A Credit Card Form
     Walks into a Bar...
     

     View Slide

165. @cbetta
     @braintree_dev
     the bartender says,
     “You are new to this joint aren’t you?”
     The credit card form
     looks at him and says
     “Yeah, I just..."
     

     View Slide

166. @cbetta
     @braintree_dev
     “Discovered it”
     

     View Slide

167. @cbetta
     @braintree_dev
     

     View Slide

168. @cbetta
     @braintree_dev
     9.
     

     View Slide

169. @cbetta
     @braintree_dev
     You have a “reset” button
     

     View Slide

170. @cbetta
     @braintree_dev
     

     View Slide

171. @cbetta
     @braintree_dev
     

     View Slide

172. @cbetta
     @braintree_dev
     10.
     

     View Slide

173. @cbetta
     @braintree_dev
     Where was I again?
     

     View Slide

174. @cbetta
     @braintree_dev
     

     View Slide

175. @cbetta
     @braintree_dev
     

     View Slide

176. @cbetta
     @braintree_dev
     That’s all folks!
     

     View Slide

177. @cbetta
     @braintree_dev
     Encore?
     

     View Slide

178. @cbetta
     @braintree_dev
     An American Express Walks
     into a Bar in Moscow...
     

     View Slide

179. @cbetta
     @braintree_dev
     the bartender says,
     “Sorry mate,
     You aren’t allowed in here without a...”
     

     View Slide

180. @cbetta
     @braintree_dev
     “VISA”
     

     View Slide

181. @cbetta
     @braintree_dev
     

     View Slide

182. @cbetta
     @braintree_dev
     baddonationforms.tumblr.com
     

     View Slide

183. @cbetta
     @braintree_dev
     THANK YOU!
     

     View Slide

184. @cbetta
     @braintree_dev
     Cristiano Betta
     Developer Advocate
     Braintree_PayPal.
     cbetta@paypal.com
     slideshare.net/cbetta
     braintreepayments.com
     @braintree_dev
     @cbetta
     

     View Slide