The Wizardry of Braintree hosted fields - PHP
-
Upload
steven-cooper -
Category
Technology
-
view
654 -
download
1
Transcript of The Wizardry of Braintree hosted fields - PHP
![Page 1: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/1.jpg)
@DeveloperSteve@Braintree_dev@Braintree_dev
The Wizardry of Hosted FieldsSteven CooperDeveloper AdvocatePayPal / Braintree
![Page 2: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/2.jpg)
@DeveloperSteve@Braintree_dev@Braintree_dev
>and now Wizardry _
![Page 3: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/3.jpg)
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
![Page 4: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/4.jpg)
@DeveloperSteve@Braintree_dev
$1.16 BillionPayments processed by PayPal in
Q2 2015
![Page 5: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/5.jpg)
@DeveloperSteve@Braintree_dev
Payments made easy
Start accepting PayPal, Bitcoin, cards, and whatever’s next -- all with a single integration.
As used by
![Page 6: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/6.jpg)
@DeveloperSteve@Braintree_dev@Braintree_dev
>and now moreWizardry _
![Page 7: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/7.jpg)
@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
![Page 8: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/8.jpg)
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
And then comes a clientHi, Im a client
Yeah you look like
one
![Page 9: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/9.jpg)
@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
![Page 10: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/10.jpg)
@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
![Page 11: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/11.jpg)
@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
![Page 12: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/12.jpg)
@DeveloperSteve@Braintree_dev@Braintree_dev
LEVEL 1the quest for drop-in UI
![Page 13: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/13.jpg)
@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!
![Page 14: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/14.jpg)
@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
![Page 15: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/15.jpg)
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
The Client v2Well that was
easyNow to show…
THE CLIENT
![Page 16: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/16.jpg)
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
The Client v2So What do you
think?It looks
AWESOME!!
![Page 17: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/17.jpg)
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
The Client v2Yes go on
Well… there is just one
thing
![Page 18: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/18.jpg)
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
The Client v2Yes go on
Well… there is just one
thing
![Page 19: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/19.jpg)
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
The Client v2Move this
here
And make this one green
And this explode
And something with this
![Page 20: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/20.jpg)
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
ZAP
![Page 21: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/21.jpg)
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
The Client v2That’s better
Ribbit Ribbit
![Page 22: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/22.jpg)
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
The Client v2Hrmm fine
Can you just
change the inputs ribbit
![Page 23: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/23.jpg)
@DeveloperSteve@Braintree_dev@Braintree_dev
LEVEL 1Complete
![Page 24: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/24.jpg)
@DeveloperSteve@Braintree_dev@Braintree_dev
LEVEL 2The Next Level
![Page 25: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/25.jpg)
@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
![Page 26: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/26.jpg)
@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
![Page 27: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/27.jpg)
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
Inner properties
![Page 28: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/28.jpg)
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
Custom ClassIm so Classy
LOLOh you’re serious!Well its certainly
custom
![Page 29: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/29.jpg)
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
Media Queries
Not again
Oh no Paparazzi
![Page 30: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/30.jpg)
@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
![Page 31: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/31.jpg)
@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
![Page 32: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/32.jpg)
@DeveloperSteve@Braintree_dev@Braintree_dev
BUT WAITYES there is more!
![Page 33: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/33.jpg)
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
Bonus roundHrmm what if we added a
PayPal Button
Id Pay that
![Page 34: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/34.jpg)
@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
![Page 35: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/35.jpg)
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
SHAZAM
![Page 36: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/36.jpg)
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
Bonus roundIt’s a website not a maze
Totes Amaze
*Facepalm*
![Page 37: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/37.jpg)
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
The Client v2So NOW what do
you think?
Its perfect
![Page 38: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/38.jpg)
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
The Client v2Oh yeah that guy
/me is scared Mwahah
im back
![Page 39: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/39.jpg)
@DeveloperSteve@Braintree_dev@Braintree_dev
LEVEL 2Complete
![Page 40: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/40.jpg)
@DeveloperSteve@Braintree_dev@Braintree_dev
LEVEL 3Casting Security
![Page 41: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/41.jpg)
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
PCI DSSPayment Card Industry
Digital Security Standard
![Page 42: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/42.jpg)
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
pcisecuritystandards.org
![Page 43: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/43.jpg)
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
PCI DSS 3.0
Pwned!
![Page 44: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/44.jpg)
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
The Client v2Ha take that
Away with you
![Page 45: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/45.jpg)
@DeveloperSteve@Braintree_dev@Braintree_dev
LEVEL 3Complete
![Page 46: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/46.jpg)
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
EVERYONE STOP
ITS DEMO TIME!
![Page 47: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/47.jpg)
@DeveloperSteve@Braintree_dev@Braintree_dev
And they all lived…
![Page 48: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/48.jpg)
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
braintreepayments.com/features/hosted-fields
Check the page source for hidden
games!
![Page 49: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/49.jpg)
@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
![Page 50: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/50.jpg)
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
The 8Bit Actors
Developer UserPYTHO
N End Point
Module
PCI DAEMON
Javascript
PCI
![Page 51: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/51.jpg)
@DeveloperSteve@Braintree_dev@Braintree_dev
ThanksComments? Questions?
Love to talk more
developers.braintreepayments.com@Braintree_dev
![Page 52: The Wizardry of Braintree hosted fields - PHP](https://reader036.fdocuments.in/reader036/viewer/2022062400/589fbd821a28ab91398b47af/html5/thumbnails/52.jpg)
@DeveloperSteve@Braintree_dev
/\$\d+/@DeveloperSteve@Braintree_dev
8Bit Cats with Lasers