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 Slide

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

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

    View Slide

  3. View Slide

  4. battlehack.org
    @AlbertusLM
    @Braintree_Dev

    View Slide

  5. @AlbertusLM
    @Braintree_Dev
    30-31 MAY

    View Slide

  6. One Axe
    @AlbertusLM
    @Braintree_Dev

    View Slide

  7. @AlbertusLM
    @Braintree_Dev

    View Slide

  8. 100.000 USD
    @AlbertusLM
    @Braintree_Dev

    View Slide

  9. we <3 hackers
    @AlbertusLM
    @Braintree_Dev

    View Slide

  10. we <3 innovation
    @AlbertusLM
    @Braintree_Dev

    View Slide

  11. > Levers of innovation_
    @AlbertusLM
    @Braintree_Dev

    View Slide

  12. Era of rapid prototyping
    @AlbertusLM
    @Braintree_Dev

    View Slide

  13. @AlbertusLM
    @Braintree_Dev

    View Slide

  14. Internet of Things everything
    @AlbertusLM
    @Braintree_Dev

    View Slide

  15. The Hype Cicle_
    @AlbertusLM
    @Braintree_Dev

    View Slide

  16. 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 Slide

  17. @AlbertusLM
    @Braintree_Dev

    View Slide

  18. View Slide

  19. > Case Study_
    @AlbertusLM
    @Braintree_Dev
    fake

    View Slide

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

    View Slide

  21. @AlbertusLM
    @Braintree_Dev
    Being an inventor

    View Slide

  22. Everybody <3 chocolate
    @AlbertusLM
    @Braintree_Dev

    View Slide

  23. ΕΥΡΗΚΑ

    View Slide

  24. Candy Machine!
    @AlbertusLM
    @Braintree_Dev

    View Slide

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

    View Slide

  26. @AlbertusLM
    @Braintree_Dev

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  40. 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 Slide

  41. 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 Slide

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

    View Slide

  43. 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 Slide

  44. 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 Slide

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

    View Slide

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

    View 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

    View 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

    View 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

    View Slide

  50. 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 Slide

  51. 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 Slide

  52. Why Braintree v.zero SDK?


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

    View Slide

  53. Why Braintree v.zero SDK?


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

    View Slide

  54. Why Spark core?
    @AlbertusLM
    @Braintree_Dev

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  62. LET’S CODE OUR MODULE
    CHALLENGE ACCEPTED

    View Slide

  63. Things to consider
    @AlbertusLM
    @Braintree_Dev

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  67. 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 Slide

  68. 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 Slide

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

    View Slide

  70. @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 Slide

  71. 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 Slide

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

    View Slide

  73. dem
    @AlbertusLM
    @Braintree_Dev

    View Slide

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

    View Slide

  75. > Conclusion_
    @AlbertusLM
    @Braintree_Dev

    View Slide

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

    View Slide

  77. eCommerce
    IoT
    Why not?

    View Slide

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

    View Slide

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

    View Slide

  80. > Questions?_
    @AlbertusLM
    @Braintree_Dev

    View Slide

  81. Source'photo

    View Slide

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

    View Slide