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

Transcript

1. 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
2. 2.

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

   A talk on credit cards in eCommerce
3. 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
4. 4.

   @cbetta @braintree_dev

5. 5.

   @cbetta @braintree_dev

6. 6.

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

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

   @cbetta @braintree_dev “interest”

9. 9.

   @cbetta @braintree_dev THANK YOU!

10. 10.

    @cbetta @braintree_dev I <3 U Bucharest

11. 11.

    @cbetta @braintree_dev A Credit Card Walks into a Bar_

12. 12.

    @cbetta @braintree_dev I have a Cat

13. 13.

    @cbetta @braintree_dev Who has a “special” condition

14. 14.

    @cbetta @braintree_dev 14

15. 15.

    @cbetta @braintree_dev But he thinks he is the king of

    the house
16. 16.

    @cbetta @braintree_dev

17. 17.

    @cbetta @braintree_dev Actually he has a kidney condition

18. 18.

    @cbetta @braintree_dev People always want to see more photos and

    videos
19. 19.

    @cbetta @braintree_dev especially kids

20. 20.

    @cbetta @braintree_dev so...

21. 21.

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

22. 22.

    @cbetta @braintree_dev charges people money to see his face

23. 23.

    @cbetta @braintree_dev

24. 24.

    @cbetta @braintree_dev

25. 25.

    @cbetta @braintree_dev

26. 26.

    @cbetta @braintree_dev

27. 27.

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

28. 28.

    @cbetta @braintree_dev I am an a**hole

29. 29.

    @cbetta @braintree_dev I am actually raising money for his kidney

    surgery
30. 30.

    @cbetta @braintree_dev I promise!

31. 31.

    @cbetta @braintree_dev

32. 32.

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

33. 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..."
34. 34.

    @cbetta @braintree_dev “validation”

35. 35.

    @cbetta @braintree_dev

36. 36.

    @cbetta @braintree_dev

37. 37.

    @cbetta @braintree_dev Things people should not do when building a

    Credit Card Form
38. 38.

    @cbetta @braintree_dev Things I think you should not do when

    building a Credit Card Form
39. 39.

    @cbetta @braintree_dev

40. 40.

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

41. 41.

    @cbetta @braintree_dev 1.

42. 42.

    @cbetta @braintree_dev Add a CAPTCHA

43. 43.

    @cbetta @braintree_dev CAPTCHA Completely Automated Public Turing test to tell

    Computers and Humans Apart
44. 44.

    @cbetta @braintree_dev

45. 45.

    @cbetta @braintree_dev

46. 46.

    @cbetta @braintree_dev

47. 47.

    @cbetta @braintree_dev

48. 48.

    @cbetta @braintree_dev

49. 49.

    @cbetta @braintree_dev

50. 50.

    @cbetta @braintree_dev CAPTCHA Completely Automated Public Turing test to tell

    Computers and Humans Apart
51. 51.

    @cbetta @braintree_dev CAPTCHA Completely Automated Process That Causes Headaches and

    Anger
52. 52.

    @cbetta @braintree_dev 2.

53. 53.

    @cbetta @braintree_dev Ask users to register

54. 54.

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

55. 55.

    @cbetta @braintree_dev

56. 56.

    @cbetta @braintree_dev

57. 57.

    @cbetta @braintree_dev

58. 58.

    @cbetta @braintree_dev

59. 59.

    @cbetta @braintree_dev

60. 60.

    @cbetta @braintree_dev

61. 61.

    @cbetta @braintree_dev

62. 62.

    @cbetta @braintree_dev

63. 63.

    @cbetta @braintree_dev

64. 64.

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

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

    @cbetta @braintree_dev “Charged with bad humour"

67. 67.

    @cbetta @braintree_dev 3.

68. 68.

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

69. 69.

    @cbetta @braintree_dev

70. 70.

    @cbetta @braintree_dev

71. 71.

    @cbetta @braintree_dev

72. 72.

    @cbetta @braintree_dev * totally copied from Wikipedia

73. 73.

    @cbetta @braintree_dev

74. 74.

    @cbetta @braintree_dev

75. 75.

    @cbetta @braintree_dev

76. 76.

    @cbetta @braintree_dev

77. 77.

    @cbetta @braintree_dev

78. 78.

    @cbetta @braintree_dev jquerycreditcardvalidator.com

79. 79.

    @cbetta @braintree_dev

80. 80.

    @cbetta @braintree_dev creditcardjs.com

81. 81.

    @cbetta @braintree_dev

82. 82.

    @cbetta @braintree_dev I <3 Braintree

83. 83.

    @cbetta @braintree_dev obviously...

84. 84.

    @cbetta @braintree_dev

85. 85.

    @cbetta @braintree_dev

86. 86.

    @cbetta @braintree_dev

87. 87.

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

88. 88.

    @cbetta @braintree_dev

89. 89.

    @cbetta @braintree_dev 4.

90. 90.

    @cbetta @braintree_dev C.V.Who?

91. 91.

    @cbetta @braintree_dev

92. 92.

    @cbetta @braintree_dev

93. 93.

    @cbetta @braintree_dev

94. 94.

    @cbetta @braintree_dev

95. 95.

    @cbetta @braintree_dev

96. 96.

    @cbetta @braintree_dev

97. 97.

    @cbetta @braintree_dev jessepollak.github.io/card

98. 98.

    @cbetta @braintree_dev

99. 99.

    @cbetta @braintree_dev

100. 100.

     @cbetta @braintree_dev

101. 101.

     @cbetta @braintree_dev kenkeiter.com/skeuocard

102. 102.

     @cbetta @braintree_dev

103. 103.

     @cbetta @braintree_dev

104. 104.

     @cbetta @braintree_dev

105. 105.

     @cbetta @braintree_dev

106. 106.

     @cbetta @braintree_dev

107. 107.

     @cbetta @braintree_dev

108. 108.

     @cbetta @braintree_dev Hosted Fields

109. 109.

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

110. 110.

     @cbetta @braintree_dev

111. 111.

     @cbetta @braintree_dev 5.

112. 112.

     @cbetta @braintree_dev You don’t format dates as they are on

     my card
113. 113.

     @cbetta @braintree_dev

114. 114.

     @cbetta @braintree_dev

115. 115.

     @cbetta @braintree_dev

116. 116.

     @cbetta @braintree_dev 6.

117. 117.

     @cbetta @braintree_dev 6.

118. 118.

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

119. 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..."
120. 120.

     @cbetta @braintree_dev “Declines”

121. 121.

     @cbetta @braintree_dev 6.

122. 122.

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

123. 123.

     @cbetta @braintree_dev Luhn Algorithm

124. 124.

     @cbetta @braintree_dev 4217 6511 1111 1119

125. 125.

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

126. 126.

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

     9212 1212 1213 7228
127. 127.

     @cbetta @braintree_dev 14 + 6 + 11 + 19 =

     50 4217 6511 1111 1119 9111 1111 1156 7124 9212 1212 1253 7228
128. 128.

     @cbetta @braintree_dev 50 % 10 == 0 ? 4217 6511

     1111 1119 14 + 6 + 11 + 19 = 50 9111 1111 1156 7124 9212 1212 1253 7228
129. 129.

     @cbetta @braintree_dev

130. 130.

     @cbetta @braintree_dev

131. 131.

     @cbetta @braintree_dev

132. 132.

     @cbetta @braintree_dev

133. 133.

     @cbetta @braintree_dev

134. 134.

     @cbetta @braintree_dev

135. 135.

     @cbetta @braintree_dev

136. 136.

     @cbetta @braintree_dev

137. 137.

     @cbetta @braintree_dev 7.

138. 138.

     @cbetta @braintree_dev 7.

139. 139.

     @cbetta @braintree_dev 6b.

140. 140.

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

141. 141.

     @cbetta @braintree_dev Card! Number of Digits! AMEX! 15! Visa! 13

     or 16! MasterCard! 16! Discover! 16!
142. 142.

     @cbetta @braintree_dev

143. 143.

     @cbetta @braintree_dev

144. 144.

     @cbetta @braintree_dev

145. 145.

     @cbetta @braintree_dev

146. 146.

     @cbetta @braintree_dev

147. 147.

     @cbetta @braintree_dev

148. 148.

     @cbetta @braintree_dev 7.

149. 149.

     @cbetta @braintree_dev You don’t remember me

150. 150.

     @cbetta @braintree_dev

151. 151.

     @cbetta @braintree_dev

152. 152.

     @cbetta @braintree_dev

153. 153.

     @cbetta @braintree_dev

154. 154.

     @cbetta @braintree_dev

155. 155.

     @cbetta @braintree_dev

156. 156.

     @cbetta @braintree_dev 8.

157. 157.

     @cbetta @braintree_dev You remember too much

158. 158.

     @cbetta @braintree_dev And then you lose my details!

159. 159.

     @cbetta @braintree_dev 2014 Home Depot 56M JP Morgan Chase 76M

     Staples 1.6M
160. 160.

     @cbetta @braintree_dev Tokenization

161. 161.

     @cbetta @braintree_dev

162. 162.

     @cbetta @braintree_dev

163. 163.

     @cbetta @braintree_dev One more joke?

164. 164.

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

165. 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..."
166. 166.

     @cbetta @braintree_dev “Discovered it”

167. 167.

     @cbetta @braintree_dev

168. 168.

     @cbetta @braintree_dev 9.

169. 169.

     @cbetta @braintree_dev You have a “reset” button

170. 170.

     @cbetta @braintree_dev

171. 171.

     @cbetta @braintree_dev

172. 172.

     @cbetta @braintree_dev 10.

173. 173.

     @cbetta @braintree_dev Where was I again?

174. 174.

     @cbetta @braintree_dev

175. 175.

     @cbetta @braintree_dev

176. 176.

     @cbetta @braintree_dev That’s all folks!

177. 177.

     @cbetta @braintree_dev Encore?

178. 178.

     @cbetta @braintree_dev An American Express Walks into a Bar in

     Moscow...
179. 179.

     @cbetta @braintree_dev the bartender says, “Sorry mate, You aren’t allowed

     in here without a...”
180. 180.

     @cbetta @braintree_dev “VISA”

181. 181.

     @cbetta @braintree_dev

182. 182.

     @cbetta @braintree_dev baddonationforms.tumblr.com

183. 183.

     @cbetta @braintree_dev THANK YOU!

184. 184.

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

     @braintree_dev @cbetta