Coding

NodeJS / Express / MongoDB – Build a Shopping Cart – #15 Stripe Verifying Credit Cards

  • 00:00:00 now to work with this checkout form the
  • 00:00:02 first step is to validate the credit
  • 00:00:05 card data a user enters here because of
  • 00:00:08 course it's very easy for a user to
  • 00:00:09 enter invalid credit card data here and
  • 00:00:12 validating that on our own would be
  • 00:00:15 pretty difficult because well you might
  • 00:00:18 not be aware of the algorithms used to
  • 00:00:20 validate if a credit card number is
  • 00:00:22 valid is valid taking into account the
  • 00:00:26 expiration date and so on good thing is
  • 00:00:28 stripe does all that for us so the first
  • 00:00:31 step is to sign in or sign up if you
  • 00:00:34 don't already have an account with them
  • 00:00:37 and once you did this I'll well come
  • 00:00:39 back so I signed in to stripe and as you
  • 00:00:43 can see I already got some charges here
  • 00:00:45 though these are all test charges sins
  • 00:00:47 and that's important my account is in
  • 00:00:50 test mode you can see it here at the
  • 00:00:52 upper left and you should make sure that
  • 00:00:54 your account is in test mode too so that
  • 00:00:57 you can test without any well issues now
  • 00:01:00 of course you may play around and
  • 00:01:02 definitely check out the stripe page and
  • 00:01:05 documentation as this is no serious
  • 00:01:07 about stripe I will show you the basics
  • 00:01:10 you need to make charges when credit
  • 00:01:12 cards but to learn more and learn how to
  • 00:01:15 use it definitely have a look at the
  • 00:01:17 official documentation there and as you
  • 00:01:20 can see we get the documentation link
  • 00:01:21 there and I'll just open this in a new
  • 00:01:23 tab because it's really has a great
  • 00:01:26 documentation starting with this getting
  • 00:01:29 started example which really guides you
  • 00:01:31 through the basic steps you need to
  • 00:01:33 implement to well-validated data and
  • 00:01:36 make a charge and actually this will be
  • 00:01:38 pretty much what we're going to do next
  • 00:01:41 so what I will do is I want you create
  • 00:01:46 this credit card validation logic and
  • 00:01:49 for this I will use the stripe SDK which
  • 00:01:52 basically is a Java Script package I
  • 00:01:55 import into my application not on the
  • 00:01:58 back end in the front end and this SDK
  • 00:02:01 will then grab the form the values there
  • 00:02:04 send it to the stripe server validate it
  • 00:02:07 and give me back the result off this
  • 00:02:10 validation so it does all of that for me
  • 00:02:14 indeed it will actually stop the actual
  • 00:02:18 form submission which would of course
  • 00:02:19 result on a request being sent to my own
  • 00:02:22 server and wait for the validation
  • 00:02:24 result to come back sounds a bit strange
  • 00:02:27 while you're going to see all of that
  • 00:02:29 soon the very first step is to import
  • 00:02:33 the stripe SDK into your application so
  • 00:02:37 to the front end so in the documentation
  • 00:02:40 you may scroll down to stripe dot KS
  • 00:02:43 here and this will lead you through all
  • 00:02:46 the steps required here first one is to
  • 00:02:49 grab this import which will use a CDN so
  • 00:02:51 you don't need to download anything here
  • 00:02:53 and then back in your application head
  • 00:02:57 over to the checkout hvs file and at the
  • 00:03:02 very bottom you may add this import
  • 00:03:06 that's the first step the next step is
  • 00:03:09 to go into your public folder the java
  • 00:03:12 scripts folder and then here i will
  • 00:03:15 create a new file which i'll call
  • 00:03:16 checkout touches so this is a javascript
  • 00:03:19 file which will run on the front end not
  • 00:03:21 on the back and it's not running on my
  • 00:03:24 noches server i also want to import this
  • 00:03:27 checkout JS file and i will do so after
  • 00:03:30 importing the stripe sdk so I will just
  • 00:03:34 duplicate this import and here I want to
  • 00:03:37 point use source Java scripts check out
  • 00:03:42 HPS now here is an important adjustment
  • 00:03:46 we have to make though in this file I
  • 00:03:49 will use jQuery to basically fetch the
  • 00:03:52 data from my form and the problem I do
  • 00:03:56 have is in my layout file which wraps
  • 00:03:58 all my views if you remember this I do
  • 00:04:01 import jQuery at the bottom after my
  • 00:04:05 body hook here so it will be imported
  • 00:04:08 after whatever view gets entered here
  • 00:04:11 the issue I have is I want to use jQuery
  • 00:04:15 in this script here though but this will
  • 00:04:19 get imported in this place in this body
  • 00:04:22 place so I would then try to use jQuery
  • 00:04:25 even though I only import jQuery after
  • 00:04:27 using
  • 00:04:28 I hope that's clear now fixed us what I
  • 00:04:31 will do is I will crap this whole import
  • 00:04:34 this cheque re-import and just place it
  • 00:04:36 right before inserting the body here and
  • 00:04:40 this is just a solution to make sure
  • 00:04:43 that I have jQuery actually available
  • 00:04:45 another solution of course would be to
  • 00:04:48 leave jQuery at the bottom and import
  • 00:04:51 this part here in the layout of Shaker
  • 00:04:56 II but then you would have to make sure
  • 00:04:57 that you're not trying to fetch data
  • 00:04:59 which isn't there yet so either way some
  • 00:05:01 adjustment is needed I'm going to go
  • 00:05:03 with this way by importing jQuery before
  • 00:05:06 the view so with that I'm ready to
  • 00:05:09 actually populate my check out dot J's
  • 00:05:11 file and fetch the data from my credit
  • 00:05:14 card form to then validated through
  • 00:05:16 stripe now for that it's actually pretty
  • 00:05:19 simple
  • 00:05:20 back to the stripe documentation
  • 00:05:22 stroller still at the stripe touch as
  • 00:05:24 file we can't just go through this
  • 00:05:26 article from top to bottom as it says
  • 00:05:29 here the next part is to set the
  • 00:05:32 publishable key that is required because
  • 00:05:35 when stripe validates the credit card
  • 00:05:38 data it will give us back a token if the
  • 00:05:42 data is valid and this token will
  • 00:05:44 basically hold the credit card data and
  • 00:05:47 it will be encrypted with our
  • 00:05:49 publishable key with that key we will
  • 00:05:53 later on be able with Nava key with our
  • 00:05:55 private key we will later on be able on
  • 00:05:57 the server to decrypt this credit card
  • 00:06:00 information and make the actual charge
  • 00:06:02 that's the Stu step process validation
  • 00:06:05 and then charging now we do need this
  • 00:06:07 key here to encrypt the data to make
  • 00:06:11 sure that we don't make or that no other
  • 00:06:14 person is able to well do something with
  • 00:06:16 some cross-site scripting attack or
  • 00:06:19 anything like that to send us a wrong
  • 00:06:22 charge which we would then make on our
  • 00:06:24 back-end therefore we do have the two
  • 00:06:26 key is to make sure that we're only
  • 00:06:28 making charges which are really issued
  • 00:06:31 from our own page using this key so
  • 00:06:35 therefore I will set this key now if
  • 00:06:36 you're locked in this key here is no
  • 00:06:39 example here that's your actual testing
  • 00:06:42 and you can have a look at your keys in
  • 00:06:44 your dashboard if you click on account
  • 00:06:46 settings and then API keys now here I
  • 00:06:50 plort it out in my little video I will
  • 00:06:52 leave it like this here I'll clearly
  • 00:06:55 visible to everyone because I can
  • 00:06:57 recreate my keys which I will do after
  • 00:06:59 this video so here you have the secret
  • 00:07:02 key the one you will need later on for
  • 00:07:04 decrypting your your chart or your
  • 00:07:08 credit card information this is the
  • 00:07:09 publishable key you saw in the
  • 00:07:11 documentation and now that you live keys
  • 00:07:13 are pretty much the same but for the
  • 00:07:15 life environment remember we're in the
  • 00:07:17 testing environment so enough the
  • 00:07:19 talking I'm going to grab this key here
  • 00:07:21 go back to my check out edge check out a
  • 00:07:24 chase file and paste it in there at the
  • 00:07:26 top and I can't do this because I'm
  • 00:07:29 importing this check out chase file
  • 00:07:31 after the stripe SDK which introduces
  • 00:07:35 this stripe object which I'm using here
  • 00:07:37 so even though my IDE doesn't know it I
  • 00:07:40 know that this will be available the
  • 00:07:43 next step is to actually trap the
  • 00:07:45 foreign values and if I go on in the
  • 00:07:49 stripe documentation you'll see we get
  • 00:07:51 some code here cube so we can't just use
  • 00:07:54 this code though I need a little bit
  • 00:07:58 more than just this code I need to grab
  • 00:08:01 my actual form so that it can also stop
  • 00:08:03 submission and so I've also store this
  • 00:08:06 in a variable which I named dollar sign
  • 00:08:07 form then we'll use jQuery to select
  • 00:08:11 this check out form and that's just an
  • 00:08:14 ID I assign here in my check out dot HBS
  • 00:08:17 view this ID here that is the ID by
  • 00:08:21 which I'm selecting the form here next
  • 00:08:24 I'm using this form variable Q add a
  • 00:08:27 submit listener here that's just jQuery
  • 00:08:29 code here with the submit method I'm
  • 00:08:31 making sure that this method gets
  • 00:08:33 executed whenever I submit the form and
  • 00:08:36 or that this callback function here gets
  • 00:08:38 executed whenever I submit the form so
  • 00:08:41 there's only the function getting
  • 00:08:43 executed and in here what I want to do
  • 00:08:45 is I want to first use my form again and
  • 00:08:51 find this button in the form there is
  • 00:08:54 only one button
  • 00:08:55 just a submit button here I want to set
  • 00:08:59 the disabled property to true so I want
  • 00:09:02 to disable the button I'm doing this so
  • 00:09:05 that the user can't submit the form
  • 00:09:07 multiple times while validation is going
  • 00:09:09 on next I will go back to the stripe
  • 00:09:14 documentation grab this code here and
  • 00:09:17 paste it in here
  • 00:09:19 now I need to make some adjustments
  • 00:09:21 though for one I'm not fetching the
  • 00:09:24 address but what I will fetch is name
  • 00:09:26 and the only really required fields are
  • 00:09:29 the first four so you don't need to pass
  • 00:09:32 the name you didn't need to pass the
  • 00:09:34 address you could just leave it out but
  • 00:09:36 for completeness sake and also for later
  • 00:09:40 lectures or videos in this series I will
  • 00:09:43 also fetch the name here for now now of
  • 00:09:46 course it might be worth adding the
  • 00:09:48 address later on too but I'll go with
  • 00:09:50 that for now now card number card CVC
  • 00:09:53 card expiry month and year these are all
  • 00:09:56 the IDS I am using in my HPS in my view
  • 00:10:00 file here so these are the IDS setup
  • 00:10:04 here a card name card number and so on
  • 00:10:06 I also do have my card holder name which
  • 00:10:10 is card name so that's the one thing I
  • 00:10:13 need to change here instead of address
  • 00:10:15 if I do have card name and that's
  • 00:10:18 something I need to change in all the
  • 00:10:19 other fields – I'm not using classes I'm
  • 00:10:21 using IDs so replace the dot with the
  • 00:10:24 hashtag sign with that I'm fetching all
  • 00:10:28 the values from my HTML form and I'm
  • 00:10:31 calling this stripe card create token
  • 00:10:36 function again function ships
  • 00:10:38 shipping with the stripe SDK now this
  • 00:10:41 function has the data as a first
  • 00:10:44 argument and the second argument is the
  • 00:10:46 response handler which will get executed
  • 00:10:49 once that is done validating my data I
  • 00:10:52 will also add a return false statement
  • 00:10:57 here to make sure that the form
  • 00:10:59 submission which is triggered when I
  • 00:11:01 click the button and then triggers this
  • 00:11:04 jQuery function here that this form
  • 00:11:07 submission has actually stopped and does
  • 00:11:09 continuous so that it doesn't actually
  • 00:11:11 send a request to my server yet because
  • 00:11:14 I don't want to do that
  • 00:11:15 I haven't validated it yet therefore I
  • 00:11:18 certainly don't want to submit it to the
  • 00:11:19 server yet so the next step of course is
  • 00:11:23 to create this function this stripe
  • 00:11:26 response handler the callback function
  • 00:11:30 we're looking through for here as a
  • 00:11:33 second argument now this callback
  • 00:11:36 function will get a status and the
  • 00:11:39 response and how do I know that well
  • 00:11:42 have a look at the official
  • 00:11:43 documentation here you will see this
  • 00:11:45 response handler and again we can
  • 00:11:48 basically copy this though we don't need
  • 00:11:51 this form code here we already got it
  • 00:11:55 through jQuery but it will copy all the
  • 00:11:57 rest paste it in here and what are we
  • 00:12:03 doing here while we're checking if we
  • 00:12:06 actually got an error in our response
  • 00:12:08 which would mean that probably our form
  • 00:12:12 is invalid or our credit card data is
  • 00:12:14 invalid then we try to show some error
  • 00:12:18 messages that won't work as of now we
  • 00:12:20 have to do something here and we
  • 00:12:23 re-enable the submission so we enabled e
  • 00:12:26 submit button again remember I'm setting
  • 00:12:28 it to disable true here at the top when
  • 00:12:30 we clicked it now if we fail I certainly
  • 00:12:33 want to enable it again so that the user
  • 00:12:36 may fix his errors if we don't have a
  • 00:12:39 response error while in this case we're
  • 00:12:42 creating or bird getting the token which
  • 00:12:44 stripe created for us and this token can
  • 00:12:47 chests be fetched on the response object
  • 00:12:49 which gets passed into this callback and
  • 00:12:52 here on the ID property that's just a
  • 00:12:54 property available due to the stripe SDK
  • 00:12:57 being added to our project and then I
  • 00:13:01 add something to the form I use jQuery
  • 00:13:04 to add it I add a hidden input field
  • 00:13:07 which has the name stripe token and
  • 00:13:10 wedge which gets this token which
  • 00:13:13 tickets got generated through stripe as
  • 00:13:15 a value so like with the CSRF protection
  • 00:13:19 which also used a hidden input field he
  • 00:13:23 were also while adding this token which
  • 00:13:26 was created which holds the encrypted
  • 00:13:28 credit card information to the form so
  • 00:13:32 that when it actually gets sent to the
  • 00:13:34 server and that's what is happening in
  • 00:13:37 the next and last step here where we
  • 00:13:39 actually submit the form to the server
  • 00:13:41 then so once we do this we pass this
  • 00:13:44 encoded credit card information orders
  • 00:13:47 encoded and validated credit card
  • 00:13:49 information to the server – and here's
  • 00:13:52 the point I was talking about earlier we
  • 00:13:54 encrypted this with our well key so that
  • 00:13:57 we can then decrypt it with our private
  • 00:14:00 key and if these two keys match or if
  • 00:14:03 the they are matched through the stripe
  • 00:14:06 algorithm then the charge is made but
  • 00:14:09 I'll come back to charging later on for
  • 00:14:12 now let's go back to the error case
  • 00:14:14 where I wanted to show an error I get
  • 00:14:17 this payment errors filled here but that
  • 00:14:20 won't work now in my check out HBS file
  • 00:14:25 I don't have any place to show some
  • 00:14:27 errors so let's work on that I will add
  • 00:14:30 a new div right below the total heading
  • 00:14:34 here and this should get an ID of charge
  • 00:14:38 error let's say and I will give this
  • 00:14:42 some bootstrap classes like alert and
  • 00:14:45 then alert danger just to make this red
  • 00:14:47 and clearly visible and then here I want
  • 00:14:52 to output any or error
  • 00:14:53 I might have now for now of course I
  • 00:14:57 don't have an error but in the checkout
  • 00:15:00 dot J's file I might add one indeed I'm
  • 00:15:03 trying to do this here where I find this
  • 00:15:05 but of course here I have to find charge
  • 00:15:09 error this is the ID I just created
  • 00:15:12 right charge error that's the idea
  • 00:15:15 assigned here so I'm selecting this and
  • 00:15:21 I want to set a text which should be my
  • 00:15:23 error message I'm just accessing this on
  • 00:15:25 my stripe objects here and also I kind
  • 00:15:31 of want to make sure that I only show
  • 00:15:33 this message if we well do have an error
  • 00:15:36 so I will go back to the view and add
  • 00:15:40 another class here which I will call
  • 00:15:44 hidden that's a bootstrap class which
  • 00:15:47 will basically hide this element which
  • 00:15:49 you can see if I reload my checkout page
  • 00:15:52 right now you don't see any special
  • 00:15:55 Divya right so because it was hidden and
  • 00:15:58 if I just to show this if I remove the
  • 00:16:01 hidden class well you would see this
  • 00:16:03 empty red alert
  • 00:16:05 so let's reintroduce the hidden class
  • 00:16:07 here but only check out chairs file what
  • 00:16:09 I want to make what I want to do is I
  • 00:16:11 want you well find this charge error
  • 00:16:14 here and then well I'm already setting
  • 00:16:18 the text but I also want to remove a
  • 00:16:22 class here I want to remove the hidden
  • 00:16:24 class because I want to show it right
  • 00:16:26 and with that I'll be able to actually
  • 00:16:30 show validation errors now with all of
  • 00:16:33 that being in place that should really
  • 00:16:36 work so if I reload this page again and
  • 00:16:39 I hit by now well I get the default
  • 00:16:42 validation going on because I additi
  • 00:16:44 required attributes so what I will do
  • 00:16:47 here is I will add Chris a test address
  • 00:16:50 this should also be Chris and regarding
  • 00:16:53 the credit card number I'll first work
  • 00:16:55 with a wrong one and then let me add
  • 00:16:59 some dummy data here like this
  • 00:17:03 if I click buy now now I'm getting an
  • 00:17:07 error and the reason is that in my check
  • 00:17:10 out HBS file
  • 00:17:11 well I'm linking to source JavaScript's
  • 00:17:13 well that doesn't exist in the public
  • 00:17:15 folder I can directly access Java
  • 00:17:17 scripts and that of course also it helps
  • 00:17:19 to name this to a is not HBS there is
  • 00:17:25 also one other change I want to make as
  • 00:17:27 I just realized this when I had a look
  • 00:17:29 over this check out HBS file in my check
  • 00:17:32 out chess I'm trying to find the charge
  • 00:17:35 error on well inside my form but
  • 00:17:38 actually this is placed outside of the
  • 00:17:40 form right so what I will do here is I
  • 00:17:43 will remove form find and well just
  • 00:17:47 selected through jQuery directly like
  • 00:17:50 now with all that in place if I now go
  • 00:17:53 back to the page here and we'll reload
  • 00:17:56 this and I re-enter my test stay down
  • 00:18:00 and keep in mind that I'm on purpose
  • 00:18:03 entering valid invalid credit card data
  • 00:18:06 right here if I now hit by now you see I
  • 00:18:10 get the error here if I do fetch valid
  • 00:18:13 data like for example the one year D
  • 00:18:17 stripe documentation on the getting
  • 00:18:20 started article here we get a valid
  • 00:18:23 credit card number which we may use for
  • 00:18:25 testing purposes and for testing you may
  • 00:18:28 use any credit card number with any
  • 00:18:30 validation excuse me expiration year
  • 00:18:34 which lies in the future at any free
  • 00:18:36 card code if I now heat hit this you see
  • 00:18:39 we get does not found error which is
  • 00:18:40 great because now I'm trying to send
  • 00:18:43 request to the server and there I'm
  • 00:18:44 trying to access the check out route
  • 00:18:46 with a post request which doesn't exist
  • 00:18:48 yet so even though this is an error it
  • 00:18:51 technically means it works so we're
  • 00:18:54 almost there ready to make a charge one
  • 00:18:57 little bit of fine tuning I'm gonna add
  • 00:18:59 here is I want you also at the hidden
  • 00:19:02 class here when we first try to submit
  • 00:19:06 this form so if we did have any errors
  • 00:19:09 before I want to clear them now and
  • 00:19:12 therefore add the hidden class again so
  • 00:19:16 that once we had to submit the second
  • 00:19:18 time it disappears and if we got errors
  • 00:19:21 we see new errors instead of the old
  • 00:19:23 ones great so with that we're ready to
  • 00:19:27 make charge we validated the credit card
  • 00:19:30 data through stripe through stripe
  • 00:19:31 servers and with that well time to make
  • 00:19:35 the next step and actually use our
  • 00:19:37 server-side code to charge our customer