the wizardry of braintree hosted fields - php
TRANSCRIPT
@DeveloperSteve@Braintree_dev@Braintree_dev
The Wizardry of Hosted FieldsSteven CooperDeveloper AdvocatePayPal / Braintree
@DeveloperSteve@Braintree_dev@Braintree_dev
>and now Wizardry _
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
@DeveloperSteve@Braintree_dev
$1.16 BillionPayments processed by PayPal in
Q2 2015
@DeveloperSteve@Braintree_dev
Payments made easy
Start accepting PayPal, Bitcoin, cards, and whatever’s next -- all with a single integration.
As used by
@DeveloperSteve@Braintree_dev@Braintree_dev
>and now moreWizardry _
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
A DeveloperHi im Pixel
Pete
Im really not a
square
Im a bit of a wizard when it comes to code
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
And then comes a clientHi, Im a client
Yeah you look like
one
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
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
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
PCI DaemonGive me all your
user inputOh yeah that guy is
watchingWell this
will be fun wont it
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
PCI DaemonBuy
ViagraJust get rid of him and make it look good
Its ok ill fix it Click
HERE
Buy Silis
@DeveloperSteve@Braintree_dev@Braintree_dev
LEVEL 1the quest for drop-in UI
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
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!
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
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
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
The Client v2Well that was
easyNow to show…
THE CLIENT
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
The Client v2So What do you
think?It looks
AWESOME!!
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
The Client v2Yes go on
Well… there is just one
thing
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
The Client v2Yes go on
Well… there is just one
thing
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
The Client v2Move this
here
And make this one green
And this explode
And something with this
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
ZAP
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
The Client v2That’s better
Ribbit Ribbit
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
The Client v2Hrmm fine
Can you just
change the inputs ribbit
@DeveloperSteve@Braintree_dev@Braintree_dev
LEVEL 1Complete
@DeveloperSteve@Braintree_dev@Braintree_dev
LEVEL 2The Next Level
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
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
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
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
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
Inner properties
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
Custom ClassIm so Classy
LOLOh you’re serious!Well its certainly
custom
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
Media Queries
Not again
Oh no Paparazzi
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
Media Queries
hostedFields: { styles: { "@media screen and (max-width: 700px)": { "input": { "font-size": "14pt" } }},}
That’s better
So much style
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
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
@DeveloperSteve@Braintree_dev@Braintree_dev
BUT WAITYES there is more!
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
Bonus roundHrmm what if we added a
PayPal Button
Id Pay that
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
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
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
SHAZAM
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
Bonus roundIt’s a website not a maze
Totes Amaze
*Facepalm*
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
The Client v2So NOW what do
you think?
Its perfect
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
The Client v2Oh yeah that guy
/me is scared Mwahah
im back
@DeveloperSteve@Braintree_dev@Braintree_dev
LEVEL 2Complete
@DeveloperSteve@Braintree_dev@Braintree_dev
LEVEL 3Casting Security
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
PCI DSSPayment Card Industry
Digital Security Standard
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
pcisecuritystandards.org
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
PCI DSS 3.0
Pwned!
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
The Client v2Ha take that
Away with you
@DeveloperSteve@Braintree_dev@Braintree_dev
LEVEL 3Complete
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
EVERYONE STOP
ITS DEMO TIME!
@DeveloperSteve@Braintree_dev@Braintree_dev
And they all lived…
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
braintreepayments.com/features/hosted-fields
Check the page source for hidden
games!
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
Thank you Thank you for being such an
awesome audience
We really couldn’t have done it without you
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
The 8Bit Actors
Developer UserPYTHO
N End Point
Module
PCI DAEMON
Javascript
PCI
@DeveloperSteve@Braintree_dev@Braintree_dev
ThanksComments? Questions?
Love to talk more
developers.braintreepayments.com@Braintree_dev
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
8Bit Cats with Lasers