Laravel E-Commerce - Checkout with Stripe - Part 3

what's up guys welcome back and in this video I'd like to work on the checkout integration with straight now have you seen my other video on stripe then a lot of this will already be familiar to you but if not let's go ahead and get started so the first thing I would like to do is just make this link go to a checkout page oh that's make the controller HP artisan make sure older checkout controller make it resourceful okay well it's got some lime let's go to checkout controller and in index here let's go ahead and return the view return view checkout and in our routes file let's go ahead and make a new one right here let's call it check out check out controller index and it's call it check out dot index now let's go to our cart page and put those links in there so cart dot blade uh PHP right here so let's go route checkout dot index and also for this one let's also do this one if you got do that before that goes to shop dot index alright let's test this out check out dot index not there fine we have to remove this one here we don't need anymore okay okay see if this works okay we go to the checkout see if the other link works and it does cool alright so the next thing I want to do is just make this part dynamic let's go and do that so I'm going to check out the played PHP and where are we here right here these are the ones that are iterating so let's go ahead and make a dynamic for each cart content as item and this end for each goes at the end here and let's just go ahead and paste the items in so you don't have to watch me type them first one is the image yeah so they start in the next one is the name go ahead and grab that put that in there this is the details leave your details and this is the price present price and over here we also have the quantity we don't need the model for this we just need the quantity which we can grab directly from the cart and see if that works cart the dollar sign there okay there it is we don't need those other two so let's delete those okay and yeah let's go ahead and work on the prices here so we don't need its discount because that doesn't work yet so we'll just comment that off for now and it's just paste in our subtotal which is this one and the next one is the tax I believe yep change out the tax and this is the total all right so check if that worked okay we have this working and looks good to me okay now let's work on getting stripe to work if you're not familiar with stripe the way stripe works is first we have to generate a token using stripes JavaScript API and what that API does is it makes a credit card field here which lives in an iframe and you pass it a credit card number and CVC and then stripe generates a token which we receive and then we have to take that token send it to our server side code to charge the credit card so let's go ahead and do that so the first thing we want to do is just include the stripe API so let's go into our check out the blade uh PHP and up here I have a section for X it's not supposed to be extra CSS it just goes in the head let me show you the layout file I shouldn't name it something else because it's just right here just extra stuff in the head but we'll leave it for now and we'll include stripe so let's go ahead that's not it this is script SRC equals and your leash would put JavaScript at the end of the file but I think strike wants you to put it in your head now let's go ahead and go into the documentation take a look at this example here we'll go ahead and grab the code from here and work our way from there so we just need this stuff here and let's put that into our code so we no longer need this stuff because credit card experience PVC code is all gonna be in its own field so let's get rid of credit card these three we don't need these three well that believe it's gone okay we know each address as well okay okay I'll stay started it's put in a form group and it space what we have here we have here okay so label that's good this is where the stripe element is going to be inserted and these are where the error errors will go okay let's grab the CSS so this is what styles the card element let's just put that in our check out that slash at the bottom and say that and it's run npm run dev on that compile it down okay now let's take the java script here and grab all this oh just grab all this and that's just put it down here i have a other section here called extra j/s let's just put it oh let's just split in the script tag just put it in booking function and let's paste that in okay make sure you use your own test key here your own the Striped st and let's see what that gives us refresh and there we go we have the credit card element right here so enter credit card it has validation for you already you have to worry about doing validation which is nice CVC and the zip well we're gonna remove the zip because we already have it up here we'll move that in a second but first let's style it so it looks like our form so I've already done my research and I know what I need here so I don't need that I just need the border don't need any of the shadows so the border is sorry the padding is 16 and 16 and the border is 1 pixel solid and just this color I don't need to focus and I also need the card errors card errors element I need that to be red as well so this red right here as well so let's put that in there and if you run npm run dev again the compiler SAS let's see how that looks there you go and that looks like our form and you know it looks good to me one more thing I want to do is just change the font to this and that is specified in our JavaScript right here so let's just add one more font here the font i'm using is Roboto so let's just add that and yep looks like that font changed and I think we're good all right let's get rid of this zip you see here there's a zip section here which we don't need because we already have it up here so to do that here when we create that card we just have to specify an option here that says hide postal code and set it to true so if you save that go back here refresh the page you can see that the postal code is not there anymore awesome if you look at our code in the handle form submission section you'll see that the Java Script is calling a stripe token handler method but that actually doesn't exist yet so if we go to the documentation it's actually defined here in a different part of the documentation so let's just copy that and we'll put it down here and as you can see all this is doing is it's getting the form and it's appending a new hidden input and it puts the stripe token we got from this server there so let's make sure this is working so first of all we have to make sure our form it has an ID of payment form so if we search for form those it does not so let's make sure that happens okay and now if we test this out if we put in a credit card for two for two is this the default credit card that works make sure you put a valid date and anything for the CVC and if we complete order actually let's make sure that we just not submit it for now so down here it's just a C that's one test if this stuff happens before the actual submit just to make sure we're getting the token so let's try that again refresh okay so for two in there okay now let's inspect it and see if that hidden stripe token was added so where's our form our form is right there somewhere form and there it is right there so we know our code works awesome one thing I also want to mention is you should pass in the cardholder name and the address as the documentation highly recommends it so if you look here we can pass in the cardholder name and any address information when we're creating the token so let's look for this line in our code and let's add this second parameter in there so right here create token let's add like a new object with all those things that it recommends so name address and all that stuff I already did it here so you have to watch me do it and it's just grabbing the values from the appropriate section and we'll pass that in it's right here and we'll see this work once we pass it to the server side and if we can see the cardholder name then we know it's working I just want to get that out of the way since we're still working on the front end now let's also make sure that we submit the form now - since we're gonna work on that next so our next step is to take this token and pass it to our server side code where we're going to use a PHP library provided by stripe in order to charge the credit card so the library I'm going to use is called stripe Caravelle this one right here and I find that it's pretty easy to use you can use the standard PHP one as well but I like to use this one because it's more catered towards laravel so let's go ahead and do that first thing we should do is install it via composer there you go okay the next thing we're gonna do is go into our controller so check out controller and we're gonna use the store method here I should you disclose our routes file first and let's make another one here we're gonna post to check out as well we're gonna use store and we'll call it check out that store and now now now let's go into our controller and for now we're just gonna die in dump the request just to make sure that we are getting the stripe token in our request so let's go back into it check out not blade uh PHP and then just make sure in our form our action is set correctly so route check out that store oh I forgot the method to method II flows post and while we here I know we're gonna need to see us RF field let's put that in and yeah that should submit to our server now if I get everything correctly there's no validation here yet we'll work on that later so let's just see if we get our token we're getting from the stripe server see if we're successfully getting that on our back-end so anything here and hopefully this works and yep there it is it works hey cool now in our controller this is the where we have to put the logic to charge the credit card that we have so using the stripe package we have to put a try-catch block to do that all right let me paste in a code snippet here and let me explain to you what each one is so the amount is the amount we're charging for the credit card we're dividing by a hundred to make sure it's in dollars currency is the currency we're charging and in my case I'll do Canadian dollars since I'm in Canada the source is the required token that we got from the front end make sure you have that the description is a description of the order right now I'm just hard-coding it to order the receipt email is a setting if you pass this in and turn on the setting within stripe it sends an email automatically from within stripe so we're passing in the email address that the user typed in and metadata is any additional information you in the past through now I'm doing contents and quantity of the card but for now let's just leave that off and I'll show you what I'm doing that what I'm doing with that and why in a second so right here if we make it this far we know we're successful so let's just redirect this we track back with success message let's just say thank you your payment has been successfully accepted and will work on the exception in a second let's just see if this works let's not forget to import the cart and the stripe library and let's see if that works so we're not passing any of this stuff in yet it's just this let's just double check if this is working stripe API key is not defined okay yeah sorry I forgot to do that so if you take a look at config services there is a place for stripe key and a stripe secret so let's go ahead and put that in our environment file if we log in to stripe actually let me show you where it is we go down here to API we already have our publishers publishable key set but we have to put our secret key as well make sure you put it again in an environment file and I believe it's called stripe key and stripe secret so I'm gonna do this behind the scenes so you can see my key but make sure you go ahead and do this okay let's try that again refresh to continue and I think that worked I think we just don't have our session to show the message let's double check in the stripe back-end and I think this is the one right here yeah it is yup it is so this is the right one but since we didn't put anything in the form the information is not showing so let's go ahead and put in our session data you know check out that blade up HP let's just put it right here just to show the success message or the error message and let's give that another go so now let's fill in this information the border okay now we get our success message if you go back into stripe go back to payments give it a second there it is and now we see all that information in there awesome there's the address there and we know it's working cool we actually have a a Thank You page and instead of going back I want it to redirect here once it's a successful payment so let's go ahead and do that so if we go to our routes file actually I want to make a new controller called confirmation controller and I just want to return the view here reason I'm a the controller is because I also wanted to do just one check just so the user can go to that page directly let's just check if this session the success message session session variable exists so if the session does not have the success message then this is reader this is redirect home otherwise we return there and now in our routes file we don't need this anymore and we can do thank you confirmation controller index and it's called it confirmation dot index now in our check out controller instead of doing this we can do confirmation dot index with a success message we can just take this one from here okay and one more thing let me show you if it's still there we just did a successful payment but the card content still exists we just want to make sure we destroy the card contents if it's successful so right here let's just do a card just specify the instance default one and let's just destroy it to clear it out to make sure it does that all right so let's just see what we did here see I wanted it so that the user a just can't go to this page and the redirect happened so that's good let's try this one more time let's try a different item let's try laptop two at the cart let's put one more lap top three at the cart okay go to checkout three three eight nine ninety eight awesome enter some details here and see if this works there you go so that that happened the card is empty now and is this work yeah it does okay awesome let's check if that payment went through and that was it right there awesome so what I wanted to do here was for each order I want to put the cart contents inside the metadata because we don't have an orders table or anything like that right now to save the order so we want to make sure we save it in our metadata so I just want the cart contents in like a string format so we can do for each and iterate over the cart content that'll work but let's do it in a more collection oriented way so the contents is gonna be cart content and I choose the map function and tribe the item and we just want to return item model we're gonna use the slug to identify the object and it's just separated with a comma and then it's append the quantity so we know the quantity of each item as well so let me call in and we want the values of that and we're just gonna spit it out to JSON so we can read it easily and now this passing the contents as you can see I have a comment here well change this to an actual order or stable in Iran but for now we'll do this this is the overall quantity of the entire order so if you do this one more time we'll have that information in here in the metadata so let's go shopping MacBook Pros put that in there then you shopping laptop five let's put that in there continue shopping laptop nine all right let's proceed to checkout and it's put in their details and place this order security code is incomplete taste to order now we have a representation of that order in our metadata there it is there's a order right there there you go we see we ordered MacBook Pro one of those a laptop five one of those and a laptop nine one of those for a total quantity of three now let's handle bad credit cards although there is already some validation on the front end they're still gonna be instances where we have to go to the back end and realize that the card is declined for whatever reason so for those instances we have to catch an exception so if you go to the documentation page here you'll see all the exceptions here that this package handles the one we're interested in is this one the card error exception so you can catch the normal exception here if you want but it's going to card I'm gonna catch the card to card error exception make sure we import that okay and all I'm gonna do here is just return back with errors and that's all you have to do it's going to specify the error in the error message and we can actually test this using stripe test cards so this one right here is a typical example it's an expired card code so let's go ahead and test that one out so let's just put something in our card quickly to checkout enter some details and it's pasted a card in here just do this and there should go through to the backend but it should be turning the error so we should see that here there you go error your card has expired and if we go back to our payments dashboard you'll see a failed one there awesome so the next thing I want to point out is you can actually submit this form twice let me show you okay if we click this button twice fast enough it's gonna submit two requests to the server and it's gonna charge your card twice so that's not good let's just try to demonstrate that so I'm gonna i'm gonna click twice really fast there you go it's like twice and everything looks like it happened okay what if we go here give it a second there you go you see two payments successful payments that happened because the user double clicked that is not a good thing so let's go ahead and fix that so we're just gonna fix this using javascript and we're just gonna disable the button once the user once the user clicks on it once so it's okay so down here where we're submitting the form so there's no event listener for submitting the form if we just disable the submit button so we have to make sure we put complete order ID on the button so let's make sure we do that submit where is that button this is it right here yep let's put an ID on this ID equals that create order okay but if it gets to this section then that means there's an error and we want the submit button to be enabled again so we'll enable it here and I'm not sure if I have the CSS for disabled let's just check I think it's calling buttons that's nice and no I don't so let me just do that quickly let's just paste it in here so we just want to lighten the background by a bit and we want to change the cursor to not allowed so let's say that do npm run dev and let's make sure that we can't submit twice okay we're at seven let me just hard refreshness a few times okay and check oh let me hard refresh this again okay so let me just do this real quick okay now if it is correctly we should see this button change to a disabled state so let's do it quickly there you go so we can only quit click once and the payment should only happen once there you go there you go just once and it's all good let's quickly do some server-side validation because we want to be good developers and make sure we validate and then after that we'll just add the html5 required validation I mean just do this real quick so we're gonna make a form request so let's just do PHP or this in make requests let's call it checkout request okay let's go to checkout request and changes to true and I'm just gonna paste into some code here just so you like to watch me type and the only one that special is email and everything else is just required and all we have to do here in the checkout control there is instead of passing in normal quest we're gonna pass them to check out a request we're gonna import that right there and then that should do it actually we might have to put the old input in let me just remove this for one second just so we can test out the validation I just deleted for a sec okay there you go we know that the front-end validation works I mean the backend validation works but I need to make sure that the old input gets added we don't have to because we're gonna do for the invalidation but let's put that back all you have to do is put the value in here like this and I'll do the rest behind the scenes and now the old input is preserved all right now all we have to do is add the required just do this just wanted required to all of these because they're all required and now if they're not entered the browser will complain and ads for a better user experience so there you have it guys we've managed to integrate stripe within our shopping cart and our checkout integration and everything looks well a user can come in and place an order and we can see that order within our back-end and do whatever we need to do now there's a whole bunch of features I still want to go over in future lessons and hopefully we can get to that as soon as possible thanks for watching make sure to subscribe so you don't miss other episodes see you guys in the next one okay thanks bye [Music]

Channel: Andre Madarang

Views: 52,369

Keywords: laravel ecommerce, laravel e-commerce, ecommerce laravel, e-commerce laravel, laravel shopping cart, shopping cart laravel, laravel cart, cart laravel, drehimself, andre madarang, laravel payment, payment laravel, laravel products, products laravel, laravel, cart, commerce, stripe elements laravel, laravel stripe elements, stripe laravel, laravel stripe, laravel checkout, checkout laravel, laravel checkout stripe, stripe laravel checkout

Id: fgsI5jyPSAY

Length: 37min 27sec (2247 seconds)

Published: Mon Dec 18 2017