Embed Size (px)
Citation preview
WordPress, WooCommerce & IoT
Alberto López Braintree_Dev.
<Advocate/>
https://flic.kr/p/6kFQBc
we <3 hackers
@AlbertusLM@Braintree_Dev
we <3 hacking
@AlbertusLM@Braintree_Dev
we <3 innovation
@AlbertusLM@Braintree_Dev
we <3
@AlbertusLM@Braintree_Dev
My story…
@AlbertusLM@Braintree_Dev
@AlbertusLM@Braintree_Dev
Era of rapid prototyping
@AlbertusLM@Braintree_Dev
@AlbertusLM@Braintree_Dev
Internet of Things everything@AlbertusLM@Braintree_Dev
The Hype Cicle_
@AlbertusLM@Braintree_Dev
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
@AlbertusLM@Braintree_Dev
@AlbertusLM@Braintree_Dev
Get started on IoT
Raspberry Pi
@AlbertusLM@Braintree_Dev
Arduino Yún
@AlbertusLM@Braintree_Dev
Intel Galileo
@AlbertusLM@Braintree_Dev
Spark Core
@AlbertusLM@Braintree_Dev
Everybody <3 chocolate
@AlbertusLM@Braintree_Dev
Candy Machine!
@AlbertusLM@Braintree_Dev
The project´s stack
@AlbertusLM@Braintree_Dev
Braintree v.zero SDK
<backend><frontend>
v1.0
The pursuit of Empire
@AlbertusLM@Braintree_Dev
Candies for everybody!
@AlbertusLM@Braintree_Dev
Challenges
> Scalability
> Oprational management
> Sustainable Growth
> Stakeholders
@AlbertusLM@Braintree_Dev
Candy Machine 2.0!
@AlbertusLM@Braintree_Dev
> Case Study_
@AlbertusLM@Braintree_Dev
The project´s stack
@AlbertusLM@Braintree_Dev
Braintree v.zero SDK
v2.0
Why WordPress?
@AlbertusLM@Braintree_Dev
> Open Source
> Scalable
> Easy to manage
> Thriving ecosystem
> Mobile friendly
*critical features for the project
4.1.1
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
@AlbertusLM@Braintree_Dev
16/04/2015
goo.gl/IYy1ls
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
Why Braintree v.zero SDK?
<frontend/>
<backend/>v.zero
@AlbertusLM@Braintree_Dev
*critical features for the project
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
Why Spark core?
> Open Source
> Wifi ready
> Tiny size
> Multi-language
> Active community
> # of plugins
@AlbertusLM@Braintree_Dev
Problems
> v.zero plugin not available
> not plugin Spark - WooCommerce
@AlbertusLM@Braintree_Dev
LET’S CODE OUR MODULE
CHALLENGE ACCEPTED
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
Issue
@AlbertusLM@Braintree_Dev
This button submits the whole form
@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
@AlbertusLM@Braintree_Dev
client server BT Server
I need I client token to create the Drop-In
1. Creating the Drop-in UI form…
Please, the client Token
v.zero SDK checkout flow
@AlbertusLM@Braintree_Dev
client server BT Server
Client Token
1. Creating the Drop-in UI form…
Client Token
v.zero SDK checkout flow
@AlbertusLM@Braintree_Dev
client server BT Server
Create Drop In Payment form UI here
1. Creating the Drop-in UI form…
v.zero SDK checkout flow
@AlbertusLM@Braintree_Dev
client server BT Server
User clicks on pay button, give me the payment nonce
2. Submitting form with payment information
PAY
NONCE: adas-123f-3sdq45-f34
v.zero SDK checkout flow
@AlbertusLM@Braintree_Dev
client server BT ServerNONCE from Braintree
& rest of information
3. Finishing transaction
nonce to finish transaction
transaction ID
transaction ID
v.zero SDK checkout flow
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)
The code of the solution…
@AlbertusLM@Braintree_Dev
(1)
(2)
(1) Creating Drop UI form (2) Trigger checkbox
The code of the solution…
@AlbertusLM@Braintree_Dev
(3)
(4)
(3) Callback function to get the nonce (4) storing the nonce within hidden
field
Finishing the payment…
@AlbertusLM@Braintree_Dev
(1)
(2 & 3)
(4)
(1) finishing the payment using the payment method nonce
(2) completing the order (3) saving the transactionID in our
DB (4) storing the transaction id value to
show it on our “thank you page”
Connecting to Spark Core
@AlbertusLM@Braintree_Dev
(1) configuring the access to the device
(2) calling the functions
(1)
(2)
demBETA
@AlbertusLM@Braintree_Dev
Plan B
@AlbertusLM@Braintree_Dev
youtu.be/7jYdduBUfVs
> Conclusion_
@AlbertusLM@Braintree_Dev
internet of things tendencia
Year of Internet of Things
IoT is NOT flash in the pan
flic.kr/p/8RU8QS
WordPress &
WooCommerce IoT
Why not?
+ =
+=
+
Why not?
> Questions?_
@AlbertusLM@Braintree_Dev
Source'photo
