Coding

Laravel 5.2 PHP – Build a Shopping Cart – #10 Stripe Payments View

  • 00:00:00 we're getting closer to the end or at
  • 00:00:03 least to the part where we can actually
  • 00:00:05 buy our products or go to the checkout
  • 00:00:08 process right now the state of our
  • 00:00:11 application of course is that we have
  • 00:00:13 our projects here products and we can
  • 00:00:15 click on them add into our cart and have
  • 00:00:17 a look at our cart but there's checkout
  • 00:00:20 button doesn't work and in this video I
  • 00:00:22 want to work on that I want to make this
  • 00:00:24 checkout button working and I want to go
  • 00:00:26 to a check out page of course next steps
  • 00:00:29 that are to actually implement a
  • 00:00:31 checkout but let's do it step by step
  • 00:00:33 and focus on creating the required views
  • 00:00:36 and routes first for this as a first
  • 00:00:39 step I will head over to my shopping
  • 00:00:42 cart plate PHP file so the view which
  • 00:00:47 renders the shopping cart and the ste
  • 00:00:49 button which actually should well
  • 00:00:52 navigate me to the shopping cart over to
  • 00:00:55 the checkout excuse me should never get
  • 00:00:56 me to to checkout now I'll just change
  • 00:00:59 this to be an anchor tag so simply by
  • 00:01:01 replacing button with a also replace it
  • 00:01:03 in the closing tag here of course I'll
  • 00:01:06 keep the button classes to keep the look
  • 00:01:08 of it and why did I change this well
  • 00:01:12 simply because I want to make this a
  • 00:01:13 link pointing to around which I will
  • 00:01:16 create next but I will enter it right
  • 00:01:19 now here so entering the template
  • 00:01:22 expression here with double curly braces
  • 00:01:24 I'll use route to create a link to the
  • 00:01:28 check out route now as a chess set this
  • 00:01:31 route doesn't exist yet so let's create
  • 00:01:33 it any route stop PHP file here I want
  • 00:01:37 to set up this route and I'll do it
  • 00:01:39 right here below the shopping cart light
  • 00:01:41 routes so this will be a get route and
  • 00:01:44 it should give me my checkout page so
  • 00:01:47 I'll I'll give it a URL of slash
  • 00:01:49 checkout and then of course my array to
  • 00:01:52 configure this route and here I want to
  • 00:01:55 use my product controller but I want to
  • 00:02:00 use to get checkout action which I also
  • 00:02:02 haven't created yet and I will do so in
  • 00:02:04 a second I'll give this route a name and
  • 00:02:07 of course the name should be checkout
  • 00:02:10 because that's the name I just used in
  • 00:02:13 the anger
  • 00:02:14 Tagg right so of that I created my get
  • 00:02:17 route the next step of course is to
  • 00:02:19 create this get checkout action in the
  • 00:02:22 product controller so I'll head over
  • 00:02:24 there to the product controller and at
  • 00:02:26 the bottom of course positioning doesn't
  • 00:02:29 really matter I just want to keep my
  • 00:02:31 cart related routes up here and then
  • 00:02:33 I'll go to my checkout related routes
  • 00:02:35 down here or actions I will create a
  • 00:02:38 public function which I will call get
  • 00:02:39 checkout and of course will be the
  • 00:02:44 checkout action triggered by this link
  • 00:02:47 and then here what I want to do is I
  • 00:02:49 first want to check if I do have a cart
  • 00:02:52 so I'll just copy the code from my get
  • 00:02:54 card action here and if I don't have a
  • 00:02:57 cart
  • 00:02:57 I'm fine with redirecting the user QD
  • 00:03:00 well empty a shopping cart page which
  • 00:03:02 basically will tell him hey you don't
  • 00:03:04 have items on the cart please add some
  • 00:03:06 so basically it's kind of a redirect
  • 00:03:09 since I'm clicking on you checkout link
  • 00:03:11 on this page so I could also use
  • 00:03:13 redirect back I guess but yeah I will
  • 00:03:16 keep it like this just in case that
  • 00:03:18 something fishy is going on and the user
  • 00:03:20 tried to enter the checkout page by
  • 00:03:23 entering slash checkout in the URL well
  • 00:03:25 then I will make sure he's not getting
  • 00:03:27 to the checkout page if he doesn't have
  • 00:03:30 a card so if we do have a cart
  • 00:03:33 I will first fetch this why are these
  • 00:03:35 session for Sayed and then from the well
  • 00:03:39 cart so get card this is G card store it
  • 00:03:43 in the session and there are all things
  • 00:03:45 we did in the last videos right so like
  • 00:03:48 up here where I get D card – I don't
  • 00:03:51 need to check if we have the card like I
  • 00:03:54 did here because I did this year in the
  • 00:03:55 first step keep that in mind so with
  • 00:03:58 that I'm fetching the old cart and I
  • 00:04:02 will create a new cart that's the same
  • 00:04:04 wall scheme or the same well approach I
  • 00:04:07 used before in the last lectures and I
  • 00:04:10 will create this new card based on the
  • 00:04:11 old card of course and then just to keep
  • 00:04:15 that well approach I could of course
  • 00:04:18 also just access the total on this old
  • 00:04:21 cart so then I will use my cart and
  • 00:04:25 access total price which of course is
  • 00:04:27 as the user should pay and then I will
  • 00:04:30 return with you and I want to return a
  • 00:04:33 view I still have to create I didn't do
  • 00:04:36 that yet I will place it in the shop
  • 00:04:39 folder and I will name a check out later
  • 00:04:42 PHP so here I'm accessing shop dot
  • 00:04:45 checkout whoops stopped checkout which
  • 00:04:48 will lead to this view I've yet to treat
  • 00:04:50 I also want to pass the total price to
  • 00:04:54 that view
  • 00:04:55 so total total like this so with that I
  • 00:05:01 make sure that I do have that price on
  • 00:05:04 the view so that the router set up but
  • 00:05:07 of course the view doesn't exist yet so
  • 00:05:09 in the shop folder here I will create
  • 00:05:12 this new file the checkout plate dot PHP
  • 00:05:16 file which will be well my checkout view
  • 00:05:18 here in this view I'll first go to my
  • 00:05:21 shopping cart view just to grab the well
  • 00:05:24 didi first view view lines here so with
  • 00:05:28 the extending layout and so on and then
  • 00:05:30 I'll close my section here too and with
  • 00:05:33 that I'm ready to write the markup for
  • 00:05:36 my checkout page now which markup to a
  • 00:05:39 want here I'll go back to the shopping
  • 00:05:41 cart and I will grab the diffs here with
  • 00:05:44 the bootstrap well formatting with the
  • 00:05:47 bootstrap columns because I want to keep
  • 00:05:50 that well that style I also reuse
  • 00:05:53 throughout the rest of my application
  • 00:05:55 though I think I can make it a little
  • 00:05:58 bit less white on bigger screens so I
  • 00:06:01 will increase the offset by one to get
  • 00:06:03 it a little bit more in the middle and
  • 00:06:05 therefore I will decrease the width to
  • 00:06:08 have it a little bit smaller a little
  • 00:06:10 bit tight or not not as broad in the
  • 00:06:13 middle of my screen but that's pure
  • 00:06:15 stylistic things and you might change
  • 00:06:17 this of course then just a little header
  • 00:06:19 where I say checkout and then I want you
  • 00:06:22 have another header where I inform the
  • 00:06:24 user what is current total is so your
  • 00:06:26 total is remember everything is in
  • 00:06:29 dollar so I will hard killed you dollar
  • 00:06:31 sign here then enter my template
  • 00:06:33 expression and here I want to print out
  • 00:06:35 total which I do have because this year
  • 00:06:39 does total refers to the
  • 00:06:41 variable I'm passing here in the product
  • 00:06:43 controller down here so I will have
  • 00:06:46 access to this total price but that the
  • 00:06:48 user knows how much is supposed to pay
  • 00:06:51 and next it's time to create D well the
  • 00:06:54 form to fetch the user information so
  • 00:06:57 here I want you also to trigger a post
  • 00:07:00 route and I'll name check out of course
  • 00:07:03 I also have to create this route later
  • 00:07:05 on and I will use the method post like
  • 00:07:09 that and now here's an important thing
  • 00:07:12 how will I actually handle the checkout
  • 00:07:16 well I need some information like credit
  • 00:07:19 card number because I will enter I will
  • 00:07:22 provide a credit card base to check out
  • 00:07:25 here so I need that I need to name I
  • 00:07:27 need the security code on the credit
  • 00:07:30 card and how would I actually do this
  • 00:07:33 will I create some code to connect to
  • 00:07:36 American Express or MasterCard not
  • 00:07:39 really I will use stripe which is a
  • 00:07:42 third party
  • 00:07:43 well provider or service you can use
  • 00:07:45 which basically already has all the
  • 00:07:48 connections to the credit card companies
  • 00:07:50 and offers you a very simple API you may
  • 00:07:54 implement in your project to then easily
  • 00:07:58 create charges and basically charge
  • 00:08:01 customers based on the payment data they
  • 00:08:04 provide it will also verify the data and
  • 00:08:07 encrypt it protected so a lot of stuff
  • 00:08:11 you don't have to worry about and you
  • 00:08:13 really shouldn't worry about because
  • 00:08:15 that is really complicated and not
  • 00:08:17 something easily solved with you have
  • 00:08:19 you lines of code especially since you
  • 00:08:23 also would need to kind of negotiate
  • 00:08:25 your deals with the credit card
  • 00:08:27 companies and so on so that is why such
  • 00:08:29 a third-party service is really worth a
  • 00:08:32 lot and I will use stripe which is this
  • 00:08:35 service so therefore the questions which
  • 00:08:38 information does stripe need so which
  • 00:08:41 information do any to gather in this
  • 00:08:43 form here well let's have a look I will
  • 00:08:46 hit our to the browser and google for
  • 00:08:48 stripe our not strip I'm not
  • 00:08:51 for any hot girls so Stratcom is the
  • 00:08:55 page of this service and right here you
  • 00:09:00 can
  • 00:09:00 well basically read what the service is
  • 00:09:02 all about certainly interesting and you
  • 00:09:05 can also go to the documentation and
  • 00:09:07 then as you can see they got quite a
  • 00:09:10 long documentation which also has this
  • 00:09:14 nice getting started guide which leads
  • 00:09:16 you through all the core well
  • 00:09:19 steps in the process to charge a
  • 00:09:21 customer and basically here you can
  • 00:09:24 already see which data we need we need
  • 00:09:26 two credit card number expiration month
  • 00:09:28 and here and the security code ECBC code
  • 00:09:32 here if we fetch these four information
  • 00:09:36 pieces we can basically send them to
  • 00:09:39 stripe stripe verifies them and then we
  • 00:09:42 can charge the customer so we need to
  • 00:09:44 collect those four pieces of information
  • 00:09:47 so that is what I will implement in my
  • 00:09:49 form here I will therefore throw in some
  • 00:09:54 code and now here's a part some of you
  • 00:09:56 like it some of you don't I think I will
  • 00:09:58 always make it wrong I will just copy
  • 00:10:01 exam prepare to cohere now the reason
  • 00:10:05 why I copied this code into here is it's
  • 00:10:07 really just some bootstrap form control
  • 00:10:11 HTML markup nothing special about that I
  • 00:10:15 will of course lead you through that I
  • 00:10:17 won't fetch a bit more information than
  • 00:10:20 the one required by stripe because later
  • 00:10:23 on in this application we might want to
  • 00:10:25 store for example the user address if we
  • 00:10:28 want to ship whatever he ordered right
  • 00:10:30 so therefore the first input here is the
  • 00:10:34 name of the user and this is required
  • 00:10:37 with this html5 required attribute here
  • 00:10:40 then I'm fetching the address also
  • 00:10:43 required and then I want to get the
  • 00:10:46 cardholder name which of course might be
  • 00:10:48 equal to the name up here but I want you
  • 00:10:50 enable the user to have a different
  • 00:10:52 shipping name or shipping address and
  • 00:10:54 cardholder name therefore I'm fetching
  • 00:10:56 this on a separate input and one
  • 00:10:59 important thing to notice here is that
  • 00:11:00 all these inputs don't have a name
  • 00:11:03 attribute so I'm not assigning
  • 00:11:05 name's the reason for this as you will
  • 00:11:07 see is that I'm not submitting this form
  • 00:11:09 to level so even though I'm setting up a
  • 00:11:13 poster out here in my form tag
  • 00:11:15 I will actually capture this post
  • 00:11:19 request whenever I click on the button
  • 00:11:21 with JavaScript and you will see all of
  • 00:11:24 that no worries and then not send it to
  • 00:11:27 the server but instead read this form
  • 00:11:31 here and I can access all the fields
  • 00:11:33 with the IDS I am setting notice that I
  • 00:11:36 do have IDs and then I collect its
  • 00:11:39 information and I will send this
  • 00:11:41 information to stripe and that's very
  • 00:11:44 important to understand that I will
  • 00:11:46 basically not send this to laravel
  • 00:11:49 directly but instead I will capture it
  • 00:11:51 with JavaScript and send it to stripe
  • 00:11:53 first thereafter
  • 00:11:55 I will let my level application handle
  • 00:11:58 the response stripe gives me but I need
  • 00:12:01 to reach out to stripe this service
  • 00:12:03 first because it's the service
  • 00:12:05 validating all the data and basically
  • 00:12:07 being responsible for well me being able
  • 00:12:10 to charge customers that's why I have
  • 00:12:12 these two steps and you may read more
  • 00:12:15 about it in the documentation the stripe
  • 00:12:18 documentation where you will also find
  • 00:12:20 examples for nodejs or PHP or whatever
  • 00:12:24 code and how to implement it so back to
  • 00:12:27 this form this is you form I have
  • 00:12:29 without names but with IDs which I will
  • 00:12:32 need in my JavaScript code then I'm
  • 00:12:34 fetching the credit card number the
  • 00:12:35 expiration month and the expiration year
  • 00:12:38 and this CVC field here so the security
  • 00:12:41 code I also need to fetch and all the
  • 00:12:44 layout here with the columns has chest
  • 00:12:46 setup so that this doesn't look queue
  • 00:12:47 Ackley actually hopefully of course
  • 00:12:50 since we're here in a lateral form I
  • 00:12:52 will also need to enter my CSRF field
  • 00:12:55 here because that is still needed CSRF
  • 00:12:59 protection is still in place in though
  • 00:13:01 we're using stripe as a first step we
  • 00:13:03 need to validate the session of the user
  • 00:13:06 nonetheless and then I will add a button
  • 00:13:08 of type submit' which will give a class
  • 00:13:13 of button intend but
  • 00:13:15 success and I will just say by now here
  • 00:13:18 so that I'm almost done now we'll go up
  • 00:13:20 I will also give my form and ID here so
  • 00:13:24 I'll just name it let's say check out
  • 00:13:27 form like that and I will add some other
  • 00:13:31 things in well when we progress with
  • 00:13:35 this whole stripe process for now that's
  • 00:13:37 what you will look like and we're
  • 00:13:40 returning this view since we're getting
  • 00:13:44 does get act checkout action here in the
  • 00:13:47 route and then the product controller
  • 00:13:49 remember we're returning this view now
  • 00:13:52 since I will use the post checkout route
  • 00:13:56 in my view here – in the form I also
  • 00:13:59 need to set this up in order to avoid
  • 00:14:02 any errors so I will create a new route
  • 00:14:04 a post route also slash checkout I can
  • 00:14:08 do this because every route is a gator
  • 00:14:10 out keep that in mind
  • 00:14:12 so I can easily use a route with the
  • 00:14:14 same segment here which is or uses a
  • 00:14:17 number HTTP word I will also use the
  • 00:14:22 product controller here so product
  • 00:14:26 controller and then let's say post
  • 00:14:29 checkout and then I will give this a
  • 00:14:33 name off checkout which all this is the
  • 00:14:35 same name as the get route has but again
  • 00:14:37 we're using different HTTP works here so
  • 00:14:42 with that all the routes here are set up
  • 00:14:44 let's see if that doesn't have to get it
  • 00:14:46 working I will basically reload my
  • 00:14:49 shopping cart page if I now click on
  • 00:14:51 checkout I'm taking to the checkout page
  • 00:14:54 and as you can see I could enter my
  • 00:14:55 details here if I click buy now though
  • 00:14:58 or well let me quickly fill something
  • 00:15:01 out here max and then I will grab this
  • 00:15:06 example dummy credit card number here on
  • 00:15:10 the arm nibbler on the stripe page and
  • 00:15:14 then let's enter any arbitrary month
  • 00:15:18 euro and here and code click on buy no
  • 00:15:22 well and I of course I get an error
  • 00:15:24 because the post check out act
  • 00:15:26 which I'm using here in my routes file
  • 00:15:29 doesn't exist yet but besides that well
  • 00:15:32 the checkout form at least does work and
  • 00:15:34 that's a huge first step on what you can
  • 00:15:37 build on to implement the actual
  • 00:15:39 checkout process with stripe now a good
  • 00:15:43 practice for you might be you try this
  • 00:15:46 on your own before while watching the
  • 00:15:48 solution in the next video on the
  • 00:15:52 documentation page here on stripe you
  • 00:15:55 should get all you need and you can also
  • 00:15:57 click on examples down here to have a
  • 00:16:00 look at some examples for example a
  • 00:16:03 payment for build with PHP and so on and
  • 00:16:06 you can also generally dive through all
  • 00:16:09 these links here to learn how to
  • 00:16:12 implement stripe it's not that difficult
  • 00:16:14 to getting scars started guys here is
  • 00:16:16 certainly also a great resource and well
  • 00:16:19 if you feel stuck or are not sure how it
  • 00:16:22 works well then definitely we're in all
  • 00:16:24 other cases to come back in the next
  • 00:16:26 like video and we'll do this together