Coding

NodeJS / Express / MongoDB – Build a Shopping Cart – #14 Stripe Payment Views

  • 00:00:00 welcome back to the serious on building
  • 00:00:03 a shopping cart with no chess I left it
  • 00:00:07 well this state where we have our
  • 00:00:08 product page and we could add items to
  • 00:00:11 your shopping cart have a look at the
  • 00:00:12 shopping cart see it here CD total sum
  • 00:00:16 we have to pay and well I got this
  • 00:00:19 checkout button which does nothing well
  • 00:00:21 and this in the next videos I want to
  • 00:00:23 change this and I want to make this
  • 00:00:25 checkout button work so that we can
  • 00:00:27 actually pay our items now as before I
  • 00:00:31 will do this step by step and the first
  • 00:00:33 step is I want to add a check out do so
  • 00:00:38 let's say a view which allows me to
  • 00:00:40 insert my personal data my credit card
  • 00:00:43 data so that in the next step I'm able
  • 00:00:46 to actually make a charge on this credit
  • 00:00:49 card now to make a charge I will use
  • 00:00:52 stripe which is basically just a
  • 00:00:56 third-party service you can visit it at
  • 00:00:59 stripe comm which makes payments very
  • 00:01:02 easy and provides convenient API to work
  • 00:01:04 with too easily
  • 00:01:06 well validate credit card data and then
  • 00:01:08 make charges on these credit cards and
  • 00:01:11 you can learn more about stripe on their
  • 00:01:13 web page stripe comm and I will come
  • 00:01:16 back to this page their documentation
  • 00:01:18 ends on later on in the next videos for
  • 00:01:21 now let's start by while building the
  • 00:01:24 view which we see when we click checkout
  • 00:01:26 here back in a project for that well
  • 00:01:29 I'll bring down a console here I will
  • 00:01:31 create a new view in the shop folder
  • 00:01:34 here and I will name it checkout dot HBS
  • 00:01:37 now I already prepared some code which I
  • 00:01:40 pasted in here and of course you will
  • 00:01:42 find the code and the getup repository
  • 00:01:44 which you'll find in the description and
  • 00:01:45 I know there are some of you who don't
  • 00:01:48 really like this he would love to see me
  • 00:01:50 type every single line of this markup
  • 00:01:53 but there are also a lot of viewers who
  • 00:01:56 say and I'm kind of leaning on their
  • 00:01:59 side who say that they don't want to see
  • 00:02:01 me type while what it says 60 lines of
  • 00:02:05 HTML code since this isn't really that
  • 00:02:08 well difficult and not really what this
  • 00:02:11 series is all about so what I did paste
  • 00:02:14 – here is just some basic markup using
  • 00:02:16 bootstrap classes to create a nicely
  • 00:02:19 formatted form where I fetch the name of
  • 00:02:22 the person purchasing this while the
  • 00:02:25 guts in the shopping cart the address
  • 00:02:27 the cardholder name which of course
  • 00:02:29 might be the same as this name but might
  • 00:02:31 also differ the credit card number the
  • 00:02:34 expiration month of the credit card the
  • 00:02:37 expiration year and the security code on
  • 00:02:40 the back of your credit card this CVC
  • 00:02:43 thing there now all these fields also
  • 00:02:47 have their IDs like card name address so
  • 00:02:50 all the input elements have these ideas
  • 00:02:52 and besides that I only added bootstrap
  • 00:02:55 classes to make them look nice and some
  • 00:02:57 basic validation here with the required
  • 00:02:58 attribute which is html5 attribute
  • 00:03:01 making sure that well these fields are
  • 00:03:04 actually required so that's all this
  • 00:03:07 mark up offers for now notice that the
  • 00:03:09 form action is not finished it's just a
  • 00:03:12 slash here that's not what I want to
  • 00:03:14 have in the end I want to have slash
  • 00:03:16 something else later on and also notice
  • 00:03:18 I have your total which actually isn't
  • 00:03:21 displaying anything here of course I
  • 00:03:23 want to show dollar well whatever the
  • 00:03:26 user has to pay to kind of sum this up
  • 00:03:28 on this page – so where where shall we
  • 00:03:32 start I think a good start is to
  • 00:03:34 actually output this total here and then
  • 00:03:37 hook up this action here to D well
  • 00:03:41 actual route to which I want to hook it
  • 00:03:44 up sewed which I want to trigger upon
  • 00:03:46 while submitting this form so let's
  • 00:03:49 start by output of the total and of
  • 00:03:51 course the place to start is is in the
  • 00:03:53 routes folder in the index dot JSP I
  • 00:03:58 will add a new route and you point out
  • 00:04:01 one thing which I also read in the
  • 00:04:03 comments yes of course it's not
  • 00:04:06 necessarily the best practice to store
  • 00:04:09 all the code in the routes file here you
  • 00:04:12 may also create a new folder which you
  • 00:04:15 call it's a controllers where you then
  • 00:04:17 create your shop controller or whatever
  • 00:04:20 where you then create new functions
  • 00:04:23 which you export that's important export
  • 00:04:27 every
  • 00:04:27 thing with marshal exports so export an
  • 00:04:29 object which has the different functions
  • 00:04:31 and then you would just call these
  • 00:04:33 functions from within the routes file
  • 00:04:36 here that would be a more modular
  • 00:04:38 approach I'm just keeping it all in this
  • 00:04:41 file to find the right balance between
  • 00:04:45 showing the best possible practice but
  • 00:04:49 also keeping the code together and
  • 00:04:52 making it easier to follow along and I
  • 00:04:54 hope you understand this so what I will
  • 00:04:57 do here is I will create a new route
  • 00:04:58 which should be a get route and which P
  • 00:05:02 which apish slash check out now this
  • 00:05:06 will be the route which should load this
  • 00:05:09 check out view I just populated with
  • 00:05:12 HTML markup so here I will have my
  • 00:05:16 default function with request response
  • 00:05:20 and next and inside here what do I want
  • 00:05:26 to do here well first I want to copy
  • 00:05:29 this check here to see if the card
  • 00:05:32 actually exists because if it doesn't
  • 00:05:34 and the user just entered slash check
  • 00:05:36 out in the URL manually well then I
  • 00:05:39 don't want to display this page because
  • 00:05:41 we don't have a shopping cart so in such
  • 00:05:44 a case what I want to do is I want to
  • 00:05:47 basically render another page and when I
  • 00:05:51 do want to render is the shopping cart
  • 00:05:53 page here indeed so that's just fine
  • 00:05:56 just copying all of that check and
  • 00:05:58 rendering another page or even better
  • 00:06:01 would be now that a thing about it to
  • 00:06:03 redirect the user to slash shopping cart
  • 00:06:08 to cleanly load this route then but if
  • 00:06:12 we have a valid shopping cart and we're
  • 00:06:15 not reaching this code well in this case
  • 00:06:18 what I want to do is I of course want to
  • 00:06:22 grab my shopping cart I want to create a
  • 00:06:25 new one that's the pattern we
  • 00:06:27 established right and then I want to
  • 00:06:29 render my shop slash checkout view so
  • 00:06:34 this checkout HPS file in the shop
  • 00:06:36 folder and here I will
  • 00:06:40 then pass a JavaScript object holding
  • 00:06:42 some variables to use in this view one
  • 00:06:45 shall be the total which I can fetch
  • 00:06:48 from my cart the total price and the
  • 00:06:51 other data fields I will later on ad
  • 00:06:54 will have something to do with possible
  • 00:06:57 errors which could occur during charging
  • 00:07:00 or validating the data but for now I
  • 00:07:02 will only go with the total go back to
  • 00:07:05 the checkout view and then here use
  • 00:07:07 handlebars to well simply output the
  • 00:07:12 total like so right when other thing I
  • 00:07:15 will also do is I will adjust this
  • 00:07:17 action here to also point to a checkout
  • 00:07:20 route though this will not be the route
  • 00:07:22 I created here not this ghat route
  • 00:07:25 because remember here I have method post
  • 00:07:28 so this will target a post route with a
  • 00:07:31 path of checkout I haven't created that
  • 00:07:33 yet but I will soon do so now in order
  • 00:07:36 to actually reach this page here I also
  • 00:07:39 need to change something here in my
  • 00:07:41 shopping cart HPS file currently I do
  • 00:07:44 have a button here but actually I want
  • 00:07:47 to make this a link so I will use the
  • 00:07:49 anchor tag and I'm talking about this
  • 00:07:51 checkout button at the bottom I will
  • 00:07:53 therefore also add the wrath attribute
  • 00:07:56 and then of course I want to load my
  • 00:07:59 check out route now this time since this
  • 00:08:02 will be a get request automatically Here
  • 00:08:05 I am referring to the route I created a
  • 00:08:06 few seconds ago so with this I'm
  • 00:08:09 restarting my server to see those
  • 00:08:12 changes and if I reload my shopping cart
  • 00:08:16 page it still looks the same as before
  • 00:08:17 because the session wasn't deleted if I
  • 00:08:21 hit checkout now I'm talking to the
  • 00:08:23 checkout page which looks like that and
  • 00:08:25 where I can now enter my personal data
  • 00:08:28 to fill out this and as a next step to
  • 00:08:31 then make sure or give me the
  • 00:08:34 possibility of validating this credit
  • 00:08:36 card data with stripe with the help of
  • 00:08:38 stripe and as the final step then of
  • 00:08:41 course submitted as well so that will be
  • 00:08:44 what I work on next