Laravel 8 E-Commerce - Checkout With Stripe

hi everyone welcome back to the laravel 80 commerce tutorial in this video we are going to learn about checkout with a stripe so let's see how can we check out with a stripe payment gateway for integration of a stripe we will use card list stripe laravel package okay so first of all let's install this package go to the google.com and here let's search at list this one card list stripe as laravel now just click on this link and here you can see the installation guide so let's follow these steps so in first step let's copy this line and this package name and go to the project and let's open the composer.json file and inside the required just add here comma to paste here cut list right laravel package okay now save this file now go to the command prompt and let's run the composer update command so just right here composer update now press enter all right package has been installed now let's configure it so this to the project let's open the uh hp file so just go inside the config directory and from here just open app.php file all right and now just go inside the providers array you can see here this is the providers array and here after this just copy this line okay this line and in provider array just paste here okay now let's copy this line and inside the aliases array in this array after this just paste here okay now save this file all right now close this now uh let's open the dot enb file and inside this env file let's create here a key stripe stripe underscore e is equal to here let's add here the stripe api key okay secret key so first of all let's create an account on stripe.com so go to the browser and just go to the url stripe.com and for creating new account let's create here start now now from here you can create your account on a stripe okay just enter your email id name and choose your country and just add your password okay then click on create account i have already created an account so i'm just going to click on this link sign in now select your email id and enter the password and now click on continue and you can see here this is the striped dashboard and you can see here the get your api scheme okay this is the link for getting the api's key so just click on this link all right and you can see here for testing purpose we use test api case and once all testing are done then we use this live live api keys okay so now let's uh copy this test api keys secretly so for showing the just click on this link reveal test key and now you can see here the secret key okay so just click on this link for copy copied and now switch to the project and inside dot env file uh simply write here stripe underscore key is equal to this key secret key all right and now save this file and just close this all right now run the application closest to the command prompt and just type the command php our design all right now switch to the browser and just refresh the page okay now on top checkout page uh let's create a form for accepting the car details okay card number uh expiry month expiry year and dvc okay so here i'm just going to create a form after this closes to the project and just open the checkout uh component view file so go inside resources directory then views livewire and from here just open checkout that's component.php file all right and inside this file just scroll the page and here after this i'm just going to create here a form and also remove this this paragraph all right and now let's add here and at the class name let's copy this class this one and paste here and now just close this tip and inside this table let's add here a input text file so i'm just going to copy this and paste here all right and now change here the text label card number all right and also change here the name card as number okay and type text and inside the placeholder also write your card number right okay now let's copy this and paste it three time one for expiry month expiry year and cbd tbc okay and now change here that text add here parity month and also change the name exp as month all right and now here the xp test here all right and here expiry here and inside the placeholder placeholder just write it as m okay for the month and here y y y okay like this for the right here cvc and here cvc all right okay now let's create a four property for this input field so and also right here for cvc password type password all right now to the checkout component class file and let's create the property so uh go inside abbrect an aesthetic live wire and from here just open checkout component.php file all right and inside this file after this just let's create the property public dollar card underscore number another property which is caller exp month and public dollar exp underscore here all right and for cbc public color c missy all right now save this file now let's bind this property so here uh first copy this property name card number and inside the inside it's input text file just paste here and also here so just select and press ctrl d and paste here all right card number card number and here uh expiry month so just copy this one the exp underscore a month and uh paste here select input and paste and here exp underscore here and for cbv see cbc all right this property save is here okay now save this file form created now let's check let's check this form sources to the browser just refresh the page and here you can see the form for cbc here css is not working so let's copy the css from here so right click and choose inspect element all right and from here let's copy this css and go inside the checkout component view file and go to the top and after this just add here the style tag and close this this tile all right and now paste the css and here just change the type password all right now save this and click again so close this and press the page now you can see here it's working good okay all right now make this form visible uh when this checkbox is checked all right otherwise uh hide this hide this form okay before doing this uh switch to the project and just before this form just before this form and after this add here if directive if and dollar write your comment uh this property name payment mode okay controller payment mode is equal to which one this option and value is card okay you just write here card then so this so after this stream just close here the interactive so right here in f all right if remain port is equal to card so this form otherwise hide this okay now save this and let's check this let's go to the browser and just refresh the page all right by default you can see here the form is not going here okay if i select this checkbox you can see here it's showing the form and if i select the cache on delivery it's hide okay all right now let's just do the project and just go inside the checkout component.php file class file and first of all let's add the validation so inside the updated lifecycle book method after this just write here if dollar this arrow mint mode is equal to card all right then uh idea the validation dollar this arrow validate only okay now pass here the fields this one and pass an array and inside this array let's copy this property and paste here now select this and press tab collect this one and remove this and here single quote single quote arrow and add the validation required pipe sign all right required and numeric okay now let's copy this and inside the place order method inside this method uh after this just right here paste here and remove this fields from here and also change the method name which is validate so copy this and paste here all right and now it's good okay now let's scroll the page and you can see here the condition for cod so here let's add the else part else else if uh download this payment mode is equal to one more thing uh let's cut line of codes and let's create a function public function and function name make transaction okay and now still the code and inside this function uh pass to argument first argument is order id so write your order underscore id and the second second argument which is status all right and here for transaction mode just remove this and write it all like this payment mode all right and copy this order id and paste here and for the status remove this and add a dollar status okay now everything is good let's call this function inside the inside this so here just write down this arrow make transaction and inside this just pass here the other id simply write your order arrow id second option status so add here the status which is reading all right okay now inside the uh and one more thing create one more function reset the car okay public function and reset card all right and now just cut this line of code and inside this function just paste here okay and now uh after this function just call here reset card all right now if payment code is card then first of all let's create a stripe object prescribe is equal to the stripe also import here the stripe so after this just right here use stripe okay and now here let's write stripe colon column make and inside this just pass here the strike key so call here dnb function env and inside this just pass here the helium okay so let's copy the key name so go to the dot env file and from here just copy this try pinterest key and inside this just paste here all right now add here the dry block and inside this dry first of all let's create the token token is equal to dollar strike arrow tokens arrow create create and inside this password the car details card number exp here now pass here the cbc you cover this tvc all right and after this just check here if not is it and inside this just translate and id if it is not then just return a error message so inside the session token was not generated correctly correctly okay and also put the value inside the youtube property let's see all right and after this if it is no true then just create a customer customer is equal to dollar stripe arrow customers call the create function create and inside this just pass here and array and pass here the customer name download this arrow first name now idea that a space with concatenation sign then download lastly now password email id email download this arrow email then this one and now pass here the address you send this array first password the line one forward this arrow to line one all right and then underscore code this one and also pass here the city state and country city arrow city then and now pass in the country down like this arrow country all right and now pass here the shipping address shipping list and inside this area just pass here uh first pass here the name so let's copy this and paste here then press just copy this one and after this let's paste here okay this is the shipping name and clicking address okay okay and after this add here the source and inside the source just pass here just open okay this one and add here all right now after this after creating the customer let's charge the amount so right here charge is equal to dollar stripe stripe arrow charge charges right charges then call the create function and inside this create function our stripe chart says create okay and inside this just pass you the customer id customer arrow call it customer and pass the id again password currency which is ust usd now amount here let's pass this total amount okay this one so for accessing that just right here station and call the get get method get and pass in the key check out checkout all right and this array just right here okay and also pass the description description and you can pass anything inside this description so i'm just going to pass here our text payment over order number and concatenate with dollar order arrow order okay and after this check here if uh dollar charge status is equal to succeed succeeded okay okay this arrow succeeded then inside this first call this function make transaction so right here download this arrow make transaction okay and inside this just password the order id dollar order arrow id and the second thing is status which is approved all right and after this just call here another function which is reset card this one reset part all right otherwise inside the else part here or put a message inside the session flash and the key stride underscore error and add here the message error in transaction all right and also set the value inside thank you base thank you property which is zero all right now uh with this dry block let's add here the catch catch exception message flash and plus key name which is a strike underscore error all right and pass here the message dollar key arrow get message all right and download this arrow is equal to all right okay now so this error message on uh about view page so inside this form let's add here if session has uh this key so let's copy this stripe underscore error again just close here the if directory and inside this just display the message okay simply hair station call and get fusion call and get and just copy this key and paste here okay now save this file now everything is done also save this class file so let's check this so this to the browser and just refresh the page all right and you can see here the total amount 5 359 okay let's add one more product and cut there are two product okay i'm just going to add this product okay and now you can see here the total amount 471.90 okay now click on checkout and here let's add the name billing address right here the name nose last name for my email address my nose mod knows let's say test gmail.com phone number uh this one line one um province ariana and city zip code one two one zero zero one and now uh inside the payment method just like here the debit card option this one tweet and credit card all right and now inside the card number let's add here the card number uh for testing purpose just use here the card number four two four two and let's copy this and paste three time total number of digit 16 okay and now it's inside the expiry month just add here any month name uh i'd have the 12 and in expiring here you can enter the future here okay so i am adding here 20 25 and see we see any third is number so i'm just going to add two three four okay now just click on press on order and you can see here the grand total value is 471.90 okay now click on plus order now before clicking on it this link uh first of all inside the stripe dashboard let's check the payment so click on payment and you can see here the last payment which is 588.06 okay and now i'm just going to click on this link for seven one point nine zero dollar okay just click on this link and here you can see thank you for your order it means comment is done okay now let's check the payment so go to the tab dashboard and just refresh the page and you can see here the payment of 471.90 usd okay and you can also see the customer email id my notes test at the redstone.com and if i click on this you can see here the customer name card uh last four digit of card okay and all details all right so in this way you can check out with a stripe and so thanks so that's all about checkout with a stripe so thanks for watching this video and if you still have any kind of question you can ask me in the comment box don't forget to subscribe my channel thanks for watching

Channel: Surfside Media

Views: 8,481

Keywords: How, to, Program, laravel (Software), laravel, laravel v8, laravel 8, laravel project, laravel setting up, laravel v8 setting up, laravel v8.0, v8.0, laravel 8.0, laravel 8 playlist, laravel 8 tutorial, laravel tutorial, laravel 8.0 tutorial for beginners, laravel for beginners, laravel tutorial for beginners, laravel8, laravel 8 ecommerce tutorial, laravel 8 ecommerce, ecommerce project in laravel 8, laravel 8 ecommerce project, stripe, stripe payment gateway integration

Id: z9e8G4kRfoI

Length: 38min 18sec (2298 seconds)

Published: Tue Apr 13 2021