Subscription Payment : Course Website

hey what's up guys welcome to new episode in this episode we'll integrate building in our application so that the user can pay for subscription and can then view our IP source or any series after getting subscribed to our website alright so let's get started first off we'll be using laravel cashier so that it will be easier to integrate this drive so it is really create first party package offered by laravel so let's required each composer required in two with terminal so I've already installed to save some time so wait for it to finish installing after that it will publish some migration files so that you can migrate the table offered via laravel cashier so let's go ahead and migrate using PHP artisan migrate so once my part is done it will create two table let me so in database so it will create one table it will alter some fields inside user so here it will add let me show you here okay so it was at stripe ID card Brown last four-digit trial and set so some fields like so and it also adds subscription table which is which is like this alright so my Kissin part will do that so once that is done you can find information if you if you need to alter these migrations default migration and if you want to add some more fields to those default table you can first generate the migration or publish it and then alter it and then migrate it alright so quite easy if you want to ignore medicine so all information available here so next thing we need to add this believable trait to our user model alright so let's go to user and here we need to add this be level site by notifiable alright so once that is added you get access to several matters offered by stripe sorry cashier like clear subscription like these matters you can directly call now on user model because we can we have added this trade so next step is to get the stripe key and secret so in dotty and we file let's create these two entries naughty and V close terminal so here you need to create these strategy and secret and then put in your stripe key and secret from your stripe dashboard so you can create free account here you can get the taste dashboard and there will be all test data so once you activate your account for production it will use a product some keys so for testing you'll get these test key under our developer and API ski so once you go to dashboard strive after sign up you'll get to these API keys and then here so this is a secret key let me show you this key and secret one is once you do this revealed then it will reveal the secret and then you can specify here all right so once keys are in place next step is we'll create a subscription so our workflow is going to be like normal workflow so first user will sign up to our website like normal flow like how we used to do and once the user sign up we'll consider that user as a role user and after user is signed oh sorry subscribe to some certain plan we'll consider that user as a subscriber so subscriber on the subscriber can view these series so that that will be the idea behind our logic so next step is to so for that we need peace we'll call that payment babies will direct the user to that payment peace whenever user try to access any series or course so step one will create payment peace so here is information about how you can create and do certain things like so so I'll show you here so after user clicks on any pack any series it looks like this it is to them got any episodes so if user clicks on episode or star series or try to visit so basically we want to restrict the user to this space this video tease alright so this video piece will only be accessible and by user with subscriber rule okay so now let's create the payment page we'll create a controller make controller payment ok let's go to payment controller and let's create let's create index space let's say it payment page and we'll so the payment view so return view payment and we'll pass necessary necessary data like so all right so let's clear this view payment inside inside views resources views and payment dot lead so it looks like I have already created so let's copy and duplicate any of these these files so let's duplicate this file on door plate and name it or save it as payment tartlet so called payment one and here everything looks fine card body you are locked in and inside body will so we'll put form so that form which we have to put your card information about this here so first thing we need to pass this intent to the payment view so let's do that let's go to payment controller and pass in that data intent so user will be the authenticated user and the intent will be getting passed to payment view so payment one so payment I have created for test purpose before shooting this video and implement one will pull the form like so so we are using that intent variable and getting the client secret so let's define the route and view how it looks so route cat payment so it looks like this so next step we need to initialize and this strife and we need to put in we'll need to put in the card element which will establish inject some fields like card and CVC number field in this div so for that we need to put in this code over here inside payment so by the way I will just copy the code and explain it to you so we need to dis put this drive at the top head so which I have defined this yield this section in the outfile and similarly yes yielding Xia's here and then so some CSS styling I put also from where to get this styling or I will pull this code you can copy this styles so there is freedom you can create your own style or use this or simple bootstrap style and next so once we put the scrip my stripe we included a stripe through CDN next step is to create that stripe elements to inject the form so if we see right now we cannot see we only see this one field but we are we need to fill to enter the card information right so that will get from strife will so here just below here I will paste the score so in such a section we'll inject these core so we need to do this thing Windows not add eventlistener and then so if you just copy and paste this code it won't work alright so what we need to do is we need to wrap that code over by this add event listener so we need to lower the page and then inject all this code so whereas ask we are just initializing this type by supplying our stat key and then getting stripe elements and then getting the car card element from strife and then mounting that card element to this card alimentive so that carbon emission can be interred and next we are just grabbing those div cardholder name card button and then we are listening to that card button click event so that when user hit on submit then we are getting we are handling all the card information and checking if card is verified so if card is okay we are getting this setup intent dot payment method so this payment method we need to pass it to back-end to charge the customer or subscribe that customer to particular plan all right so this all code from here from here you can get accept these code all right so once that is done there's check how our form looks now yeah like so so a stripe element in Zack this court over here so what I will do is I will apply some bootstrap styling all right so behind the scene I have applied some booster class like form control to look this form a bit nicer and updated with pay button so instead of P let's say subscribe okay so once that is done we need to pass this payment method to our back-end so that we can subscribe so first let's test if we are getting this set of intent or payment method so and link success so we are thus console logging this and let's refresh open up console and so cardholder name some random data like web tab so card number for testing purpose you can use this card number you can get that from stripe of site as well it is just four two four two four two four two four two so any date in future and any random three-digit number and any random years zip code so once we entered that information that's subscribe yeah so handling success we are getting this payment method so this ID we need to pass it to back-end so of course we'll pass it through as ex request so first let's create that subscribe method so that it will listen for that so subscribe so it will accept our request so we'll be sending post request to the this endpoint and we are getting payment we'll get payment method from our request and payment method and then we'll use this payment method to subscribe so if you see in documentation casio documentation under creating subscription so first we need to grab user and then we need to create new subscription like so so user will be authenticated user so with rustic this end point will will have to apply in this automated web tool these end point so what I will do is I will apply from middleware from constructor so this middle wire at all right so only authenticated user can visit this so later on we'll define custom middleware to check for subscription as well but for now it is fine and actually no substance it is fine we need to use odd because subscription will be taking that on video route for this start users don't need to be subscribed thus authenticated user need to be authenticated and so will create new surface if Sun we can call this method remember we use believe all trade and this is the name of the subscription so this can be any name if your website got multiple subscription or any primary subscription you can call it primary or mean so we'll leave min for now so this is the main subscription and this will be the stuff our plan ID or subscription plan ID so this ID we need to get it from strife and this payment method we are getting from here alright so what we need to do is we need to plan ID so this plan ID we will get it from stripe so visit to dashboard and under billing products so you need to create new product from here so it will be name of it can be name of your website or anything I'll call it course so these unit-level these are optional so create product and this will be the plan name so any plan like monthly yearly monthly and here you can specify ID not the ID which we specify here let's call it web term ethics monthly so you can call it any ID or just leave it blank stripe will generate that ID for you so this is the idea that you need to use your plan ID all right so that is the idea and you can specify a currency how much for this monthly uncle nine and monthly trial period and so you can add trial period if you allow in trial so ad pricing plan so if you see it created this course product with one pricing plan so if you got multiple pricing plan like monthly yearly or lifetime you can add more like just we added so you can call it yearly or make any IDE web dev metics yearly and specify that you need like hundred bucks so billing interval will be yearly monthly and add pricing plan alright so this plan ID also will be getting from request so plan so user will select from form with one here's you want to subscribe to and then entry in card detail and then will suffer user to that particular plan so we'll return responds alright so here we'll create available plans and those plans will be okay so we and these are the available plans that we just created on the stripe and then we'll be passing this plan to our phone okay so now we can display these over here all right so this is the plan select field we just get all the plan we'll go through it just play it off son so key will be the plan key like these stripe keys and then we'll display this name like so monthly and yearly all right okay so once our form is ready so let's do next step which is we need to pass this payment method to this routes off hot rod so that user can be successfully subscribed so let's go back to our web PSP file and we need to define that subscribe method as well subscribe so this will be the post route alright so let's go to this payment toward late file and let's initiate that request so ex you start post so we'll be posting that to subscribe out so with these set of data so fasting is payment method which is this set of intent talk payment method and second one is plan let's make sure we are using yeah plan so let's grab that plan from our forum so let's give it ID subscription plan and inside our this script will grab that subscription plan and then grab that value all right so this is the plan that will be passing to our back-end ok looks cool so let's see if it's working let's subscribe so we get success response so let's go to our dashboard and refresh to see if there are any active subscription for web domotics monthly so you can go to products okay go to products and then your product and we have just subscribed the user to this monthly plan let's go to monthly and view any active subscription yeah so we see this active subscription that we just created so you can get all information about the subscription alright so now we are successfully subscribing user to any plan so now our next step is to integrate this like this middle bar so that only the subscribed user can visit video piece alright so for that we need to create our middleware so let's go to terminal and make middleware we'll call it sex subscription alright so let's go to check subscription okay so your fasting will check if user is locked in like if there is user so if request god user alright so here we are checking if user is not subscribed so we will be Teknik defensive check will do defensive psych like if user is not software will reject user to payment page so payment that we just created so if user is not software then will redirect to payment page otherwise we'll just pass the user to next URL all right so let's register this TTP colonel so we'll register another one called check subscription okay so we are now checking if usually subscribe now let's apply this to our video url so with this short episode so you know what there is a little problem with our middle way so we cannot apply just this check subscription we need to apply author as well so what I will do is I will remove this logic we'll just check if it is not software all right so otherwise it will just fail okay so with that said if we try to visit this URL so first let's check if subscribe user can view this URL yeah perfect fine and let's go back and let's try to visit that URL so we are currently not logged in so first we need to log in alright so we are directed I detect it back to payment page so if we try to visit this space it will redirect us to payment page all right so once we are subscribed so currently we are not directing the directing back to the main page after subscription is done let's do that over here inside our we'll call it success URL there we go there's passing message as well alright so we are getting this success URL after subscripts on its success let's go back to our payment lead and here after success we are getting data so hopefully we'll get this response dot theta so theta dot theta dot success URL so location dot replace to this success URL okay so another taste okay let's do it from start as well for now let's do it from start we need to register other user let's go to let's try to visit this episode piece so suppose our random user try to visit this episode page so it is taking that to login page so currently I think all users in our system are subscriber let's login with this view admin so this one is not subscriber let's login with that user so you can go from register as well I don't want to waste your time password let's login you should take them to payment page yeah works fine monthly and random card name for two for two for two so now let's let's open console if there is an error we'll see right away subscribe conform yeah so it is taking us to the internet page okay alright so this is the basic about how to do subscription and how to take the user to necessity piece how to restrict it so if there is anything you don't understand our anything that you want to ask you can get in touch with me from comment section or you can join the slack user is in description so if there is anything else that we need to add we'll do it in next video we'll do some we might do some refinements and we might add some more security so yeah for now this is it I'll see you on next video bye

Channel: WebDevMatics

Views: 14,430

Keywords: laravel project, stripe

Id: OtLmqDpH-C8

Length: 30min 43sec (1843 seconds)

Published: Sun Oct 06 2019