Coding

NodeJS / Express / MongoDB – Build a Shopping Cart – #16 Making Charges with Stripe

  • 00:00:00 now charging a customer isn't that
  • 00:00:03 difficult as before you saw well
  • 00:00:06 stripe has a good documentation and the
  • 00:00:09 same is true for charges on the back end
  • 00:00:12 here we should go on API libraries and
  • 00:00:16 there you will find different languages
  • 00:00:19 and how to implement stripe now as you
  • 00:00:21 see for no js' we should first install
  • 00:00:24 stripe so let's do this
  • 00:00:26 I'll open up my console skip out of my
  • 00:00:30 server here and I will run NPM install
  • 00:00:32 stripe though I will add the save flag
  • 00:00:36 here to also will create an entry new
  • 00:00:38 package.json file with that stripe got
  • 00:00:44 installed and I'm ready to use it in an
  • 00:00:46 order to use that we check out in noches
  • 00:00:48 API Docs now these Doc's here are also
  • 00:00:52 great they provide us detailed
  • 00:00:55 documentation about the different stripe
  • 00:00:57 features and I'm interested in charging
  • 00:00:59 the client here or the customer there
  • 00:01:02 from go-to charges and then I can learn
  • 00:01:05 how to create a charge now as before
  • 00:01:07 here we see our real key not just any
  • 00:01:12 testing he does two key from our API
  • 00:01:14 settings though this time it's the
  • 00:01:17 secret key that's the one we're using on
  • 00:01:19 the server and since the server
  • 00:01:20 unlike the JavaScript on our front-end
  • 00:01:23 isn't accessible by everyone it's safe
  • 00:01:26 to use our public excuse me or a secret
  • 00:01:28 key there so I can simply copy this code
  • 00:01:34 here to make the charge on the server of
  • 00:01:38 course I'll need some adjustment but
  • 00:01:39 I'll come back to this so I'll go back
  • 00:01:41 to my editor go to the routes index file
  • 00:01:44 and first I will create a new route this
  • 00:01:48 should be a post route and I will also
  • 00:01:50 use slash checkout as a path here this
  • 00:01:54 is the route I try to access when
  • 00:01:55 successfully submitting D credit card
  • 00:01:58 data form D checkout form now in here
  • 00:02:02 what I want to do is well I will paste
  • 00:02:05 in the code I copied from the stripe
  • 00:02:07 page but before actually using this I'll
  • 00:02:10 copy this check where I redirect if we
  • 00:02:12 don't have a card so
  • 00:02:14 if we somehow got to this page in a
  • 00:02:16 different way
  • 00:02:17 and thereafter I'm recreating the card
  • 00:02:21 like we did before and then I'm good to
  • 00:02:26 go to use stripe so this is the test
  • 00:02:29 private key to secret key and then here
  • 00:02:32 we're creating our charge now as you can
  • 00:02:36 see this is pretty self descriptive we
  • 00:02:37 get the amount and the amount that's
  • 00:02:39 important to understand sand dollar
  • 00:02:41 sensor or incense basically and always
  • 00:02:45 the smallest now my English is a bit
  • 00:02:49 limited it might be smallest piece each
  • 00:02:51 currency like cents and dollars or in
  • 00:02:53 Euro it will also be cents
  • 00:02:55 so if we have something that costs forty
  • 00:02:58 dollars it would actually have to be
  • 00:03:00 4000 cents here that's important to
  • 00:03:03 understand so therefore the amount we
  • 00:03:07 use will be our card total price
  • 00:03:09 multiplied by 100 since our total price
  • 00:03:12 will be stored in full dollars and the
  • 00:03:16 currency should be US dollars now the
  • 00:03:19 source here this actually is just a
  • 00:03:21 dummy key the source will be the token
  • 00:03:24 created by the stripe JavaScript SDK
  • 00:03:28 which validated the credit card and have
  • 00:03:32 a look at the last video if this is
  • 00:03:34 unclear to you now as you might remember
  • 00:03:37 we're adding this token as a hidden
  • 00:03:40 input field here in our check out chase
  • 00:03:43 file and therefore I can simply access
  • 00:03:46 it here on my request body and then
  • 00:03:50 stripe token stripe token is simply the
  • 00:03:53 name of this hidden input field so that
  • 00:03:58 is my stripe token and you may make any
  • 00:04:01 description here I'm just going to name
  • 00:04:04 it test charge and with that we were
  • 00:04:07 basically making the charge but of
  • 00:04:09 course we also need to handle possible
  • 00:04:11 results of the charge and this will be
  • 00:04:13 called well as the description says here
  • 00:04:16 well whenever this is done so
  • 00:04:18 asynchronously of course I want to check
  • 00:04:21 if we got an error during the charge in
  • 00:04:24 this case I want you flashed as
  • 00:04:28 with the flash package we installed
  • 00:04:30 early and a serious and I will store it
  • 00:04:33 in an error object here and what I want
  • 00:04:38 to store is the message which stripe
  • 00:04:40 will provide for me and then I want to
  • 00:04:43 let say redirect the user to the
  • 00:04:47 checkout page and I'll come back to
  • 00:04:51 displaying this error in a second if we
  • 00:04:55 are successful though I also want to
  • 00:04:58 flash something I want to flash
  • 00:05:00 something into a success object here and
  • 00:05:02 I want to say successfully bought
  • 00:05:06 product something like that I also then
  • 00:05:10 want to set my cart equal to null so
  • 00:05:12 clear the card and I want to redirect to
  • 00:05:16 the index page and I will do something
  • 00:05:18 about displaying this success message in
  • 00:05:21 a second as well but first I want to
  • 00:05:23 talk about something else
  • 00:05:24 you might have noticed that I'm
  • 00:05:26 resetting the cart I might have gotten
  • 00:05:29 my money but I'm not sending my customer
  • 00:05:33 the book he bought right well that's
  • 00:05:35 something which will come in the next
  • 00:05:37 video is because as you might have also
  • 00:05:39 noticed we never request a user to login
  • 00:05:42 the user is able to well charge his own
  • 00:05:46 credit card anonymously so that's a
  • 00:05:49 great business model for us we get money
  • 00:05:52 we don't have to send anything and we
  • 00:05:53 don't even know who bought it besides
  • 00:05:55 the information which gets sent with the
  • 00:05:57 charge to our stripe account so that
  • 00:06:00 certainly may take some improvement but
  • 00:06:03 for now I'm leaving it like this to show
  • 00:06:05 how to make a charge before adding other
  • 00:06:08 pieces to it so first let me get back to
  • 00:06:10 displaying the error and the success
  • 00:06:12 message here let's start with the error
  • 00:06:15 I will display this on a checkout page I
  • 00:06:20 already got my charge error place here
  • 00:06:22 but I need you well adjust this a little
  • 00:06:25 bit for one I only want to attach this
  • 00:06:29 hidden class here if we don't have an
  • 00:06:31 error now since this can now also be
  • 00:06:33 sent from the server I need to change
  • 00:06:36 the way this view is rendered so I will
  • 00:06:39 use
  • 00:06:40 handlebars here a little if statement
  • 00:06:43 and check if I got no errors in which
  • 00:06:48 case I would add the hidden class
  • 00:06:50 otherwise well this will not get
  • 00:06:55 attached and here I conditionally also
  • 00:06:58 want to set a text which should be error
  • 00:07:02 message here for example now currently
  • 00:07:08 I'm not sending this so back in the yet
  • 00:07:11 check out route here I need to add these
  • 00:07:13 two pieces to this function I will first
  • 00:07:17 create a new variable called error
  • 00:07:21 message here which should be request
  • 00:07:26 flash into an error object and then the
  • 00:07:31 first element in the array and why do I
  • 00:07:34 access this like this well the connect
  • 00:07:37 flash package which we're using for that
  • 00:07:39 will basically store multiple items into
  • 00:07:43 this error object or into an array in
  • 00:07:46 this error object here so it will
  • 00:07:48 basically use this error object here as
  • 00:07:50 kind of a map where we have keys and
  • 00:07:53 values to values being the error
  • 00:07:54 messages or the messages in general and
  • 00:07:56 the keys being well like Araki's 0 2
  • 00:08:00 well highest number of messages you
  • 00:08:02 stored there now I know that I will only
  • 00:08:05 store one error here that's the one I'm
  • 00:08:08 flashing here when we got an error and
  • 00:08:11 I'm retrieving it by accessing the first
  • 00:08:14 element or the element with the key of 0
  • 00:08:17 so that gives me the error and with that
  • 00:08:21 I'm able to pass this error message to
  • 00:08:27 my view and I also need to pass the no
  • 00:08:32 error field here or no error variable
  • 00:08:36 which is just a check if error message
  • 00:08:39 is actually anything else or it's not
  • 00:08:42 null so this will be true if we got no
  • 00:08:47 errors otherwise will be false which is
  • 00:08:49 to behavior I want because if we do have
  • 00:08:51 errors that
  • 00:08:52 to hide this hidden class or I don't
  • 00:08:55 want to use this hidden class so that
  • 00:08:56 the error message being out but here is
  • 00:08:58 clearly visible I hope that's clear how
  • 00:09:01 that works and if I do get an error
  • 00:09:05 through my front and credit card
  • 00:09:09 validation here I'm overwriting this
  • 00:09:11 anyways which is the behavior I do want
  • 00:09:13 so that's the error case let's also
  • 00:09:16 handle the success case so in the index
  • 00:09:19 dot HBS file that's the file I will
  • 00:09:21 redirect you if we're successful here at
  • 00:09:25 the end redirect to just slash is the
  • 00:09:27 indexed or HBS file wherever land well
  • 00:09:30 here I want to add new code at the very
  • 00:09:34 top of this file I want to add a
  • 00:09:36 bootstrap class or bootstrap row here
  • 00:09:39 and then just some bootstrap styled def
  • 00:09:45 here which is nicely centered and of
  • 00:09:48 course style is according to your needs
  • 00:09:57 I will add an idea which I will call
  • 00:10:04 success here for example we ran Dave
  • 00:10:08 with an idea of success I mean there
  • 00:10:10 should also get some butcher classes
  • 00:10:12 alert but this time alert success not
  • 00:10:14 alert danger as the air or they've had
  • 00:10:17 and I will also add a bootstrap excuse
  • 00:10:21 me a handlebars if statement here to
  • 00:10:25 only show this or to add this hidden
  • 00:10:31 class here if we have no message because
  • 00:10:36 then of course I don't want to show this
  • 00:10:38 so it is just a similar logic as with
  • 00:10:40 the error case before and I will make
  • 00:10:42 sure to pass no message in a few seconds
  • 00:10:45 ago yeah I had so in a few seconds where
  • 00:10:48 it's been a long day so in the case that
  • 00:10:53 we do have a message well I want to
  • 00:10:55 output it here of course so pretty
  • 00:10:57 similar to the error case just with
  • 00:10:59 success and of course I need a final
  • 00:11:02 adjustment in my routes file now here at
  • 00:11:05 the top route where I load my index page
  • 00:11:07 I want to make sure to show such a
  • 00:11:11 success message message if I do have one
  • 00:11:13 so I will set my success message to be
  • 00:11:17 well the message I get from my flash
  • 00:11:21 storage here I will access the success
  • 00:11:23 object of course the first element as
  • 00:11:26 well and this will be the message I
  • 00:11:28 store in this flash storage right here
  • 00:11:32 success and I only store one element
  • 00:11:36 that's why I only need to fetch one
  • 00:11:38 element here then I can return this here
  • 00:11:42 so I will set my success message equal
  • 00:11:45 to success message of course make sure
  • 00:11:47 that your key names here match the names
  • 00:11:51 of the variables you're using here on
  • 00:11:54 your view and like the four with the
  • 00:11:57 errors I also need my no messages field
  • 00:12:02 here which should be well the inverse of
  • 00:12:05 success message so basically this will
  • 00:12:07 be true if we have no massive chasm it
  • 00:12:10 will be
  • 00:12:11 Falls if we have at least one message so
  • 00:12:14 no messages here there should also be no
  • 00:12:17 messages if I use it as a key name in
  • 00:12:20 the routes file and with that that
  • 00:12:22 should be good too well to work let's
  • 00:12:27 try if everything works as intended by
  • 00:12:30 restarting the server going over here
  • 00:12:34 and reloading the Edie page here and
  • 00:12:38 well one thing doesn't work is that I
  • 00:12:41 see this alert field here that should be
  • 00:12:44 the case let's see what that happens
  • 00:12:46 well the reason is very simple
  • 00:12:49 there should be no error not no errors
  • 00:12:53 since well I have no error as a key name
  • 00:12:56 here I was talking about the importance
  • 00:12:58 of naming this right a few seconds ago
  • 00:13:00 so yeah here you go
  • 00:13:02 so every Lotus now looks much better let
  • 00:13:06 me enter some dummy data here Chris and
  • 00:13:09 I will fetch a valid credit card number
  • 00:13:15 again using the one from the getting
  • 00:13:17 started example here enter this here
  • 00:13:22 enter a valid date in the future and a
  • 00:13:25 free number free digit a code here click
  • 00:13:29 buy now and looks pretty good we are
  • 00:13:33 forwarded to the front and you see
  • 00:13:36 successfully bought product one thing
  • 00:13:38 which is not working is that the card is
  • 00:13:42 still there so we need to work on that
  • 00:13:44 but if we have a look at the stripe back
  • 00:13:48 and now go back to the dashboard refresh
  • 00:13:50 this page we should see that some charge
  • 00:13:55 was made yeah looks good we made a
  • 00:13:58 charge 62 euros which looks a bit too
  • 00:14:05 much if we're charging $50 here to be
  • 00:14:08 honest a total so yeah yeah 43 the yours
  • 00:14:12 that's fine so the only thing that's not
  • 00:14:14 really working is that the shopping cart
  • 00:14:16 isn't cleared so let's have a look at
  • 00:14:18 that yeah the reason for this is that of
  • 00:14:21 course I need to clear my session
  • 00:14:24 card here so request session card so if
  • 00:14:29 I save this and restart my server now
  • 00:14:32 reload my page it's still there of
  • 00:14:35 course so I will just quickly charge
  • 00:14:37 myself again good thing is it's just
  • 00:14:39 testing charge of charges charges right
  • 00:14:42 so whoops that's the wrong year that
  • 00:14:46 won't work so let's try this again bye
  • 00:14:49 now we're getting forwarded and the
  • 00:14:52 shopping cart is gone no items in cart
  • 00:14:54 great so well that really was a lot of
  • 00:14:59 work but we get a working basic shopping
  • 00:15:02 cart now of course important feature is
  • 00:15:05 still missing we're not storing the user
  • 00:15:07 information we're not requesting the
  • 00:15:09 user to log in we're not storing in our
  • 00:15:12 database we couldn't send the products
  • 00:15:13 the user pod but hey we get the money
  • 00:15:16 right we got what we wanted the charges
  • 00:15:19 are working we're able to validate key
  • 00:15:22 payment data the user entered and we're
  • 00:15:24 able to actually make a charge Fu's
  • 00:15:27 stripe as you see it worked instantly
  • 00:15:30 here so that has been a major step in
  • 00:15:32 the next videos of course I'll focus on
  • 00:15:34 actually forcing the user to log in
  • 00:15:37 storing user information so that in a
  • 00:15:40 real application you would be able to
  • 00:15:42 then send whatever the user bought to
  • 00:15:44 the user see you in the next videos bye