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

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

My talk from DevTalks Bucharest 2015

E0ee803f10db4d5fb85f8288a421850b?s=128

Cristiano Betta

June 11, 2015
Tweet

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
  2. @cbetta @braintree_dev A Credit Card Form Walks into a Bar...

    A talk on credit cards in eCommerce
  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. @cbetta @braintree_dev

  5. @cbetta @braintree_dev

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

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

  9. @cbetta @braintree_dev THANK YOU!

  10. @cbetta @braintree_dev I <3 U Bucharest

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

  12. @cbetta @braintree_dev I have a Cat

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

  14. @cbetta @braintree_dev 14

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

    the house
  16. @cbetta @braintree_dev

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

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

    videos
  19. @cbetta @braintree_dev especially kids

  20. @cbetta @braintree_dev so...

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

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

  23. @cbetta @braintree_dev

  24. @cbetta @braintree_dev

  25. @cbetta @braintree_dev

  26. @cbetta @braintree_dev

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

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

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

    surgery
  30. @cbetta @braintree_dev I promise!

  31. @cbetta @braintree_dev

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

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

  35. @cbetta @braintree_dev

  36. @cbetta @braintree_dev

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

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

    building a Credit Card Form
  39. @cbetta @braintree_dev

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

  41. @cbetta @braintree_dev 1.

  42. @cbetta @braintree_dev Add a CAPTCHA

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

    Computers and Humans Apart
  44. @cbetta @braintree_dev

  45. @cbetta @braintree_dev

  46. @cbetta @braintree_dev

  47. @cbetta @braintree_dev

  48. @cbetta @braintree_dev

  49. @cbetta @braintree_dev

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

    Computers and Humans Apart
  51. @cbetta @braintree_dev CAPTCHA Completely Automated Process That Causes Headaches and

    Anger
  52. @cbetta @braintree_dev 2.

  53. @cbetta @braintree_dev Ask users to register

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

  55. @cbetta @braintree_dev

  56. @cbetta @braintree_dev

  57. @cbetta @braintree_dev

  58. @cbetta @braintree_dev

  59. @cbetta @braintree_dev

  60. @cbetta @braintree_dev

  61. @cbetta @braintree_dev

  62. @cbetta @braintree_dev

  63. @cbetta @braintree_dev

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

  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. @cbetta @braintree_dev “Charged with bad humour"

  67. @cbetta @braintree_dev 3.

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

  69. @cbetta @braintree_dev

  70. @cbetta @braintree_dev

  71. @cbetta @braintree_dev

  72. @cbetta @braintree_dev * totally copied from Wikipedia

  73. @cbetta @braintree_dev

  74. @cbetta @braintree_dev

  75. @cbetta @braintree_dev

  76. @cbetta @braintree_dev

  77. @cbetta @braintree_dev

  78. @cbetta @braintree_dev jquerycreditcardvalidator.com

  79. @cbetta @braintree_dev

  80. @cbetta @braintree_dev creditcardjs.com

  81. @cbetta @braintree_dev

  82. @cbetta @braintree_dev I <3 Braintree

  83. @cbetta @braintree_dev obviously...

  84. @cbetta @braintree_dev

  85. @cbetta @braintree_dev

  86. @cbetta @braintree_dev

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

  88. @cbetta @braintree_dev

  89. @cbetta @braintree_dev 4.

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

  91. @cbetta @braintree_dev

  92. @cbetta @braintree_dev

  93. @cbetta @braintree_dev

  94. @cbetta @braintree_dev

  95. @cbetta @braintree_dev

  96. @cbetta @braintree_dev

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

  98. @cbetta @braintree_dev

  99. @cbetta @braintree_dev

  100. @cbetta @braintree_dev

  101. @cbetta @braintree_dev kenkeiter.com/skeuocard

  102. @cbetta @braintree_dev

  103. @cbetta @braintree_dev

  104. @cbetta @braintree_dev

  105. @cbetta @braintree_dev

  106. @cbetta @braintree_dev

  107. @cbetta @braintree_dev

  108. @cbetta @braintree_dev Hosted Fields

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

  110. @cbetta @braintree_dev

  111. @cbetta @braintree_dev 5.

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

    my card
  113. @cbetta @braintree_dev

  114. @cbetta @braintree_dev

  115. @cbetta @braintree_dev

  116. @cbetta @braintree_dev 6.

  117. @cbetta @braintree_dev 6.

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

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

  121. @cbetta @braintree_dev 6.

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

  123. @cbetta @braintree_dev Luhn Algorithm

  124. @cbetta @braintree_dev 4217 6511 1111 1119

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

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

    9212 1212 1213 7228
  127. @cbetta @braintree_dev 14 + 6 + 11 + 19 =

    50 4217 6511 1111 1119 9111 1111 1156 7124 9212 1212 1253 7228
  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. @cbetta @braintree_dev

  130. @cbetta @braintree_dev

  131. @cbetta @braintree_dev

  132. @cbetta @braintree_dev

  133. @cbetta @braintree_dev

  134. @cbetta @braintree_dev

  135. @cbetta @braintree_dev

  136. @cbetta @braintree_dev

  137. @cbetta @braintree_dev 7.

  138. @cbetta @braintree_dev 7.

  139. @cbetta @braintree_dev 6b.

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

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

    or 16! MasterCard! 16! Discover! 16!
  142. @cbetta @braintree_dev

  143. @cbetta @braintree_dev

  144. @cbetta @braintree_dev

  145. @cbetta @braintree_dev

  146. @cbetta @braintree_dev

  147. @cbetta @braintree_dev

  148. @cbetta @braintree_dev 7.

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

  150. @cbetta @braintree_dev

  151. @cbetta @braintree_dev

  152. @cbetta @braintree_dev

  153. @cbetta @braintree_dev

  154. @cbetta @braintree_dev

  155. @cbetta @braintree_dev

  156. @cbetta @braintree_dev 8.

  157. @cbetta @braintree_dev You remember too much

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

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

    Staples 1.6M
  160. @cbetta @braintree_dev Tokenization

  161. @cbetta @braintree_dev

  162. @cbetta @braintree_dev

  163. @cbetta @braintree_dev One more joke?

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

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

  167. @cbetta @braintree_dev

  168. @cbetta @braintree_dev 9.

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

  170. @cbetta @braintree_dev

  171. @cbetta @braintree_dev

  172. @cbetta @braintree_dev 10.

  173. @cbetta @braintree_dev Where was I again?

  174. @cbetta @braintree_dev

  175. @cbetta @braintree_dev

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

  177. @cbetta @braintree_dev Encore?

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

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

    in here without a...”
  180. @cbetta @braintree_dev “VISA”

  181. @cbetta @braintree_dev

  182. @cbetta @braintree_dev baddonationforms.tumblr.com

  183. @cbetta @braintree_dev THANK YOU!

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

    @braintree_dev @cbetta