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

WordPress, WooCommerce, v.zero & IoT - Alberto López Braintree Developer Advocate

WordPress, WooCommerce, v.zero & IoT - Alberto López Braintree Developer Advocate

WordPress Greek Community

April 28, 2015
Tweet

More Decks by WordPress Greek Community

Other Decks in Technology

Transcript

  1. WordPress, WooCommerce, v.zero & IoT
    Alberto López
    Braintree_Dev.

    https://flic.kr/p/6kFQBc

    View full-size slide

  2. WordPress, WooCommerce, v.zero & IoT
    Alberto López
    Braintree_Dev.

    https://flic.kr/p/6kFQBc

    View full-size slide

  3. battlehack.org
    @AlbertusLM
    @Braintree_Dev

    View full-size slide

  4. @AlbertusLM
    @Braintree_Dev
    30-31 MAY

    View full-size slide

  5. One Axe
    @AlbertusLM
    @Braintree_Dev

    View full-size slide

  6. @AlbertusLM
    @Braintree_Dev

    View full-size slide

  7. 100.000 USD
    @AlbertusLM
    @Braintree_Dev

    View full-size slide

  8. we <3 hackers
    @AlbertusLM
    @Braintree_Dev

    View full-size slide

  9. we <3 innovation
    @AlbertusLM
    @Braintree_Dev

    View full-size slide

  10. > Levers of innovation_
    @AlbertusLM
    @Braintree_Dev

    View full-size slide

  11. Era of rapid prototyping
    @AlbertusLM
    @Braintree_Dev

    View full-size slide

  12. @AlbertusLM
    @Braintree_Dev

    View full-size slide

  13. Internet of Things everything
    @AlbertusLM
    @Braintree_Dev

    View full-size slide

  14. The Hype Cicle_
    @AlbertusLM
    @Braintree_Dev

    View full-size slide

  15. 4.9 Billion Connected "Things" by 2015
    http://www.gartner.com/newsroom/id/2905717
    Gartner Symposium/ITxpo 2014, November 9-13 in Barcelona, Spain
    @AlbertusLM
    @Braintree_Dev

    View full-size slide

  16. @AlbertusLM
    @Braintree_Dev

    View full-size slide

  17. > Case Study_
    @AlbertusLM
    @Braintree_Dev
    fake

    View full-size slide

  18. My story…
    @AlbertusLM
    @Braintree_Dev
    flic.kr/p/jVvyqX

    View full-size slide

  19. @AlbertusLM
    @Braintree_Dev
    Being an inventor

    View full-size slide

  20. Everybody <3 chocolate
    @AlbertusLM
    @Braintree_Dev

    View full-size slide

  21. ΕΥΡΗΚΑ

    View full-size slide

  22. Candy Machine!
    @AlbertusLM
    @Braintree_Dev

    View full-size slide

  23. The pursuit of Empire
    @AlbertusLM
    @Braintree_Dev
    Candies for
    everybody!

    View full-size slide

  24. @AlbertusLM
    @Braintree_Dev

    View full-size slide

  25. Challenges
    > Scalability
    > Operational management
    > Sustainable Growth
    @AlbertusLM
    @Braintree_Dev

    View full-size slide

  26. The project´s stack
    @AlbertusLM
    @Braintree_Dev
    Braintree v.zero SDK

    View full-size slide

  27. Why WordPress?
    @AlbertusLM
    @Braintree_Dev
    *critical features for the project
    4.1.1

    View full-size slide

  28. Why WordPress?
    @AlbertusLM
    @Braintree_Dev
    > Open Source
    *critical features for the project
    4.1.1

    View full-size slide

  29. Why WordPress?
    @AlbertusLM
    @Braintree_Dev
    > Open Source
    > Scalable
    *critical features for the project
    4.1.1

    View full-size slide

  30. Why WordPress?
    @AlbertusLM
    @Braintree_Dev
    > Open Source
    > Scalable
    > Easy to manage
    *critical features for the project
    4.1.1

    View full-size slide

  31. Why WordPress?
    @AlbertusLM
    @Braintree_Dev
    > Open Source
    > Scalable
    > Easy to manage
    > Thriving ecosystem
    *critical features for the project
    4.1.1

    View full-size slide

  32. Why WordPress?
    @AlbertusLM
    @Braintree_Dev
    > Open Source
    > Scalable
    > Easy to manage
    > Thriving ecosystem
    > Mobile friendly
    *critical features for the project
    4.1.1

    View full-size slide

  33. Why WooCommerce?
    @AlbertusLM
    @Braintree_Dev
    *critical features for the project
    2.3.7

    View full-size slide

  34. Why WooCommerce?
    @AlbertusLM
    @Braintree_Dev
    > Free core
    *critical features for the project
    2.3.7

    View full-size slide

  35. Why WooCommerce?
    @AlbertusLM
    @Braintree_Dev
    > Free core
    > Huge flexibility
    *critical features for the project
    2.3.7

    View full-size slide

  36. Why WooCommerce?
    @AlbertusLM
    @Braintree_Dev
    > Free core
    > Huge flexibility
    > WooThemes’ support
    *critical features for the project
    2.3.7

    View full-size slide

  37. Why WooCommerce?
    @AlbertusLM
    @Braintree_Dev
    > Free core
    > Huge flexibility
    > WooThemes’ support
    > Professional Yet Simple
    *critical features for the project
    2.3.7

    View full-size slide

  38. Why WooCommerce?
    @AlbertusLM
    @Braintree_Dev
    > Free core
    > Huge flexibility
    > WooThemes’ support
    > Professional Yet Simple
    > Room For Growth
    *critical features for the project
    2.3.7

    View full-size slide

  39. Why WooCommerce?
    @AlbertusLM
    @Braintree_Dev
    > Free core
    > Huge flexibility
    > WooThemes’ support
    > Professional Yet Simple
    > Room For Growth
    > # of plugins
    *critical features for the project
    2.3.7

    View full-size slide

  40. @AlbertusLM
    @Braintree_Dev
    16/04/2015
    goo.gl/IYy1ls

    View full-size slide

  41. Why Braintree v.zero SDK?
    @AlbertusLM
    @Braintree_Dev
    Abandonment checkout process FACTS:
    17% concerns about payment security
    13% price presented in foreign currency
    12% complicated checkout
    79% want to have more payment options
    goo.gl/AFwF10
    goo.gl/Nm1kbt
    goo.gl/bMlrDm

    View full-size slide

  42. Why Braintree v.zero SDK?
    OFF
    ON
    ON
    ON
    ON
    OFF
    ON
    ON
    ON
    ON
    FUTURE
    Payment Method
    C&D Cards
    v.zero
    @AlbertusLM
    @Braintree_Dev
    *critical features for the project

    View full-size slide

  43. Why Braintree v.zero SDK?
    v.zero
    @AlbertusLM
    @Braintree_Dev
    *critical features for the project
    > Mobile ready

    View full-size slide

  44. Why Braintree v.zero SDK?
    v.zero
    @AlbertusLM
    @Braintree_Dev
    *critical features for the project
    > Mobile ready
    > PCI compliance made easy

    View full-size slide

  45. Why Braintree v.zero SDK?
    v.zero
    @AlbertusLM
    @Braintree_Dev
    *critical features for the project
    > Mobile ready
    > PCI compliance made easy
    > Ultra Slim

    View full-size slide

  46. Why Braintree v.zero SDK?
    v.zero
    @AlbertusLM
    @Braintree_Dev
    *critical features for the project
    > Mobile ready
    > PCI compliance made easy
    > Ultra Slim
    > Elegant

    View full-size slide

  47. Why Braintree v.zero SDK?
    v.zero
    @AlbertusLM
    @Braintree_Dev
    *critical features for the project
    > Mobile ready
    > PCI compliance made easy
    > Ultra Slim
    > Elegant
    > Invisible

    View full-size slide

  48. Why Braintree v.zero SDK?
    v.zero
    @AlbertusLM
    @Braintree_Dev
    *critical features for the project
    > Mobile ready
    > PCI compliance made easy
    > Ultra Slim
    > Elegant
    > Invisible
    > 40 countries

    View full-size slide

  49. Why Braintree v.zero SDK?
    v.zero
    @AlbertusLM
    @Braintree_Dev
    *critical features for the project
    > Mobile ready
    > PCI compliance made easy
    > Ultra Slim
    > Elegant
    > Invisible
    > 40 countries
    > 130 currencies

    View full-size slide

  50. Why Braintree v.zero SDK?


    v.zero
    @AlbertusLM
    @Braintree_Dev
    *critical features for the project

    View full-size slide

  51. Why Braintree v.zero SDK?


    v.zero
    @AlbertusLM
    @Braintree_Dev
    *critical features for the project

    View full-size slide

  52. Why Spark core?
    @AlbertusLM
    @Braintree_Dev

    View full-size slide

  53. Why Spark core?
    > Open Source
    @AlbertusLM
    @Braintree_Dev

    View full-size slide

  54. Why Spark core?
    > Open Source
    > Wifi ready
    @AlbertusLM
    @Braintree_Dev

    View full-size slide

  55. Why Spark core?
    > Open Source
    > Wifi ready
    > Tiny size
    @AlbertusLM
    @Braintree_Dev

    View full-size slide

  56. Why Spark core?
    > Open Source
    > Wifi ready
    > Tiny size
    > Multi-language
    @AlbertusLM
    @Braintree_Dev

    View full-size slide

  57. Why Spark core?
    > Open Source
    > Wifi ready
    > Tiny size
    > Multi-language
    > Active community
    @AlbertusLM
    @Braintree_Dev

    View full-size slide

  58. Why Spark core?
    > Open Source
    > Wifi ready
    > Tiny size
    > Multi-language
    > Active community
    > # of plugins
    @AlbertusLM
    @Braintree_Dev

    View full-size slide

  59. Problems
    > v.zero plugin not available
    > not plugin Spark - WooCommerce
    @AlbertusLM
    @Braintree_Dev

    View full-size slide

  60. LET’S CODE OUR MODULE
    CHALLENGE ACCEPTED

    View full-size slide

  61. Things to consider
    @AlbertusLM
    @Braintree_Dev

    View full-size slide

  62. Things to consider
    @AlbertusLM
    @Braintree_Dev
    > Custom payment module from scratch

    View full-size slide

  63. Things to consider
    @AlbertusLM
    @Braintree_Dev
    > Custom payment module from scratch
    > Using WooCommerce Checkout Manager

    View full-size slide

  64. Things to consider
    @AlbertusLM
    @Braintree_Dev
    > Custom payment module from scratch
    > Using WooCommerce Checkout Manager
    > Prototype version

    View full-size slide

  65. Things to consider
    @AlbertusLM
    @Braintree_Dev
    > Custom payment module from scratch
    > Using WooCommerce Checkout Manager
    > Prototype version
    -Plugin in alpha phase
    • Core files modified
    • Core templates modified

    View full-size slide

  66. Things to consider
    @AlbertusLM
    @Braintree_Dev
    > Custom payment module from scratch
    > Using WooCommerce Checkout Manager
    > Prototype version
    -Plugin in alpha phase
    • Core files modified
    • Core templates modified
    -Payment module in beta phase
    • Transaction ID saved
    • Fully functional

    View full-size slide

  67. Issue
    @AlbertusLM
    @Braintree_Dev
    This button submits
    the whole form

    View full-size slide

  68. @AlbertusLM
    @Braintree_Dev
    This drop-in payment UI form is
    totally created and managed by
    v.zero SDK
    This form is never submitted to Braintree, so we don’t have
    the payment nonce to finish the transaction
    Impact on v.zero SDK

    View full-size slide

  69. Solution
    @AlbertusLM
    @Braintree_Dev
    This checkbox (1) triggers a
    function which submits the UI
    form (2), stores the payment
    method nonce value in a hidden
    field (3) and enables the general
    submit button (4) (1)
    (4)
    (2)
    (3)

    View full-size slide

  70. Connecting to Spark Core
    @AlbertusLM
    @Braintree_Dev
    (1) configuring the access to the
    device
    (2) calling the functions
    (1)
    (2)

    View full-size slide

  71. dem
    @AlbertusLM
    @Braintree_Dev

    View full-size slide

  72. Plan
    B
    @AlbertusLM
    @Braintree_Dev
    youtu.be/7jYdduBUfVs

    View full-size slide

  73. > Conclusion_
    @AlbertusLM
    @Braintree_Dev

    View full-size slide

  74. IoT is
    NOT flash in the pan
    flic.kr/p/8RU8QS

    View full-size slide

  75. eCommerce
    IoT
    Why not?

    View full-size slide

  76. @AlbertusLM
    @Braintree_Dev
    Olympo of Payments
    in
    visible
    elega
    n
    t
    ultr
    a
    slim
    Payment Gateway

    View full-size slide

  77. +
    =
    +
    Why not?
    +
    Braintree v.zero SDK

    View full-size slide

  78. > Questions?_
    @AlbertusLM
    @Braintree_Dev

    View full-size slide

  79. Source'photo

    View full-size slide

  80. Alberto López
    [email protected]
    @AlbertusLM / @Braintree_Dev
    ATHENS, 30-31 MAY
    2015.battlehack.org/athens
    THANKS!

    View full-size slide