Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Cristiano Betta

June 11, 2015
Tweet

More Decks by Cristiano Betta

Other Decks in Technology

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.
    [email protected]
    slideshare.net/cbetta
    braintreepayments.com
    @braintree_dev
    @cbetta

    View Slide