Stripe Complete Checkout Process in Laravel

in this video we're going to see stripe online payments fully working flow based on diagram which I prepared and then follow that flow and Implement online payments in laravel even if you are not a laravel developer this video will still be relevant for you the main purpose of this video is to focus on the correct flow which you should Implement in your desired programming language [Music] hello everyone my name is zura and I am the co-tolic on this channel I share my 10 plus years of experience working as a professional software developer so if you're new here consider subscribing first I'm going to share the diagram and show stripe online payments fully working and correct flow then I'm going to create the lateral project and prepare database with products and orders implement the checkout page correctly handle the redirect URLs and finally Implement web hooks as well again the main purpose of this video is not focus on laravel the main purpose right here is to focus on the flow and the process how the online payment checkout process should be implemented if you want to see the fully working laravel e-commerce project stay tuned because I'm working on that and it will be released soon before we jump into the video my friends told me that whenever you open a YouTube video and click the like button and then you come back after one year your like is not there okay let's test this everyone and hit the like button and then check this video after one year if our likes are still there all right let's jump into the video and start with the diagram this video is sponsored by iproil IP Royale is one of the best prox service provider with more than 2.8 million IPS their main goal is providing safe private and unrestricted access to online information and other resources for companies and individuals worldwide iproil allows clients to use a proxy server whenever they connect to the internet from any device the proxy server acts as an intermediary between the client's device and every other online server it takes all requests sent from the device replaces the client's IP address with its own and sends the request to the destination the destination servers send response to the proxy which then forwards it to the client's device getting a proxy in a different region allows our clients to access restricted content like streaming services e-commerce websites or gaming platforms not available in their home country I have partnered up with IP Royal and they provide the coupon code with a 50 discount for my YouTube channel subscribers on Royal residential proxies Royal residential proxies have several great features they are available in almost 200 countries the traffic you buy never expires you have possibility to randomize countries and IPS you can have unlimited concurrent sessions and there are a few other great features the registration is free register now and find out more about their proxies on their customer dashboard when creating an order for Royal residential proxies enter coupon code zura to get 50 discount the deal won't last long so make sure you check it all right let's understand what is the correct flow of stripe online payments checkout process and we start step by step very simple thing you have your browser which communicates to your server your browser displays the products and has a car functionality and you can add items into the cart and then click on proceed to checkout your server right here might be any back-end technology by basically PHP node.js python Java Etc okay in your browser communicates to your server actively now when user clicks proceed to checkout button the request is made to the your server to generate session and for the specific products the server basically will make a request to the stripe server there is somewhere involved stripe server as well and the stripe server basically communicates with many other websites like yours who has this checkout functionality okay and when the browser makes request to generate session to your server your server will make requests to the stripe server but your server also holds the secret key the request is made with the secret key to the stripe server otherwise stripe will not know who you are and the secret key can be taken from the stripes admin dashboard all right next the stripe server will generate a session object and return to your server now your server has the session object what to do next your server will make a unpaid order and save that in database and Associate the received session ID to that order okay there will be an order in your database with the session ID stripe just generated and the order status will be unpaid next the server your server will generate will take the session URL taken from this object okay and there are two options basically your server can redirect the user to the session URL directly or your server will return the session ID to the browser to the client and client will redirect user to the payments page in any case the result will be the same we will see something like this stripe checkout 4 where you have the email and card information and name and whenever a user fills up that information then the user will be either redirected to the success page or failure page and we configure the success page in Failure page when we ask stripe to generate a session we provide right there success URL and cancel the URL so right here let's say that everything was successfully done then the user will be redirected to the success URL if there is some failure user a user will be redirected to a cancel URL okay and I found most of the tutorials out there uh not covering a couple of very important things when mentioning the stripe uh checkout flow for example whenever user is redirected to the success URL we we're going to show this access message and most of the tutorials basically show success message and that's it but there are a few important things which in my personal opinion every developer should Implement in their stripe checkout flow for example when we configure this access URLs at this stage at Point 2 and provide right their success URL and the cancel URL we can specify to this access URL the session ID as well which means that whenever users redirected to the browser on the success URL the URL will contain session ID right there as well and that is very important to validate this session later okay so whenever this user is redirected to this access URL the request is made to your server and of course the server will have an access to the session ID as well at this moment we take the session ID and we're going to make a request to the stripe server passing that session ID passing our secret token and ask to validate that session ID okay and stripe will validate that for us and return the session object now we have that session object and at this moment we're going to take the order we're going to make a query in the data database select an unpaid order based on the session ID and we're going to mark this order now first we're going to check if we have this order with this session ID okay and if we have that order then we're going to mark this order as paid and we're going to return in this moment we're going to return the success page to the user at Point 12 right here okay so whenever this access URL is accessed the server will validate that session ID and then Mark the orders paid and render the success page only after that okay but there here is important but so whenever a user fills up the payment form credit card form before the redirect happens to the browser the internet connection might be lost the power might be off or user might mistakenly close the tab and the redirect simply will not happen so in this case money will be taken from the user's card but the redirect will not happen session ID will not be passed to the server validation will not be passed and the server will not Mark the order as paid the order will still stay unpaid what to do to avoid this there's a stripe dashboard which communicates to the stripe server and from this dashboard we can do many things see payments etc etc but we can configure the web hooks web hooks are special URLs on which stripe will make requests whenever something happens there are many events in the stripe dashboard you can configure web books for and in this case we're going to cover checkout checkout events so in the stripe webhooks area we will configure when where to make query where to make requests from the stripe server whenever the checkout process completes okay and at this moment whenever user fills up the information and the payment was take taken from the card stripe server will make request user stripe server will basically send a request to your server and passing the information about the payment the session ID and the amount Etc so many information basically will be passed to you sir and In This Moment your server can take the session ID sent from this webhook and can validate that session ID check if there is order the 0.10 basically repeats check if there is order with the received session ID and if the order exists we're going to mark this order as paid okay so this is the full flow which in my opinion every developer should Implement in their stripe online payments check out all right now let's follow this flow and implement it in laravel let's first create laravel new laravel project I'm going to open CMD navigate into the folder I want to create my Laurel project in run laravel new and the project name I'm going to call it stripe full Flow by the way if this comment doesn't work make sure you have lateral installer installed Global using a composer I'm going to hit enter it's going to take few minutes I'm going to pause the recording and then come back quick pause right here the only thing I ask for is like subscribe and cheer but if you really love my content and want to do something even more check my donation pages patreon and buy me a coffee I really appreciate every single Cent you donate and it's going to give me much more motivation to keep creating free educational content I also created Discord server which is at the moment only available for my atriums so as soon as you become a patreon you will have access to the Discord server on which you can ask your questions post your problems and I will personally assist you there sorry for Interruption let's get back to the video okay the project was fully created let's navigate into the folder stripe full flow and I'm going to open this using PHP store now the project is also opened it asks me to run npm install I'm going to click here and now let's first configure the EnV so I'm going to change the DB connection from MySQL into sqlite basically we have to comment out everything and I'm going to create one file under database and the file name should be database.sqlite I'm going to open the terminal uh I think I cannot create it from terminal because I'm using now Powershell not git bash okay let's create this manually uh this is going to be a new file the file context menu file creation context menu doesn't show up for some reason uh database.sqlite let's hit enter that should be a new file and now we can already run migrations PHP Artisan migrate let's hit the enter okay yeah it worked now let's prepare database I'm going to create two models for products and for orders and I'm going to configure them and then we can start working on the checkout PHP artisan make model product and I'm going to generate migration as well as Factory and I need Cedar and controller for product as well let's hit enter I think all of them were created and let's create the second model PHP artisan make model in this case that's going to be order and we only need migration for order now let's open migrations products and we have to create a few columns right here on the product table I want to define a string which is going to be name of the product we can give it a length as well and that must be required field we're going to have also price string not string but decimal decimal price let's give it like a six totally into after comma and we're going to have image what am I writing come on table a string image like 1024 characters and it can be actually nullable okay and let's create second migration and not create but right second migration for orders for orders we're gonna have status order status we're gonna have uh total price string not string decimal total price six one two we're going to have what else session ID tring session ID and this is going to be the session ID from the stripe and we're going to have um yeah user ID probably user ID for which will connect to the authorized users but because we are not going to actually implement the authentication and authorization so let's skip this for now but we we're going to assume that in the production application of course the orders will have user IDs now I'm going to bring up the terminal and run PHP Artisan migrate okay the migrations have been created now let's go in the app HTTP controller and product controller and let's render products public function index we're going to accept request right here and we're gonna select the products but we haven't actually created the product so let's open product Factory for now and Define right here so for name I'm going to use a faker package for that that's going to be some simple name some simple text let's use some simple text we're going to have price which will be decimal or float random float from maybe 1000 from 100 up to 1000. uh NB Max decimals box decimals can be two minimum is 100 and maximum is one thousand and we're gonna have image fake image image URL let's do it like this oops okay so we have the factory um I think we created Product Cedar as well inside which we can create products so product Factory I want to create like um only three products let's say create okay and let's now open database database Cedar and here we're going to write this call passing the array we're going to use Product Cedar class all right let's seed PHP Artisan DBC let's hit the enter okay that was successfully run and now let's select the products on the product controller products equal product let's get all okay and we're gonna return View product dot index passing the products right here let's go now in resources views and I'm going to create right here new blade file product slash index dot blade PHP let's hit the enter and we have the welcome blade obviously so I can copy everything from the Welcome blade and put this in the index plate I'm not going to work on the layouts because this is a very simple application and I don't want to demonstrate how to create layouts we're just going to demonstrate the checkout process okay so I'm going to remove also everything the Styles and fonts and this part as well and remove this body as well okay so I get products right here so I'm going to iterate over my products products is product and we have and forage right here and we have a div for each product and let's actually output first in H2 maybe uh product name okay and let's spin up the Artisan server PHP Artisan surf let's hit the enter okay so we have that now let's open browser and type here localhost Port 8000 and here we see our application however I think we need to run let's reload the page we need to run uh first we need to change the route because right now it renders welcome page so if we go in the web.php right here let's remove this and change this into product controller index so if we save and reload we're going to see the product titles okay these are the product titles all styles are lost but that's fine so I can add a inline Styles right here so this one for example can have Now display display flex and this one can have a flex one okay just like this we have three items and we can specify right here Gap to be like 2 RAM between them okay so we have three items let's change this into H5 and we're going to have image as well so let's quickly render this product image and we're going to have price let's put this in the paragraph product price and let's have a look so these are our Rolex let's give it a width of like um let's give it Max width Max width of 100 percent okay so we have the products and now I'm going to put right here a button which will check out all those three products okay and so let's put the dollar sign here so down below I'm going to put paragraph in the button inside there that should be checkout functionality however we're going to see that button somewhere here it is the button let's actually wrap this everything in some div and the div will have a style display flex and Gip three RAM and let's put this great here and let's remove it from here okay now down below we have this checkout button however now it's it's uh like we already implement this drive functionality so when we check when the user clicks checkout we're going to make post requests to our server okay if we go in the product controller we're going to create uh checkout which should be only accessed using post so if we open now or PHP let's configure post request is accepted on checkout and we're going to use the checkout checkout method let's change this into use okay now we have the checkout let's go in index and change this into form we're going to have action to wrote let's call it checkout and the method will be post we're going to have csrf and we're going to have python inside there okay now I format the code and if we go in the web let's give this one name to be checkout now whenever we reload the page and click checkout the form is submitted to checkout okay and now we have to generate the stripe session but first we have to install stripe CLI I'm going to open new terminal and run PHP require stripe slash stripe excuse me we have to install uh stripe PHP package okay not stripe CLI yet so we're going to hit uh excuse me what's going on to me today so we're going to install the stripe and let's now look for also a documentation uh stripe accept payments okay this is the documentation we're looking for let's click right here so we have the exit payment flow let's scroll down below we have to set up stripe first we have to install stripe PHP then we have to submit and create checkout session uh and this is the this is the thing we're gonna do okay so as far as we already have a stripe PHP package we have to set the API key okay so I'm going to copy this part and go in our checkout by the way the stripe package was successfully installed uh go in our controller and put this right here however this this is uh not our key so I'm going to remove that I'm going to set this key a little bit later and then we have to create session so let's put this in we're going to explain everything here as well and then we're going to redirect user to this session URL okay so return redirect redirect into session URL okay so first we set the API key now let's take the API key so I'm going to go into my stripe dashboard if you don't have stripe account of course you need that uh at the moment I have only test mode activated in my stripe dashboard so I'm gonna look for basically if I scroll down right here for developers I have this publishable key and secret key so I click this test reveal test key and then I'm going to copy that I'm going to copy that and go in and I can paste this right here directly or better is to open en create down below stripe Secret key and paste it right here okay now I'm going to take the stripe security key and I'm going to use en function to get that value okay I configured that and now I have to provide the products what we're going to check out so for this uh we have to pass correct line items where each line item has the product price data as well as the quantity so let's create now align items array and iterate over the products what we have and the products what we are checking out is at the moment all the products imagine that you have uh those products added into the cart okay then right here you would select only those products which are added into the cart and by the way if you want to see how to build a fully functional e-commerce website check my upcoming video it will be released really soon it is multiple hours full process from starting from scratch building like admin panel to managing the products checkout process see reports everything basically so let's now select all the products like I'm going to copy this line these are the products we're going to check out oops okay uh four products is product and I'm going to create a line items push in new line item right here let's copy these and let's specify right here line items let's paste this right here and what are we going to specify so the name will be product name unit amount is the price and we're going to take the product price and multiply this 100 because we have to specify price in cents USD cents and the quantity will be at the moment we have we have only one so we can specify one right here we have possibility to specify images as well so let's specify product image however when building an application and you have your images hosted on localhost and the images are not accessible from remote then this might cause problems and stripe might complain not a valid URL okay so if that happens on you uh just comment out this line and test locally like this okay and then we have to we are providing basically line items and we have to provide right here success URL and the cancel URL okay for this we're going to create two more URLs right here one will be success second will be cancel and let's open webphp and create those uh those roads as well success and let's call it check out uh success let's duplicate this and check out cancel okay so we have those URLs in now let's configure them right here so I'm going to use root specify right here the name checkout success we're going to specify arguments as an empty string and I'm going to specify the third argument for absolute URLs to be true because we need absolute URLs because the redirect will happen from the stripe domain to our domain and we need absolute URLs so I'm going to copy them paste it right here that's going to be cancel okay but what else do we need here we need to create order so look at this we prepared the data we created this session and that returned stripe return session now we have to take the session ID and save it in our database and Associate it in our order so let's create now order equals New Order and we have a couple of fields like I'm going to set the status to be unpaid on production applications uh it's better to have an enum with a couple of order statuses and use the NM values rather than hard coded then we have oh what do we have we have the total price total price and let's calculate the total price right here total price will be zero and then right here I'm gonna set the total price plus equals product price okay and then we set the total price and do we have anything else dates let's create let's have a look right here we have the session and you can status price and session ID let's specify now order session ID and that corresponds to received session ID okay so additionally on the production again on the production applications like you're gonna have other items as well and you take those items which probably come from the cart and save it in the order items and the order items are associated in the order okay that full flow is displayed is shown in my e-commerce uh project which will be really soon but for now we are doing the we're focusing on the stripe checkout process okay then we have the order and let's save the order okay and then we redirect user to the session URL okay so let's import the order I think that's not imported up models order save that and now let's have a look so right here we reload the page and we click checkout button let's wait few seconds and we are redirected to the stripe checkout page and on the left side we see those three products we passed okay prices for each and the total price as well if we specify right here quantities and two then the price will be double and each individual product will have also quantity two let's specify right here fake credit card fake credit card test credit card details like this and I'm gonna specify name and whenever we click pay and the payment happens we will be redirected to the success URL okay and on let's access URL we won't have any kind of information only we will be able to show success message let me create a simple success message product check out success let's quickly go in the index blade and I'm going to duplicate this and call checkout success let's click ok and this is the checkout success and the only thing I'm going to do here is just to write success again we don't care how nice it will be success okay this is what I'm gonna do okay let's click no pay and wait few seconds uh get method is not supported for this route that's my bed so if we go in the web of PHP success and cancel should be accepted using get requests because that happens using redirect so we can simply reload this page and we see success okay however we don't know from where from which the redirect came so anyone basically can access this success URL and we will say success right and that is the part where I found that most of the tutorials don't explain it very well so we have to provide the session ID as well whenever uh we create right here so right here at this point we can specify the checkout session ID let's have a look in the documentation as well so right here so we have this URL success URL and cancel URL if we scroll down below um scroll down below show a success page let's scroll down below again okay if you want to customize your success page read custom success page documentation scroll down below and right here we have the possibility to specify the session ID so I'm going to actually copy this part and put this append this right here okay so basically I'm telling in the success URL Hey whenever you generate your session and then redirect user to the success URL take this session ID and pass it into URL okay we have to do this checkout process once again let's go on the home page and click checkout in this case we will get the the session ID in the query parameter okay let's actually uh do a few things before uh before I continue and fill up the form so right here we will get the session ID and let's actually extract the session ID session ID from from request let's accept request right here from request I'm gonna get session ID okay now I'm going to make request into stripe API to take out this session and we can see also in the documentation how we're going to do that so right here we have the session ID and we're going to retrieve this session in this way and then we can get also information about the customer so I'm going to copy these two lines and paste them right here however we need to set the API key before all requests so for Simplicity I'm going to just take this line and put this right here okay set the API key then we get the session ID we make requests into stripe to retrieve this session okay we have whenever we have this if we don't have the session we're going to show like not found okay we need to do these type of validations as well like the session ID can be arbitrary string okay so session uh if session doesn't exist we're gonna um throw not found HTTP not found HTTP exception new not found HTTP exception okay however if the session ID is invalid it's going to throw an exception as well so we will need probably to put this in uh in try cache but let's let's leave this as it is right now and I'm going to pass right here also customer information and in the checkout success we can simply print out the customer name cut dollar sign custom I think I'm not on a mood of writing today so customer name so we save that and now let's fill up the form four two four two okay and let's specify the customer name here and click pay now let's wait for a few seconds and now our URL contains right here session ID and we see zura as well that's coming from stripe that's coming from the session in customer okay and we have the session ID right here however if I just modified this session ID this session ID is something very unique and you can't actually guess but if like hackers try to modify the session ID and delete one letter or modify that we're going to get an exception from stripe invalid request exception no such checkout session and we see the session okay so to show users more user-friendly error we probably need to put this in try catch we catch all the exceptions okay however whenever exception happens we simply don't actually do anything and or maybe throw throw um new not found HTTP exception okay let's do like this and right here we assume we have customer to be null and whenever the error happens we obviously should not see the success page okay instead we see not found so right here we see not found right here we see not found in this customer probably we don't even need that so now I save this and we'll reload the page and we see not found okay because the session ID simply doesn't exist now if we put again a at the bottom that's the validation ID and the session was retrieved from stripe and we have the information about that okay and now we can take that session ID and identify the order in our database by the session ID so let's find the order in our database order where uh session ID corresponds to session ID and we're going to get we're going to get the order and we're going to also select the order which is unpaid because uh if you refer if you refresh this page multiple times you always get the success right but as soon as user sees success page on this URL probably then the link should get expired so right here I'm going to add let's first dump if we see the order okay the order was selected from our database I think we need to get first not a collection so we're going to get the app models order and let me add another wear right here which will be for status needs to be unpaid okay so we select the order then if the order doesn't exist okay we're gonna do an additional check if the order doesn't exist we're gonna throw new not found HTTP exception again so this might be a valid session ID for some reason I don't know again we're doing it maybe an extra security but this session ID might come from someone else mistakenly um that session ID might be others checkout process session ID okay it might be valid so we're going to also check if the if we have order we are going to make sure that we created we generated that session now previously right here and if we generated the session there would be the session ID in the database so we select the order if the order doesn't exist we're going to throw not found exception otherwise we take the order and change its uh status into paid and we're going to save the order and then we show success message um to the customer and that's it so let's put this right here okay so we have full flow if I just reload the page we see a success page however order was marked as paid and if I just reload this page we see not found okay because the URL was already used user already saw a success page okay you don't need to reload the page you don't need to copy this link and send it to someone else and whenever someone reloads you will see a success page as well of course it's it is not uh like a big problem if you copy this URL and send it to someone else and someone else will see uh Hey checkout process but your name that's not a big deal but in my opinion it's more correct to uh basically expire the link uh if the um if the success message was already displayed once to the user okay but there's one but okay we implemented the it seems like we have the full flow however the bot basically is that whenever you are on a stripe page and you fill up the information and click pay and then as soon as the button turns into green and the uh this means that the money was taken from your credit card you close the tab so that redirect did not happen in your browser okay now the money was taken from your credit card but the order will stay again unpaid okay so we need to fix this issue so let's let's provide credit card details right here and now I'm going to click pay and I'm going to close the tab as soon as button turns into green okay you saw that now if I go in the dashboard and I will go in the payments I will see that the latest payment which happened like few seconds ago okay is succeeded this is the latest payment very very latest one okay this is succeeded however the order in our database definitely is marked as unpaid because this didn't happen the redirect didn't happen so what are we going to do so that closing tab might happen due to multiple reasons like user mistakenly close the tab or the electricity was off and simply that the order wasn't marked as paid in this case stripe supports webhooks and webhooks are HTTP requests which will be sent to our server for certain type of events okay there are let's search for webhooks their stripe has various various events and we're not gonna cover all of them except we are not going to cover actually all of them but we're going to have only one and that's the checkout process okay if we go in the web hooks this is the process explained uh you for example create an invoice and then stripe sends when the customer pays the invoice stripe sends a web hook to you and you can update the customer okay if we go in the testing local environment if you have your application on staging or in production you click this edit endpoint and right here you have to provide the webhook URL of your application we don't have webbook URL defined at the moment so let's define it right here webhook if we go now in the web PHP we're going to create right here a web hook URL however the request method should be post for webhook okay and also because the request is coming from stripe we will have uh csrf validation problems if we don't disable csrf for this URL so we're going to open csrf verify csrf a middleware and right here we have the protected accept array and we have to provide right here webhook okay this is the URL on which we want to disable csrf so we have our webhook ready again if your application is deployed on staging or on production you have to provide right here a fully functional like uh Europe URL however we are testing locally okay so I'm going to click test in local environment in this case we have to download stripe CLI I'm going to click this download the CLI let's scroll down below and we're going to have options to download on our operating systems um where is that on Windows right here I'm going to click on the following link just click it right here and we have to download stripe some version Windows the following file so basically scroll down below and we have right here stripes and version Windows so just click on that and download that I actually already downloaded that stripe CLI and download and extract it okay here's my stripe CLI and if we go in the folder we see a single executable file all right now let's go in the browser again I'm going to close the GitHub and we actually download it successfully then we need to log in and this is also described in the um listen um to stripe events right here so we need to log in now okay here's the my my path I'm gonna copy the path and I'm going to open now CMD and navigate to this path and then I'm going to call the stripe Excel login okay stripe Excel login let's hit the enter okay at the moment it tells me it asks me to open the following Link in the browser so I'm going to copy this and open in the browser and it asks me if this text matches the text displayed in the console in the CLI and right here we see the following text so the match I'm going to click allow access so access was granted I'm going to close the tab so basically now I am already authorized in the stripe CLI I think so let's hit the enter we haven't already authorized okay so let's close this and yes please note done the stripe CLI is configured for your account with your account ID this and that will expire in 90 days that's fine okay so let's clear up everything and then what do we have in the documentation now we need to start listening in forwards to our local so basically whenever the checkout process happens stripe cannot make a request to our server because our server is locally hosted however the stripe CLI can listen to those web Hooks and forward that to our local installation so let's copy this and paste this right here and let's change we are listening our webhoop basically locates under uh Port 8000 slash web hook okay this is where our webhook locates and this is how we defined in the roles right here okay so let's hit enter now now we're listening ready you are using stripe APA version something your web hook uh signing secret key is this we will need that signing secret key later and now so we have basically everything what we need and now we can trigger uh an event which will come into our web hook like we can do the checkout process as well but let's first test uh if the event comes into our web hook so I click and copy this and basically first I need to open another CMD and navigate into the folder and then I am going to copy this stripe trigger and paste this right here however we have stripe dot XA trigger payment intent succeeded okay so let's hit the enter and let's open the where is that let's open this second terminal right here uh and let's hit the enter sometimes sometimes if you don't hit the enter on Windows CMD it doesn't show the output okay but right here we see charts succeeded payment in 10 succeeded payment intent created and three requests was made into our web hook okay right here three requests was made and all of them returned with status code 200 but actually that's because we don't return anything from this webhook right so and charge succeeded payment intent succeeded in payment intent created these are the event types which are not relevant for us at the moment what we need is checkout process okay so now let's um let's actually Implement code right here and then we can go with the flow and make a payment again test payment using stripe so what do we need to do so we need endpoint Secret basically let me copy everything from here everything click on copy and let's paste this right here and we don't need this require and let's remove the comments okay this is a stripe CLI Web book secret and here is our webbook secret so I'm going to take this and put this right here again this is at the moment for testing purposes on production you will have a different endpoint secret basically we should probably put this in the EnV as well so stripe web hook secret and let's paste this right here okay so Ian tribe weapon Secret now we read all the input coming and we construct an event we construct event based on the payload that's coming based on the signature header that's also returned with as a response header and based on the endpoint Secret however I had like problem on this and I spent few hours on that the time in my computer wasn't set correctly and the construct even didn't work and I was always getting signature verification exception okay basically this header contains the time as well inside there and time must be correctly set in your computer okay so now I'm going to return response excuse me so we're going to return response with an empty string but the status code will be 200 okay when the following error happens and let's return status 400 here as well however down below we're going to return status 200 but with an empty content and right here we have the one of the event types um payment intent succeeded that was actually triggered right here all right now let's check out and have a look let's open localhost port 8000 and click checkout right here and let's observe here as well okay look at this payment intent create it okay this is the when this form is created then it triggers an event payment intent created and that event comes to us okay the events basically came right here however we don't need to do anything for that specific event we can even configure on which events the stripe should send events to our webhook and that is something we should probably do on production but let's provide now credit card details here that asks me to verify my mobile number which I don't want at the moment okay and provide right here name and now let's hit the enter here again wait let's click pay and now let's wait right here so customer created even happened payment intent succeeded happened charge succeeded happened and finally checkout session completed happen okay all those events happened and of course at this moment because we were redirected to the page we see success URL but if the tab is closed before redirect these events will still happen stripe will still make requests into our web hook and you the user will not see immediately this success page because the tab will be closed but user probably will get an email now that hey your order has been paid and thank you for that and we're going to actually do this in on production applications so now I'm going to take this checkout session completed okay and we will be able to take out the session ID from there okay so I'm gonna support only these events checkout session completed and if we go into stripe dashboard again and we click on received events okay those are the events we received and let's search for checkout session which is right here you see checkout session and it has the object ID and this is the session ID this is the session ID we generated and then this is the session ID based on which we need to select the order in the database and Mark it as paid okay so if right now I copy this session ID and for example um check in the database the order will be paid because the redirect happened but if the tab is closed the redirect will not happen again I want you to be very clear and reproduce the problem again okay let's have a look in this terminal again and I'm going to click pay and open the terminal and as soon as button turns green what happened okay I'm going to click pay and as soon as button turns green I'm going to close the tab okay I close the tab and we see right here events however at this very moment I'm sure that the order basically is unpaid and if we check right here we're going to get more events like we received additional events here and at the top we have charge let's search for checkout session completed 20 seconds ago okay this is exactly what we need so basically I'm going to take data object ID uh data object this is the payment intent we're going to take the session ID from there from here so session session ID will be payment intent that basically is a session to be honest so we can call this session and the session contains much more information if we scroll down below we see when it was created in which currency we should also see the customer information right here and we should also see the total amount for the order basically everything okay and we take this session ID and then we're going to do something similar we are doing on success right here we're going to select the order if the order doesn't exist we return something okay if we select the order by the session ID the status must be unpaid and if the order doesn't exist we set the status to be if the order doesn't exist we return not for an exception uh and no this is something we have to modify so basically because right now we have webhook and we have this redirect as well one of them will probably webhook will first webhook will make requests and then redirect will happen okay so first this code will be executed and later this code will be executed the ordering um I'm not 100 sure that the ordering will be like this but I'm sure that both of them will be executed if everything goes successfully so right here in this checkout we need to select an order let's remove this unpaid Weir so we select the order and if the order exists okay in this case let's do it like this if the order exists and if the order status is unpaid then we Mark is it as paid okay and in this case we can even like send um send email to customer okay so this is the place we need to do and obviously down below we're going to return 200. if the order doesn't exist there might be a reason for that and we simply don't do anything and we just return uh 200 so if we move up right here we should probably do something similar we need to select an order okay and if the order exists and if the order status equals unpaid then we basically let's do like this if the order doesn't exist with the session ID we need to throw Note phone exception in any case okay throw new not found HTTP exception however if the order exists we don't need this here and if the status is unpaid we're going to make it paid in other in other case webhook made requests first before the redirect happened and then the order will be actually already paid and we simply need to show success to the user okay so now let's uh let's follow this into this once again so let's open localhost port 8000 let's uh let's check hold click on checkout and open here as well payment intent created and now let's observe okay let's click pay and open this okay now look at this pay attention look at this checkout session completely that already happened before redirect and now the redirect happened so everything basically went well and we see this access page and we are sure that even if the tab is closed the order will definitely be marked as um marked as completed so basically we need to test this once again so I'm going to open now again localhost Port 8000 and checkout you can test this on your own just I want to make sure that you fully understood what I'm talking about I click pay and I'm going to close tab as soon as the button turns into green so I close the tab and we see checkout session completed okay if we go now in the stripe dashboard and have a look in the event six seconds ago this is the event I take this you take this session and we select the order based on this session and see the status of the order okay this can be done and you are likely cancel so for example I'm going to find an order find I can use I think Tinker as well but let's put this uh session ID here and I'm going to get burst and let's dump the order okay now let's access to localhost slash cancel hit the enter look at this so we see the order okay and the status of the order is paid and that is paid even though we close the tab that is paid because webhook made a request into our webhook URL and that marked it has paid all right guys that's it for this video and I hope it was helpful stay tuned because as I mentioned I'm working on a fully functional laravel e-commerce project which will be released soon it's going to be multiple hours don't forget to test the YouTube's like functionality click the like button and check after one year if our like is still there the source code of this lateral project will be available on my GitHub account I will put also a link in the video description alright thanks for watching and I will see you in the next time

Channel: The Codeholic

Views: 40,808

Keywords: thecodeholic, laravel stripe, laravel stripe checkout, stripe laravel checkout, stripe checkout, stripe online payments checkout, laravel products checkout, laravel ecommerce checkout, laravel online payments checkout, stripe webhooks, stripe webhooks implementation, stripe checkout complete flow, stripe checkout redirect urls, stripe cli for webhooks, stripe webhooks laravel, laravel online payments, stripe webhook tutorial, laravel stripe tutorial, stripe laravel tutorial

Id: J13Xe939Bh8

Length: 63min 36sec (3816 seconds)

Published: Mon Oct 10 2022