The Wizardry of Braintree hosted fields - PHP

@DeveloperSteve@Braintree_dev@Braintree_dev

The Wizardry of Hosted FieldsSteven CooperDeveloper AdvocatePayPal / Braintree


>and now Wizardry _

@DeveloperSteve@Braintree_dev

/\$\d+/@DeveloperSteve@Braintree_dev


$1.16 BillionPayments processed by PayPal in

Q2 2015


Payments made easy

Start accepting PayPal, Bitcoin, cards, and whatever’s next -- all with a single integration.

As used by


>and now moreWizardry _



A DeveloperHi im Pixel

Pete

Im really not a

square

Im a bit of a wizard when it comes to code



And then comes a clientHi, Im a client

Yeah you look like

one



The QuestWill you help code Braintree into my

website? Why yes, yes I would love to

And im sure you will never ask for any changes once I am

done

No id be ever so happy



PCI DaemonGive me all your

user inputOh yeah that guy is

watchingWell this

will be fun wont it



PCI DaemonBuy

ViagraJust get rid of him and make it look good

Its ok ill fix it Click

HERE

Buy Silis


LEVEL 1the quest for drop-in UI



Setting up sandbox.braintreegateway.co

mOK So First

Things First

I have the key I have the secret

PHP SDK reporting for duty

Now that’s a …… PHP CallHEY PHP SDK!



Coding

require 'Braintree.php';

Braintree_Configuration::environment('sandbox');Braintree_Configuration::merchantId('23nd25g4kn7gnqbb');Braintree_Configuration::publicKey('8552x2ym5bvhsycp');Braintree_Configuration::privateKey('17f3279171d4fd90ee9cd5256be17abf');

$token = Braintree_ClientToken::generate(array());

<script src="https://js.braintreegateway.com/v2/braintree.js"></script><script>

braintree.setup("<?php echo $token;?>", 'dropin', { container: 'checkout'});</script>

Wow Totes easy

That form is so PCI right now

The $_POST

has arrived

Yayyy ive got mail

Hey im hidden

$result = Braintree_Transaction::sale(array('amount' => 100.00,'paymentMethodNonce' => $_POST['nonce'],

));

So much win



The Client v2Well that was

easyNow to show…

THE CLIENT



The Client v2So What do you

think?It looks

AWESOME!!



The Client v2Yes go on

Well… there is just one

thing



The Client v2Yes go on

Well… there is just one

thing



The Client v2Move this

here

And make this one green

And this explode

And something with this



ZAP



The Client v2That’s better

Ribbit Ribbit



The Client v2Hrmm fine

Can you just

change the inputs ribbit


LEVEL 1Complete


LEVEL 2The Next Level



Basic Integration <script src="https://js.braintreegateway.com/js/beta/braintree-hosted-fields-beta.16.min.js"></script> <script> braintree.setup("<%= @client_token %>", "custom", { id: "hostedform", hostedFields: { number: { selector: "#card-number" }, cvv: { selector: "#card-cvv" }, expirationDate: { selector: "#card-exp" }, } }); </script>

Im now Javascript

Hi again



Outer propertieshostedFields: { styles: { "input": { "font-size": "16pt", "color": "#3A3A3A" }, ".number": { "font-family": "monospace" }, ":focus": { "color": "blue" }, ".valid": { "color": "green" }, ".invalid": { "color": "red" },},}

That’s so stylin

So much style



Inner properties



Custom ClassIm so Classy

LOLOh you’re serious!Well its certainly

custom



Media Queries

Not again

Oh no Paparazzi



Media Queries

hostedFields: { styles: { "@media screen and (max-width: 700px)": { "input": { "font-size": "14pt" } }},}

That’s better

So much style



Javascript Events

hostedFields: { onFieldEvent: function (event) { if (event.type === "focus") { } else if (event.type === "blur") { } else if (event.type === "fieldStateChange") { console.log(event.isValid); if (event.card) { console.log(event.card.type); } } }}

Functional and good

looking!

Aww thanks


BUT WAITYES there is more!



Bonus roundHrmm what if we added a

PayPal Button

Id Pay that



Adding PayPal

braintree.setup("<%= @client_token %>", "custom", { id: "hostedform", paypal: { container: "paypal-container", }, hostedFields: { // stuff in here }});

I cant container

my excitement

Attach to paypal-

container



SHAZAM



Bonus roundIt’s a website not a maze

Totes Amaze

*Facepalm*



The Client v2So NOW what do

you think?

Its perfect



The Client v2Oh yeah that guy

/me is scared Mwahah

im back


LEVEL 2Complete


LEVEL 3Casting Security



PCI DSSPayment Card Industry

Digital Security Standard



pcisecuritystandards.org



PCI DSS 3.0

Pwned!



The Client v2Ha take that

Away with you


LEVEL 3Complete



EVERYONE STOP

ITS DEMO TIME!


And they all lived…



braintreepayments.com/features/hosted-fields

Check the page source for hidden

games!



Thank you Thank you for being such an

awesome audience

We really couldn’t have done it without you



The 8Bit Actors

Developer UserPYTHO

N End Point

Module

PCI DAEMON

Javascript

PCI


ThanksComments? Questions?

Love to talk more

developers.braintreepayments.com@Braintree_dev



8Bit Cats with Lasers

Technology

The Wizardry of Braintree hosted fields - PHP