Alberto López Braintree_Dev.

<Advocate/>

Starting from zero: a modern way to make payments

γεια@albertuslm

alberto.lopez@getbraintree.com

alopezmartin@paypal.com

battlehack.org

@AlbertusLM@Braintree_Dev

@AlbertusLM@Braintree_Dev

30-31 MAY

One Axe

@AlbertusLM@Braintree_Dev

@AlbertusLM@Braintree_Dev

100.000 USD

@AlbertusLM@Braintree_Dev

Alberto López Braintree_Dev.

<Advocate/>

@AlbertusLM@Braintree_Dev

Starting from zero: a modern way to make payments

“payments are painful”

@AlbertusLM@Braintree_Dev

User Experience

@AlbertusLM@Braintree_Dev

What is UX?

"User experience" encompasses all aspects of the end-user's interaction with the company,

its services, and its products.

Nielsen & Norman

@AlbertusLM@Braintree_Dev

@AlbertusLM@Braintree_Dev

Business translation

= $

User Experience

@AlbertusLM@Braintree_Dev

costumer

merchant

developer

Hercul-UX

@AlbertusLM@Braintree_Dev

<costumer/>

@AlbertusLM@Braintree_Dev

> Responsive design_

<costumer/>

@AlbertusLM@Braintree_Dev

goo.gl/7Y6omH

@AlbertusLM@Braintree_Dev

> Type of credit card_

<costumer/>

@AlbertusLM@Braintree_Dev

@AlbertusLM@Braintree_Dev

*It’s on Wikipedia

@AlbertusLM@Braintree_Dev

@AlbertusLM@Braintree_Dev

@AlbertusLM@Braintree_Dev

@AlbertusLM@Braintree_Dev

Hercul-UX

@AlbertusLM@Braintree_Dev

> cvv, cvc, cid_

<costumer/>

@AlbertusLM@Braintree_Dev

@AlbertusLM@Braintree_Dev

@AlbertusLM@Braintree_Dev

@AlbertusLM@Braintree_Dev

@AlbertusLM@Braintree_Dev

@AlbertusLM@Braintree_Dev

Hercul-UX

@AlbertusLM@Braintree_Dev

> Checking the Credit Card_

<costumer/>

@AlbertusLM@Braintree_Dev

http://goo.gl/YR7pRa

@AlbertusLM@Braintree_Dev

Luhn algoritm

@AlbertusLM@Braintree_Dev

@AlbertusLM@Braintree_Dev

@AlbertusLM@Braintree_Dev

@AlbertusLM@Braintree_Dev

Hercul-UX

@AlbertusLM@Braintree_Dev

> Expiration date_

<costumer/>

@AlbertusLM@Braintree_Dev

@AlbertusLM@AlbertusLM@Braintree_Dev

@AlbertusLM@Braintree_Dev @AlbertusLM@Braintree_Dev

Hercul-UX

@AlbertusLM@Braintree_Dev

> Visible labels_

<costumer/>

@AlbertusLM@Braintree_Dev

@AlbertusLM@Braintree_Dev

@AlbertusLM@Braintree_Dev

Hercul-UX

@AlbertusLM@Braintree_Dev

> # of digits_

<costumer/>

@AlbertusLM@Braintree_Dev

Card Number of Digits

AMEX 15

Visa 13 or 16

MasterCard 16

Discover 16

@AlbertusLM@Braintree_Dev

@AlbertusLM@Braintree_Dev

@AlbertusLM@Braintree_Dev

Hercul-UX

@AlbertusLM@Braintree_Dev

> ¿Creativity? Not in forms!_

<costumer/>

@AlbertusLM@Braintree_Dev

@AlbertusLM@Braintree_Dev

@AlbertusLM@Braintree_Dev

@AlbertusLM@Braintree_Dev

Hercul-UX

@AlbertusLM@Braintree_Dev

<developer/>

@AlbertusLM@Braintree_Dev

> Variety of languages_

<developer/>

@AlbertusLM@Braintree_Dev

<client side/>

v.zero

@AlbertusLM@Braintree_Dev

<server side/>

v.zero

@AlbertusLM@Braintree_Dev

> Easy integration_

<developer/>

@AlbertusLM@Braintree_Dev

@AlbertusLM@Braintree_Dev

dem@AlbertusLM@Braintree_Dev

<merchant/>

@AlbertusLM@Braintree_Dev

> Safe Payment Gateway_

<merchant/>

@AlbertusLM@Braintree_Dev

@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

client_token

payment_nonce

@AlbertusLM@Braintree_Dev

> Payment Options_

<merchant/>

@AlbertusLM@Braintree_Dev

OFF

ON

ON

ON

ON

OFF

ON

ON

ON

ON

FUTURE Payment Method

C&D Cards

v.zero

@AlbertusLM@Braintree_Dev

<merchant/>

> Types of payments_

<merchant/>

@AlbertusLM@Braintree_Dev

Simple payments Recurring Billing Marketplaces Partners

v.zero

@AlbertusLM@Braintree_Dev

Unique Payment Payment in Vault

v.zero

@AlbertusLM@Braintree_Dev

> Conclusion_

@AlbertusLM@Braintree_Dev

@AlbertusLM@Braintree_Dev

Olympo of Payments

invisi

ble

eleg

ant

ultr

a slim

Payment Gateway

Hercul-UX

@AlbertusLM@Braintree_Dev

> Links_

@AlbertusLM@Braintree_Dev

Braintree: braintreepayments.com

Get Started with Braintree developers.braintreepayments.com

Braintree v.zero: braintreepayments.com/v.zero

Sandbox environment: sandbox.braintreegateway.com

@AlbertusLM@Braintree_Dev

> Questions?_

@AlbertusLM@Braintree_Dev

Source'photo

Alberto López alberto.lopez@getbraintree.com

@AlbertusLM / @Braintree_Dev

ATHENS, 30-31 MAY

2015.battlehack.org/athens

THANKS!