WordPress, WooCommerce e IoT

WordPress, WooCommerce & IoT

Alberto López Braintree_Dev.

<Advocate/>

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

hola@albertuslm

[email protected]

[email protected]

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

Alberto López [email protected]

@AlbertusLM / @Braintree_Dev