Stripe Elements with Laravel (and Vue)

what's up guys Andre here and today I wanted to take a look at stripe elements and how to collect payments using laravel stripe elements is version 3 of stripes API and is quite different from previous versions if you're not familiar with how stripe works generally it's a two-step process step one is to send stripe your users credit card information using their JavaScript API they then return a token to you step two is sending that token to your server-side code and processing payment from there we're going to be mostly focusing on step one the collecting of your users credit card information and the token generation process now in previous versions you were in charge of the formatting and error validation which can get a bit tricky if you take into account all the different edge cases with this new version 3 which they call stripe elements they have a set of customizable pre-built components which handles formatting and validation for you it served up in an iframe on stripe servers making it more secure and leading to a more seamless experience for your users let's take a typical payment form and go through the process of using stripes API so here I have just a typical form it's just using bootstrap and I have a bunch of fields here you may not need all of these fields depending on your use case and I understand that this these should be dropdowns but I was too lazy also the expiry should be two fields but you get the idea so let's go ahead and start so the first step is just to import the stripe API and just put it here I haven't read anywhere that it has to be in the head but in all the examples I see they are in the head so let's put in the head here is the documentation page which you should definitely give a read and here's an example here let's just grab this example and make use of it let's just make a new form group here and paste that code in just reinvent here okay and it's go back so we need for the HTML the CSS scrap all of this and let's just put it in our head for now add some styles here space it in here okay and just grab some JavaScript let's grab all the lines here and let's paste I did just wrap it in an involving function this is actually my publishable key but let's go ahead and put that in our environment file if you go to config services I believe you'll see that there's a section here for stripe and it wants us to find stripe key and stripe sequence so let's go ahead and do that in our environment file so I'll strike key and stripe sequence let's try and put your secret in here as well obviously not going to show you that so you can grab it once you have an account on stripe and you can just go to API and grab it from here we can now replace this msconfig services dot stripe key no have to do that but I like to keep everything nice and tidy in my environment file and if we go back to our payment form and refresh you did this right you'll see a new field here and looking quite good and this is like I said earlier this is actually an iframe and it's housed on stripe server so it's more secure but our next step is to modify this input field so it looks like barbar form here so obviously this is gonna vary depending on how your form looks but in our case we have some HTML re we have some CSS up here that we can modify and I've already done my research so I know what to change here to make it look like our bootstrap form so that's one thing change the box shadow and I think that's it yeah so that looks pretty close to our form so I'm pretty happy with that actually there are a few more things that are not controllable within the CSS but within the JavaScript so down here and the only thing I want to change here is the font we're using a railway and that should look pretty close there you go looks like it's a form on our own server but it's actually on stripe servers and it already has built-in formatting you see there's no space between every four numbers and it also has if I put it like a date that's in the past as validation already so all that's done for you out of the box and it just makes it so much easier than what we had previously let's just add one more CSS thing here let's just add the invalid color we're just copying whatever came in here see if it's red now for the errors there you go that's right awesome if you want separate components for each of these credit-card fields you can do that as well like for example if you want one for the card number one for the expiry one for the CPC if you look at the reference here you'll see that there there are types for that as well so card is the one we have that incorporates all those things into one but you can also separate them if you like by card number expiry and CVC if you go into the QuickStart here there's actually a nice page of examples if I can find it right here which has some really nice examples of what you can what you can do with your with your custom payment form and at first I thought that you were bound to what they had but in my experience it's actually pretty customizable and you can make it we can make it look pretty seamless and your users won't even notice so if you see here we actually have two fields for postal code or zip code you can actually remove that if you like if you see one of the options when you create the card element is to hide the postal code so let's go ahead and do that let's go back to our JavaScript and right here just put this on it's online and we can do high postal code true let's also get rid of this stuff we don't need this anymore since we have our own card element coming from stripe I'm just comment it out and let's see how that looks awesome yeah so you can see that that postal code is no longer there because we already have the Year cool let's also quickly add a label so it's more consistent with everything else should I just put a label right here okay so if you look at our JavaScript code where our form gets submitted it actually calls a stripe token handler method and the code that we copied earlier actually doesn't have that included it's in a different part of the documentation it's right here so let's grab that and put it right here so if all the validation passes and the result comes back with a token and we're passing it through this method and all this method does is it makes a new hidden element with that token which we can use to submit to our server so that's just an example let me just alert the token our ID and we'll just comment this out just to make sure everything's working let's go back to our code so this four to number is a valid test number credit card let's put a valid date in the future and you put anything in here and if this works we should get a token ID alert it to us and that didn't work we also have to put this ID on our form so let's go ahead and do that so let's put an action here method equals post and ID equals payment form okay that should work now let's refresh okay four two four four two four two twenty hey and there you go there's our token so we know that that's working cool let's also confirmed that that hidden field was appended to our form so the form here there it is right there and you see a stripe token and the token right there so this will get passed into our server which is our next step so let's put an action on our form here let's call it let's check out zombie post to the check out endpoint so B let's last check out and make sure it's post okay also we're going to take in the request okay it's import that up and let's just die in dump request all and see if that works well we forgot to uncomment the JavaScript okay yeah do it again okay oh we forgot the CSRF field let's do CSRF and third time is a charm okay there you go we get our requests here and the next step is to put in a package for laravel and we'll charge a payment the library I like to use to handle payments on the server is called stripe level by card list if you're doing subscriptions you should use durable cashier but in our case we're not doing subscription so we'll use this package here oh the first step is to install it using composer okay that's done and make sure again I said this earlier but make sure you have your stripe secret setup in your environment file now here's a documentation it's very well documented and it's pretty much the stripes PHP API poured it to laravel and i'm gonna paste a code snippet I have here okay we have to put it in a try-catch block so let's import the striped lever here it is that one and here's the method you used to charge a payment on the server side so the amount I am just hard coding here to make it 20 bucks currency is Canadian dollars because on in Canada the source is the token that we generated on our front end and it's being passed to our back in here make sure you have this the description again I'm just hard coding it here the receipt email is there's an option in stripe that allows you to send receipts directly from stripe if you give them an email address that's that's here metadata is any other information that you want to store on the server that there's no place for and stripe and yeah so a lot of this is again it's being hard-coded so make sure you pass in the correct information from your own application here I'm also not doing validation but you should definitely do validation here addition and right here if everything goes well is where it will be successful so when it's successful we're just returning back with a success message saying thank you your payment has been accepted and there's actually a few exceptions we have to catch here which we'll do later so let's just see if this works let's go back to our form let's refresh this and just do that for two four two four two four two four two four two there for 20 and submit payment and there you go thank you your payment has been accepted and if we go into our stripe back-end and good payments there it is right there $20 and we can drill down and see use the metadata we passed in description we passed in and expiry card number last four digits if you see here there's no name don't name provided cells and in our PHP API there's actually no selling for name but that's because we have to actually pass it in through our front end when we're creating our token so let's go ahead and do that so right here in our JavaScript right before we create the token we can actually pass in a few more options here so if you just paste that code in and the name isn't options is an object that has a name it's just getting it from our form over there and we can pass in the options here like this options let me show you the documentation for that so you can see here it says name is recommended and also the address is recommended so make sure you pass that in as well so let's just make sure that this works just refresh it again and let's just go ahead and put another payment through and this time that's pass in the name just me okay let's go back here payments might take a second there it is and as you can see now the customer the name is passed through so there you go note that you should always also check for errors after the card is processed on the server for example an expired card is not going to be caught on the front end validation here so make sure you catch the exception is there so here are all the exceptions that are thrown there's an error and the one that we're interested in is the card error exception so let's go ahead and do that so back to work code here obviously there should be in the controller I'm just doing it in the ruts file to show you so the card error exception to import that there it is so if we catch that if there's an error with the card and we can return back with the error and show it to the user now there's actually a whole bunch of stripe cards that have an error so let's quit test this one which is charges declined with an expired card code which is a common case for an error so let's go ahead and I save my code yep go back to our app through freshness and paste that in for 20 K submit and there you go there's an error message there and if we go into our back-end again you'll see that there's a field charge right there awesome one more thing that you might want to do is if it's successful you might want to save this info to your database you also might want to do this if it fails as well so some right here so one more thing I wasn't originally going to do but I decided I'll do it anyways is to extract all the vanilla JavaScript into a review component since a lot of laravel developers use view anyways so let's go ahead and do that I'll try to make it quick so yeah the first thing we'll do is we'll duplicate this view and it'll make one for view called check out view and now we'll npm install while that's going we can put our op Jess let's make a new one called actually let's just use this one and call it card element and we'll call it card element of you okay it's also let's call ID equals app because we need a root namespace it's also add a new around here check out view and it's calling dot slash pew alright we turn our watcher alright save it and there's an error oh I make it card element view so JavaScript components rename this one card element there you go okay card element and it's put that in here somewhere they're just copy this and paste it in here they can just do a card element let's keep the label and we'll do a card element okay that should take care of all the setup why doesn't it show oh yeah I didn't I don't think I added the app that yes I did not add it script SRC equals oh it's the wrong page my bad view oh sorry okay they should do it there you go and the card elements right there okay so the library I'm going to use is called view stripe elements let's get it for install that all right it says build a view component using the card element oh let's do that we don't need this let's grab the card component here and it ends there let's grab the button as well and let's go back to our component okay can you see if that works does see how that looks okay what's the next step has to add all this stuff here okay I don't think we need this light so I seen this one okay and grab the data okay subscribe like and points okay Scrabble methods okay okay the other looks there you go so this is our old wall and this was our new one let's do some cleanup here we don't need this one let's just grab this put it underneath here okay and then we can delete this so this will appear okay it's also put in our let's put in our key here okay actually let's just put this in the component itself all right underneath the card okay and see if that works okay so we have this okay the error messages are not showing up why not okay that's because we actually have to port all our JavaScript over to view so let's go and do that so for our stripe options let's just grab whatever we have in here I already have a copy let's go ahead and do that just paste it right underneath here just take that comment out there you go okay and they don't write the air should show up now okay at least turning red but still not showing the error message that's because we have to port over the error code so right here just this code we have to put over the view so let's go ahead and grab that and this was bound to the change event so let's kind of go ahead and do that for the card element these are actually one here already but I want to call a method instead let's call change speaking about the called change and passing the event and we'll define it down here after pay that doesn't look aligned to me okay methods sorry change and we'll take in the event paste in the code here so all this is saying is if there's an error display it in that error message and if not didn't do nothing so in our card errors over here let's set the V text equals error message and make sure we have done our data do we we don't so let's make an error message here and it set it to nothing actually so all we have to do is just set that properly so they start error message get event a error message else this the error message gets nothing okay now there she show up do that there you go there's air right there okay all this code can actually be replaced by one line we just do this using a turn your turn to read expression and let's double check if that works okay but that's awesome so this view component it actually has two components within it it has the card component here and it also has the submit button furthermore the submit button is tied to the click event rather than the submit event which is the proper way to do it so let's go ahead and extract another view component which is the entire form so yeah it's going to do that so we don't need this anymore just make a new component called it's called payment form up view and just grab everything from here okay so app touch yes payment form payment form and just call that payment form okay all right so let's grab everything from here starting from the former to form here all the way down to here let's put that in our pain form for the template let's fix that okay it's not gonna work at this stuff so let's fix that let's just slash check out CSRF field we will fix in a second just leave that for now yes here is fine we don't need this it's good and here instead of listening for a click event on the submit button we'll listen for a submit event on the forum itself and in view if you want to prevent that the default you do submit top prevent and the method I want to call will name it pay okay I mean don't need the card I mean that don't need any of this we need a CSRF you just copy and paste it here so make sure you have your CSRF token defined in your blade view so let's go ahead and add that so right here up here somewhere in the head let's put it right here I sure we have RC s RF token you don't need to change event specific to the other component we do need a pay let's add our CSR F field in our template just do it right here somewhere okay so now in our check out view page let's replace this whole form with our payment form view component okay fresh this page it looks good and let's do some cleanup here we don't need any of this anymore so let's delete that and now fresh okay we did this correctly we should be getting our token back should be logged here there it is okay cool so now all we have to do is the equivalent of this in our original Java Script file which is append a hidden element to the form that we're about to submit and then submit it so let's copy this code back to our payment form and in our pay method here it's bad in there I'm gonna call it result instead of data and we need multiple lines here so let's go ahead and do that okay let's paste that in and we don't need this because we can refer to the form itself using view okay this is still fine this is still fine this is fine this is gonna be result the token that ID and to get the form you just have to do this the dollar sign at all that refers to the form a pen child in the input and same for down here this l dot submit and if you did that correctly that should compile and yeah i should work now using the view specific one oh yeah it's not gonna pass in the name let's fix that quickly so when we call create token we have to pass in options as well so options let's grab that more option of this right here and you can just do that you probably want to do this the view way so instead of doing document dot get element by ID we'll just define it in our data here and give it a name on card and initially you'll be empty and in our name on card we'll just set the model here be Auto equals name on card I should do it so let's do a final test here see if the name gets passed through and see if it goes to our back-end view and okay and see if it works there you go work check the dashboards here the name came through there it is and there is view awesome there you have it guys we managed to use stripe elements and build out a robust payment form which is both secure and user-friendly I hope you guys enjoyed this one and I hope you guys can use it in your applications don't forget to hit that like button leave a comment below and subscribe if you haven't already done so see you guys in the next one okay thanks bye [Music]

Channel: Andre Madarang

Views: 34,907

Keywords: Stripe Elements, stripe, elements, stripe elements laravel, laravel, stripe api, stripe elements, vue, vuejs, stripe vue, vue stripe, vue stripe elements, stripe elements vue, stripe api v3, laravel stripe elements, stripe api laravel, laravel stripe api, andre madarang, andre, madarang, drehimself, stripe api javascript, stripe api vue, stripe payment laravel, laravel stripe, stripe laravel, laravel payment, payment laravel

Id: BB-nXTPyNtE

Length: 39min 18sec (2358 seconds)

Published: Sun Nov 19 2017