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

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. γεια
   @albertuslm
   alberto.lopez@getbraintree.com
   alopezmartin@paypal.com
   

   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
    alberto.lopez@getbraintree.com
    @AlbertusLM / @Braintree_Dev
    ATHENS, 30-31 MAY
    2015.battlehack.org/athens
    THANKS!
    

    View Slide