Braintree SDK v.zero or "A payment gateway walks into a bar..." - Devfest Nantes 2014

v.zeroA modern foundation for accepting Payments

Alberto López

Braintree_Dev. <Advocate/>

DevFest Nantes 2014

#DevFest #Nantes

@Braintree_dev

@AlbertusLM

m Commerce in France

#DevFest #Nantes @Braintree_dev @AlbertusLM

2014-‐ 5K model A -‐ 4K model B -‐ 6K watch C

# Android Devices


-‐ 1M ice-‐Creams -‐ 2M clothes -‐ 43M sports

# euros mcommerce / vertical of business

PLEASE, BUSINESS PRESENTATION NO


Drop-in UI

> Mobile, born and raise


PLEASE, PRODUCT PRESENTATION NO


v.zeroA modern foundation for accepting Payments

Alberto López


DevFest Nantes 2014


v.zero

Alberto López


DevFest Nantes 2014

A payment gateway walks into a bar…Thanks to Justin Woo ;)

A modern foundation for accepting Payments


A bank account walks into a bar…


…and says to the bartender:

“I’ve been having a hard time meeting people”

The bartender answers:

“Wait, aren’t you supposed to be good at generating…


“interest”


I have a girlfriend


I want to propose to her


(shhh, don’t say it to her)


This is me Looking for a ring…

https://flic.kr/p/cHEgTj#DevFest #Nantes @Braintree_dev @AlbertusLM

… on the Internet


I am an a**hole


I am an a**hole

Go to a J

eweller

y


NO


I am a lazy person


Let’s go to e-surf!


Things I thi

nk that shou

ld

change for m

aking easier

purchases on

Internet


A payment gateway walks into a bar…


…the bartender says:

“Why do you keep coming in here day after day ?”

The payment gateway looks at him miserably and says:

“I’m just looking for some…


“validation”


Amazing jewellery store

http://goo.gl/PYb26w

Captcha

#DevFest #Nantes @AlbertusLM@Braintree_dev

Completely Automated Public Turing Test To Tell Computers

and Humans Apart


An American Express walks into a bar in Moscow…



“Sorry mate, You aren’t allowed in here without a ….”


“VISA”


Not autodetect credit card type


*It’s on Wikipedia#DevFest #Nantes @Braintree_dev @AlbertusLM

Restaurant onlINe


http://jquerycreditcardvalidator.com

http://creditcardjs.com


http://creditcardjs.com

https://github.com/jgrana/CreditCardEntry


I <3 v.Zero


CVV, CVC2, CID…



·_· mmm

o_· ooohh


O_o OMG


O_O WTF


#_# dead


http://jessepollak.github.io/card/

http://kenkeiter.com/skeuocard/


http://jessepollak.github.io/card/

http://kenkeiter.com/skeuocard/

I <3 v.Zero



…and tries to pick up someone at the bar, but she turns him down.

The Payment gateway looks at the

bartender and says:

“Well, this is awkward, normally I’m the one who…

“declines”


Not validate a Credit Card # field inline


http://goo.gl/YR7pRa


Luhn algorithm


http://en.wikipedia.org/wiki/Luhn_algorithm

http://rosettacode.org/wiki/Luhn_test_of_credit_card_numbers


http://capdroid.wordpress.com/2011/09/19/creditdebit-card-validation-using-luhn-mod10-algorithm/

http://codereview.stackexchange.com/questions/59521/credit-card-validator-using-luhns-algorithm


I <3 v.Zero


Setting up the date

https://flic.kr/p/efSMKw


I <3 v.Zero


Keep labels visible at all times


I <3 v.Zero


http://mrg.bz/ft5PmH

no limiting the number of digits


Card Number of Digits

AMEX 15

Visa 13 or 16

MasterCard 16

Discover 16



·_· mmm

O_o OMG


O_O WTF


I <3 v.Zero


A Payment Gateway walks into a Hawaiian bar…



“Aloha!”

The Payment Gateway, confused, says:

“Sorry, I don’t understand you”

So,the bartender answers:

“Well, this is because you are not…”#DevFest #Nantes @Braintree_dev @AlbertusLM

“native”


Client Side


v.Zero

1. Obtain a Client Token

Request the client token from your server, then initialize Braintree and present drop-in UI:


To present the Drop In UI, set the EXTRA_CLIENT_TOKEN value to the client token and start the activity:


@Override protected void onActivityResult(int requestCode, int resultCode, Intent data) { if (requestCode == REQUEST_CODE) { if (resultCode == BraintreePaymentActivity.RESULT_OK) { String paymentMethodNonce = data.getStringExtra(BraintreePaymentActivity.EXTRA_PAYMENT_METHOD_NONCE); postNonceToServer(paymentMethodNonce); } } }

2. Present Drop In UI

When your user provides payment information, your app code receives a paymentMethodNonce in your calling Activity's onActivityResult, which you will override to get the response:


3. Post the Payment Method Nonce to Your Server

Send the resulting payment method nonce to your server


Server Side


v.Zero

1. Import Braintree

In your code, configure the environment and API credentials:



2. Provide a Client Token to Your client

Your server is responsible for creating a client token, which contains all authorization and configuration information your client needs to initialize a Braintree Client SDK to communicate with Braintree.

3. Create a transaction

Once your client successfully obtains a customer payment method, it receives a payment method nonce representing customer payment authorization, which it then sends to your server.


I <3 v.Zero


NATIVE Payment Gateway


security


client_token

payment_nonce

SECURE Payment Gateway


Additional payment methods



Braintree Account


GLOBAL Payment Gateway

I <3 v.Zero


A Payment Gateway walks into a bar…


…and says to the bartender:

“Hey, do you have any dessert?”

The bartender answers:

“Well, may be you want an…


“apple”



“You are new to this joint, aren’t you?”

The Payment Gateway look at him and says:

“Yeah, I just…”


“discovered” it


do you <3 v.Zero?


By the way…


I only have the flowers

https://flic.kr/p/oVByur


Tank you!


Original Source

S


http://th04.deviantart.net/fs70/PRE/f/2010/244/0/8/link_background_v1_by_samfisher202-d2xr760.png

Braintree: https://www.braintreepayments.com/

Get Started with Braintree https://developers.braintreepayments.com/android+php/start/overview

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

Sandbox environment: https://sandbox.braintreegateway.com/login


Questions?

Think twice before asking,

seriously

Source photo

http://4.bp.blogspot.com/-zO6UL9o3v2U/TxYUGSkeRJI/AAAAAAAAINk/PmvuzM2LD_g/s1600/chuck+norris.jpg

Alberto López - Braintree_Dev. [email protected]

@AlbertusLM / @Braintree_dev

mailto:[email protected]

Braintree SDK v.zero or "A payment gateway walks into a bar..." - Devfest Nantes 2014

Technology

Transcript of Braintree SDK v.zero or "A payment gateway walks into a bar..." - Devfest Nantes 2014