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 full-size slide

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

    View full-size 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 full-size slide

  4. @cbetta
    @braintree_dev

    View full-size slide

  5. @cbetta
    @braintree_dev

    View full-size slide

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

    View full-size 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 full-size slide

  8. @cbetta
    @braintree_dev
    “interest”

    View full-size slide

  9. @cbetta
    @braintree_dev
    THANK YOU!

    View full-size slide

  10. @cbetta
    @braintree_dev
    I <3 U Bucharest

    View full-size slide

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

    View full-size slide

  12. @cbetta
    @braintree_dev
    I have a Cat

    View full-size slide

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

    View full-size slide

  14. @cbetta
    @braintree_dev 14

    View full-size slide

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

    View full-size slide

  16. @cbetta
    @braintree_dev

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. @cbetta
    @braintree_dev
    especially kids

    View full-size slide

  20. @cbetta
    @braintree_dev
    so...

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. @cbetta
    @braintree_dev

    View full-size slide

  24. @cbetta
    @braintree_dev

    View full-size slide

  25. @cbetta
    @braintree_dev

    View full-size slide

  26. @cbetta
    @braintree_dev

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  30. @cbetta
    @braintree_dev
    I promise!

    View full-size slide

  31. @cbetta
    @braintree_dev

    View full-size slide

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

    View full-size 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 full-size slide

  34. @cbetta
    @braintree_dev
    “validation”

    View full-size slide

  35. @cbetta
    @braintree_dev

    View full-size slide

  36. @cbetta
    @braintree_dev

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  39. @cbetta
    @braintree_dev

    View full-size slide

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

    View full-size slide

  41. @cbetta
    @braintree_dev
    1.

    View full-size slide

  42. @cbetta
    @braintree_dev
    Add a CAPTCHA

    View full-size slide

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

    View full-size slide

  44. @cbetta
    @braintree_dev

    View full-size slide

  45. @cbetta
    @braintree_dev

    View full-size slide

  46. @cbetta
    @braintree_dev

    View full-size slide

  47. @cbetta
    @braintree_dev

    View full-size slide

  48. @cbetta
    @braintree_dev

    View full-size slide

  49. @cbetta
    @braintree_dev

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  52. @cbetta
    @braintree_dev
    2.

    View full-size slide

  53. @cbetta
    @braintree_dev
    Ask users to register

    View full-size slide

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

    View full-size slide

  55. @cbetta
    @braintree_dev

    View full-size slide

  56. @cbetta
    @braintree_dev

    View full-size slide

  57. @cbetta
    @braintree_dev

    View full-size slide

  58. @cbetta
    @braintree_dev

    View full-size slide

  59. @cbetta
    @braintree_dev

    View full-size slide

  60. @cbetta
    @braintree_dev

    View full-size slide

  61. @cbetta
    @braintree_dev

    View full-size slide

  62. @cbetta
    @braintree_dev

    View full-size slide

  63. @cbetta
    @braintree_dev

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

  67. @cbetta
    @braintree_dev
    3.

    View full-size slide

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

    View full-size slide

  69. @cbetta
    @braintree_dev

    View full-size slide

  70. @cbetta
    @braintree_dev

    View full-size slide

  71. @cbetta
    @braintree_dev

    View full-size slide

  72. @cbetta
    @braintree_dev
    * totally copied from Wikipedia

    View full-size slide

  73. @cbetta
    @braintree_dev

    View full-size slide

  74. @cbetta
    @braintree_dev

    View full-size slide

  75. @cbetta
    @braintree_dev

    View full-size slide

  76. @cbetta
    @braintree_dev

    View full-size slide

  77. @cbetta
    @braintree_dev

    View full-size slide

  78. @cbetta
    @braintree_dev
    jquerycreditcardvalidator.com

    View full-size slide

  79. @cbetta
    @braintree_dev

    View full-size slide

  80. @cbetta
    @braintree_dev
    creditcardjs.com

    View full-size slide

  81. @cbetta
    @braintree_dev

    View full-size slide

  82. @cbetta
    @braintree_dev
    I <3 Braintree

    View full-size slide

  83. @cbetta
    @braintree_dev
    obviously...

    View full-size slide

  84. @cbetta
    @braintree_dev

    View full-size slide

  85. @cbetta
    @braintree_dev

    View full-size slide

  86. @cbetta
    @braintree_dev

    View full-size slide

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

    View full-size slide

  88. @cbetta
    @braintree_dev

    View full-size slide

  89. @cbetta
    @braintree_dev
    4.

    View full-size slide

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

    View full-size slide

  91. @cbetta
    @braintree_dev

    View full-size slide

  92. @cbetta
    @braintree_dev

    View full-size slide

  93. @cbetta
    @braintree_dev

    View full-size slide

  94. @cbetta
    @braintree_dev

    View full-size slide

  95. @cbetta
    @braintree_dev

    View full-size slide

  96. @cbetta
    @braintree_dev

    View full-size slide

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

    View full-size slide

  98. @cbetta
    @braintree_dev

    View full-size slide

  99. @cbetta
    @braintree_dev

    View full-size slide

  100. @cbetta
    @braintree_dev

    View full-size slide

  101. @cbetta
    @braintree_dev
    kenkeiter.com/skeuocard

    View full-size slide

  102. @cbetta
    @braintree_dev

    View full-size slide

  103. @cbetta
    @braintree_dev

    View full-size slide

  104. @cbetta
    @braintree_dev

    View full-size slide

  105. @cbetta
    @braintree_dev

    View full-size slide

  106. @cbetta
    @braintree_dev

    View full-size slide

  107. @cbetta
    @braintree_dev

    View full-size slide

  108. @cbetta
    @braintree_dev
    Hosted Fields

    View full-size slide

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

    View full-size slide

  110. @cbetta
    @braintree_dev

    View full-size slide

  111. @cbetta
    @braintree_dev
    5.

    View full-size slide

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

    View full-size slide

  113. @cbetta
    @braintree_dev

    View full-size slide

  114. @cbetta
    @braintree_dev

    View full-size slide

  115. @cbetta
    @braintree_dev

    View full-size slide

  116. @cbetta
    @braintree_dev
    6.

    View full-size slide

  117. @cbetta
    @braintree_dev
    6.

    View full-size slide

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

    View full-size 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 full-size slide

  120. @cbetta
    @braintree_dev
    “Declines”

    View full-size slide

  121. @cbetta
    @braintree_dev
    6.

    View full-size slide

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

    View full-size slide

  123. @cbetta
    @braintree_dev
    Luhn Algorithm

    View full-size slide

  124. @cbetta
    @braintree_dev
    4217 6511 1111 1119

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

  129. @cbetta
    @braintree_dev

    View full-size slide

  130. @cbetta
    @braintree_dev

    View full-size slide

  131. @cbetta
    @braintree_dev

    View full-size slide

  132. @cbetta
    @braintree_dev

    View full-size slide

  133. @cbetta
    @braintree_dev

    View full-size slide

  134. @cbetta
    @braintree_dev

    View full-size slide

  135. @cbetta
    @braintree_dev

    View full-size slide

  136. @cbetta
    @braintree_dev

    View full-size slide

  137. @cbetta
    @braintree_dev
    7.

    View full-size slide

  138. @cbetta
    @braintree_dev
    7.

    View full-size slide

  139. @cbetta
    @braintree_dev
    6b.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  142. @cbetta
    @braintree_dev

    View full-size slide

  143. @cbetta
    @braintree_dev

    View full-size slide

  144. @cbetta
    @braintree_dev

    View full-size slide

  145. @cbetta
    @braintree_dev

    View full-size slide

  146. @cbetta
    @braintree_dev

    View full-size slide

  147. @cbetta
    @braintree_dev

    View full-size slide

  148. @cbetta
    @braintree_dev
    7.

    View full-size slide

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

    View full-size slide

  150. @cbetta
    @braintree_dev

    View full-size slide

  151. @cbetta
    @braintree_dev

    View full-size slide

  152. @cbetta
    @braintree_dev

    View full-size slide

  153. @cbetta
    @braintree_dev

    View full-size slide

  154. @cbetta
    @braintree_dev

    View full-size slide

  155. @cbetta
    @braintree_dev

    View full-size slide

  156. @cbetta
    @braintree_dev
    8.

    View full-size slide

  157. @cbetta
    @braintree_dev
    You remember too much

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  160. @cbetta
    @braintree_dev
    Tokenization

    View full-size slide

  161. @cbetta
    @braintree_dev

    View full-size slide

  162. @cbetta
    @braintree_dev

    View full-size slide

  163. @cbetta
    @braintree_dev
    One more joke?

    View full-size slide

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

    View full-size 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 full-size slide

  166. @cbetta
    @braintree_dev
    “Discovered it”

    View full-size slide

  167. @cbetta
    @braintree_dev

    View full-size slide

  168. @cbetta
    @braintree_dev
    9.

    View full-size slide

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

    View full-size slide

  170. @cbetta
    @braintree_dev

    View full-size slide

  171. @cbetta
    @braintree_dev

    View full-size slide

  172. @cbetta
    @braintree_dev
    10.

    View full-size slide

  173. @cbetta
    @braintree_dev
    Where was I again?

    View full-size slide

  174. @cbetta
    @braintree_dev

    View full-size slide

  175. @cbetta
    @braintree_dev

    View full-size slide

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

    View full-size slide

  177. @cbetta
    @braintree_dev
    Encore?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  180. @cbetta
    @braintree_dev
    “VISA”

    View full-size slide

  181. @cbetta
    @braintree_dev

    View full-size slide

  182. @cbetta
    @braintree_dev
    baddonationforms.tumblr.com

    View full-size slide

  183. @cbetta
    @braintree_dev
    THANK YOU!

    View full-size slide

  184. @cbetta
    @braintree_dev
    Cristiano Betta
    Developer Advocate
    Braintree_PayPal.
    [email protected]
    slideshare.net/cbetta
    braintreepayments.com
    @braintree_dev
    @cbetta

    View full-size slide