Coding

Laravel 5.2 PHP – Build a Shopping Cart – #11 Stripe Credit Card Verification

  • 00:00:00 welcome in this video and the last video
  • 00:00:03 I left with the checkered form being
  • 00:00:05 created and while telling you you might
  • 00:00:08 try implementing stripe on your own now
  • 00:00:11 no matter if you were successful or not
  • 00:00:13 let's do it together now I'm back on the
  • 00:00:16 stripe page here in the documentation
  • 00:00:17 but I also signed in to stripe on the
  • 00:00:21 new another tab so make an account
  • 00:00:22 create an account and sign in make sure
  • 00:00:25 to leave your environment appear being
  • 00:00:28 set to test which basically allows you
  • 00:00:30 to route well send test charges which
  • 00:00:33 won't cost you anything
  • 00:00:34 of course you don't learn anything too
  • 00:00:37 and which also allows you to use any
  • 00:00:39 credit card numbers as long as they have
  • 00:00:42 the right amount of digits but you don't
  • 00:00:44 have to use real credit card data and
  • 00:00:47 that of course is great for testing so
  • 00:00:49 as you see I already did some test
  • 00:00:51 charges here but overall this is a
  • 00:00:53 pretty new account and one important
  • 00:00:55 thing is on this dashboard here here on
  • 00:01:00 this stripe back-end what you want to
  • 00:01:04 have a look at is if you go to your
  • 00:01:07 account and then to account settings you
  • 00:01:11 will have this API is key link here and
  • 00:01:15 here you will see the test Keys which
  • 00:01:19 you will need you also see the live keys
  • 00:01:21 which are blurred out on my machine here
  • 00:01:23 but the test keys are the ones you will
  • 00:01:25 need to place in your JavaScript code
  • 00:01:28 later on the publishable key which you
  • 00:01:32 will need in your JavaScript code in
  • 00:01:33 order to well connect to stripe there
  • 00:01:36 but since everyone will be able to see
  • 00:01:38 this key while this of course is not
  • 00:01:41 secret this is ok of our people see that
  • 00:01:44 key this test secret key which alt is
  • 00:01:47 blurred out here however has to be
  • 00:01:49 secret and will later on be stored in
  • 00:01:52 your PHP code which runs on the server
  • 00:01:54 and therefore is not visible to everyone
  • 00:01:56 this will be the key which finally is
  • 00:01:59 required to make a charge and to make
  • 00:02:01 sure that well not anyone having access
  • 00:02:04 to this key is able to charge well any
  • 00:02:07 credit card he found or anything like
  • 00:02:10 that so you will work with those two
  • 00:02:12 keys and we'll come back to that when we
  • 00:02:14 use them just so that you know where to
  • 00:02:16 find them it's in the your account
  • 00:02:18 settings here so this is the account but
  • 00:02:22 back to the documentation for now as I
  • 00:02:26 already explained in the last video we
  • 00:02:28 have this cue step process where we
  • 00:02:30 first verify the credit card data and so
  • 00:02:33 on with JavaScript and we will send the
  • 00:02:37 request to the stripe servers at the
  • 00:02:39 stripe servers will hopefully tell us
  • 00:02:41 that the data is valid and it will give
  • 00:02:43 us back a token which we then send to
  • 00:02:46 our own level PHP code and with that
  • 00:02:50 token we can then issue a charge or make
  • 00:02:53 a charge but we do that from our PHP
  • 00:02:56 code not for JavaScript because with the
  • 00:02:59 PHP code we will send this secret key
  • 00:03:02 and basically then tell stripe to not
  • 00:03:06 only verify the data but use that
  • 00:03:08 verified data to make a charge so I hope
  • 00:03:11 that is clear how all that works
  • 00:03:13 together now in order to do all that I
  • 00:03:16 navigated to the API libraries arm web
  • 00:03:20 page here on the stripe documentation
  • 00:03:22 and you will find how to implement it on
  • 00:03:25 well all the different server-side
  • 00:03:27 languages including PHP well as you see
  • 00:03:30 it's all about adding this single line
  • 00:03:32 to composer so let's do this I will copy
  • 00:03:35 it head over to my project and then in
  • 00:03:38 the composer dot JSON file here in the
  • 00:03:42 require field here where I basically set
  • 00:03:45 up which packages I require or which I
  • 00:03:48 need in this application I will add the
  • 00:03:51 line I just copied so I need to each
  • 00:03:54 stripe SDK basically now with that I not
  • 00:03:57 only need to well added here I also need
  • 00:04:02 to install it so I will open up my
  • 00:04:04 terminal navigate into this folder which
  • 00:04:06 this automatically did and then I will
  • 00:04:09 run composer update or a composer
  • 00:04:14 install which will basically just update
  • 00:04:17 this version here notice we'll take a
  • 00:04:20 couple of seconds so I'll be back once
  • 00:04:21 this is finished so it's almost finished
  • 00:04:24 here or now it is finished don't worry
  • 00:04:26 if like your it updated a couple of
  • 00:04:28 packages that simple just because I use
  • 00:04:30 the update command but it should still
  • 00:04:32 work it also installed the stripe
  • 00:04:35 package though which of course is what I
  • 00:04:38 needed so with that I have access to be
  • 00:04:40 stripe SDK on the PHP code but I also as
  • 00:04:44 I just said before need to implement
  • 00:04:46 each stripe JavaScript package in order
  • 00:04:49 to have this first step of validating
  • 00:04:52 the user input so let's go back to the
  • 00:04:55 stripe documentation and click on stripe
  • 00:04:57 is where just is front and related
  • 00:04:59 package you will need now here you will
  • 00:05:04 see that we have to include it like this
  • 00:05:06 so I will copy this import here which
  • 00:05:09 leads to a CDN you don't have to
  • 00:05:10 download anything then head over to your
  • 00:05:13 code and then you check out the plated
  • 00:05:15 PHP file at the very bottom after
  • 00:05:18 closing the content section and it will
  • 00:05:20 close my terminal hero since I don't
  • 00:05:22 need it anymore after this section here
  • 00:05:25 I want to enter a new section scripts
  • 00:05:28 and I'll close it here too now if we
  • 00:05:35 have a look at our layout our master
  • 00:05:37 layout you see we have this script hook
  • 00:05:39 here which allows me to add some script
  • 00:05:42 imports to individual pages like you
  • 00:05:45 check out page here so inside of this
  • 00:05:48 scripts section here I will I'll throw
  • 00:05:51 in this import I just grabbed from the
  • 00:05:53 stripe documentation and with that I
  • 00:05:56 have access to the stripe SDK now of
  • 00:05:59 course that isn't enough I need to write
  • 00:06:01 my own JavaScript code to now basically
  • 00:06:04 fetch all the information from this form
  • 00:06:07 and then send it to the stripe server to
  • 00:06:11 validate it now in order to do this I
  • 00:06:13 will go into my public source folder or
  • 00:06:16 create a new folder here which you'll
  • 00:06:18 name js4 javascript and add a new
  • 00:06:21 javascript file and i will name it check
  • 00:06:23 out dot j s and the name of course is up
  • 00:06:27 to you back and you check out later PHP
  • 00:06:30 file after importing these stripe SDK
  • 00:06:34 deist
  • 00:06:35 JavaScript SDK here I will just add a
  • 00:06:38 new import here I will use my templating
  • 00:06:42 syntax then URL helper and the to method
  • 00:06:46 to get a clear and correct link or URL
  • 00:06:51 to my chela script files no matter on
  • 00:06:54 which page of my application I am so
  • 00:06:57 here I want to enter a source /j s dot
  • 00:07:01 check out chess because keep in mind
  • 00:07:03 this path here has always to be seen
  • 00:07:06 from the public folder
  • 00:07:08 not from this resources folder because
  • 00:07:10 in the end on a server your view will be
  • 00:07:13 rendered in the public folder kind of so
  • 00:07:16 therefore it is the deep office source
  • 00:07:18 chess check out chess now of course I'm
  • 00:07:21 not doing anything and it fall yet but
  • 00:07:23 it will show shortly so what do I want
  • 00:07:25 to do here well let's go back to the
  • 00:07:28 stripe documentation it tells me that I
  • 00:07:33 first should set my publishable key this
  • 00:07:36 one here now I need to set the scale by
  • 00:07:39 the way the documentation is really
  • 00:07:41 clever this key here should already be
  • 00:07:44 the correct key here so as it says here
  • 00:07:48 we prefilled this example with your test
  • 00:07:50 API key so therefore this is already the
  • 00:07:53 line you may copy if you are locked in
  • 00:07:56 so I will copy the line and throw it
  • 00:07:59 into my check out file now why do I need
  • 00:08:01 this key well in order to kind of
  • 00:08:04 identify with the stripe servers Santa
  • 00:08:08 credit card data and then they will give
  • 00:08:10 me a token which takes this key into
  • 00:08:13 accounts kind of an encrypted version of
  • 00:08:16 that if you want to put it like this and
  • 00:08:17 later I can use this token on my PHP
  • 00:08:20 code or in my PHP code to make a charge
  • 00:08:23 there I will connect it with my secret
  • 00:08:26 key and with this combination of token
  • 00:08:28 based on this public key and my secret
  • 00:08:32 key well stripe can be sure that nothing
  • 00:08:35 fishy is going on that and that instead
  • 00:08:37 the page and the user who validated the
  • 00:08:41 credit card info is also the one making
  • 00:08:43 the purchase and that were not well kind
  • 00:08:46 of using some cross
  • 00:08:47 it's scripting attacks or anything like
  • 00:08:49 that so therefore we need this
  • 00:08:51 publishable key to make this transaction
  • 00:08:53 secure next as the documentation tells
  • 00:08:56 me I need to collect the card details
  • 00:08:58 here now as you can see they use jQuery
  • 00:09:01 here and I will just copy this code and
  • 00:09:04 also throw it into my file here now that
  • 00:09:07 would work like this though because
  • 00:09:09 right now this would get executed
  • 00:09:12 immediately as soon as this files loaded
  • 00:09:14 which of course happens as soon as this
  • 00:09:16 page here is loaded and that is not
  • 00:09:19 really the behavior I want because if I
  • 00:09:21 would do it like that well then it would
  • 00:09:25 be submitted before a user hit submit
  • 00:09:27 before the user actually click this
  • 00:09:29 button therefore I will go back to the
  • 00:09:32 checkout page and I want to add an event
  • 00:09:35 listener listening to listening to this
  • 00:09:38 form submission and then as I said in
  • 00:09:41 the last video stop the form submission
  • 00:09:43 instead execute this code make sure that
  • 00:09:47 this code is well run that the credit
  • 00:09:49 card number is validated and once we got
  • 00:09:52 an answer from stripe then I want to
  • 00:09:55 continue with the form submission so
  • 00:09:58 that's how the process should look like
  • 00:09:59 and that's how I will set it up here but
  • 00:10:02 first let's make sure that all these IDs
  • 00:10:05 here or all these values we use here are
  • 00:10:08 actually correct and I can already tell
  • 00:10:10 you they are not because in the Striped
  • 00:10:13 as example here we're using class names
  • 00:10:15 however in my view I'm using IDs not
  • 00:10:19 class names so I need to adjust that and
  • 00:10:22 I will adjust it right now so the number
  • 00:10:25 actually has an ID of card number but I
  • 00:10:29 need a hash tag since it is an ID the
  • 00:10:31 CVC code is also hash tag card CBC
  • 00:10:35 expiration month is hash check card
  • 00:10:37 expiry month and again just check out
  • 00:10:40 the ID names being set up here in this
  • 00:10:43 form right just using these the
  • 00:10:46 expiration here is hash tag card expiry
  • 00:10:49 year so well using IDs all over the
  • 00:10:52 place and the address here is not
  • 00:10:55 something we need I won't submit this
  • 00:10:58 here but I will submit the name let's
  • 00:11:01 say
  • 00:11:01 so dollar sign hashtag whoops should be
  • 00:11:05 a string though
  • 00:11:07 hashtag card name of course all the used
  • 00:11:11 eval function here which is a jQuery
  • 00:11:14 function right to get the value of this
  • 00:11:16 input field so that's the information I
  • 00:11:19 will submit and then this will be the
  • 00:11:21 callback being executed once we get back
  • 00:11:24 well an answer from stripe now we don't
  • 00:11:28 have to call back yet and we don't have
  • 00:11:29 this form submission interruption I was
  • 00:11:32 talking of earlier so let's implement
  • 00:11:34 both I will create a new very little
  • 00:11:37 which I will call Doris I'm form but
  • 00:11:39 name of course up to you and I will
  • 00:11:41 serve or well I will select it by ID the
  • 00:11:45 checkout form keep in mind that ste ID I
  • 00:11:48 assign to the overall form here the form
  • 00:11:52 tag so that I'm fetching this overall
  • 00:11:57 form and then I want to use my form here
  • 00:12:00 use the submit method which is just a
  • 00:12:03 jQuery method right this is just a
  • 00:12:05 shortcut to create a on submit went
  • 00:12:08 listener and with the submit method I
  • 00:12:11 will pass a callback or an anonymous
  • 00:12:14 function which should get executed
  • 00:12:15 whenever the user submits the form where
  • 00:12:18 it will pass the form submission event
  • 00:12:20 and now inside here is the place where I
  • 00:12:23 want to execute this stripe code now I
  • 00:12:27 also want to show potential errors
  • 00:12:30 happening throughout this submission
  • 00:12:33 process therefore I will go back to my
  • 00:12:37 shopping cart or to my checkout view
  • 00:12:40 here and right before opening the form
  • 00:12:43 after the total I will add a div which
  • 00:12:48 will give an ID of let's say charge
  • 00:12:51 error which should get a class of alert
  • 00:12:56 alert danger these are just bootstrap
  • 00:12:59 classes I will also add a conditional
  • 00:13:01 class using template expression here to
  • 00:13:04 check if my session does not have
  • 00:13:09 an error
  • 00:13:12 well object or field inside it so if you
  • 00:13:14 don't have an error then I want to add
  • 00:13:17 the hidden class which basically well
  • 00:13:19 will hide this div otherwise I want to
  • 00:13:22 show it and I won't attach an extra
  • 00:13:24 class so all the doing here is just hide
  • 00:13:26 if if I don't have an error because then
  • 00:13:28 of course don't want to show this error
  • 00:13:30 page here now then if we do have an
  • 00:13:33 error then I want to output it here so
  • 00:13:35 session get error like this now I could
  • 00:13:41 show arrows here but I also need to set
  • 00:13:43 them right so back in the check out dot
  • 00:13:47 J's file when submitting the form I want
  • 00:13:52 you take my charge error remember I
  • 00:13:57 assigned this as an ID here charge error
  • 00:14:02 so I'm selecting it with jQuery here and
  • 00:14:05 I want to add a class hidden so I'm
  • 00:14:09 hiding all errors whenever I submit the
  • 00:14:13 form because at this point there can't
  • 00:14:15 be any errors
  • 00:14:16 so it's certainly right to attach this
  • 00:14:17 class then I want to find the button
  • 00:14:23 which submits the form and I want to set
  • 00:14:27 it to being disabled and I'm just using
  • 00:14:31 jQuery code here if you're not familiar
  • 00:14:33 with that that's nothing have a look at
  • 00:14:35 some jQuery tutorials I want to disable
  • 00:14:38 the button because I don't want the user
  • 00:14:40 to hit on it or to click it multiple
  • 00:14:42 times because I'm already sending data
  • 00:14:45 to stripe and I don't want to send it
  • 00:14:47 over and over again that could mess up
  • 00:14:49 the application
  • 00:14:50 therefore I'm disabling the button for
  • 00:14:51 the time it needs for strive to answer
  • 00:14:55 after all that I will just return false
  • 00:14:58 and this is important because this means
  • 00:15:01 once all this code is executed so we
  • 00:15:04 sent the request to stripe and we're
  • 00:15:06 waiting for the response in which case
  • 00:15:08 you would execute the stripe response
  • 00:15:10 handler which we have yet to create well
  • 00:15:13 we execute all that killed but then we
  • 00:15:14 return false which means ok we're done
  • 00:15:17 don't continue with the form submission
  • 00:15:19 because remember we're in the form
  • 00:15:21 submit event
  • 00:15:22 here that is important because otherwise
  • 00:15:25 now we would send a post request to
  • 00:15:27 level and I don't want to do that right
  • 00:15:29 now because right now I haven't
  • 00:15:31 validated to form yet remember this is
  • 00:15:34 an asynchronous task here the response
  • 00:15:37 might not be there yet so I don't want
  • 00:15:39 to continue with the charge because I
  • 00:15:41 haven't validated the credit-card
  • 00:15:42 information yet that is why I returned
  • 00:15:45 false and just tell my code the browser
  • 00:15:48 okay wait a second don't continue a form
  • 00:15:51 submission I'm well we don't need to do
  • 00:15:54 anything here well the place where we do
  • 00:15:57 need to do things is of course the
  • 00:15:59 stripe response handler so I will create
  • 00:16:02 it Russ stripe response Handler and this
  • 00:16:07 handler actually takes two arguments a
  • 00:16:10 status and response now in here I will
  • 00:16:15 check if we do have a response error so
  • 00:16:18 if something went wrong and if that is
  • 00:16:20 the case I want to show the error of
  • 00:16:22 course so then I would will basically
  • 00:16:25 select my charge error like up here T if
  • 00:16:28 I want to show any errors in I would
  • 00:16:32 remove the hidden clause because now I
  • 00:16:36 want to show it and instead I would well
  • 00:16:40 set the text to show my response error
  • 00:16:44 message this is an error message being
  • 00:16:46 sent by stripe by the way this year so
  • 00:16:50 now I would display my error and then I
  • 00:16:52 also want to enable the button of course
  • 00:16:55 because now I'm done I got my response I
  • 00:16:59 know that well we got an error but I
  • 00:17:02 want to enable the user to submit the
  • 00:17:04 form again to fix this error right so
  • 00:17:07 therefore I'm enabling the button again
  • 00:17:09 if we don't have an error though well
  • 00:17:13 then I will be in the else block here
  • 00:17:16 and I know that the while validation was
  • 00:17:22 successful and that stripe will have
  • 00:17:25 sent be a token so I will store this
  • 00:17:28 token in a token variable and I can
  • 00:17:30 access it on the ID field and a response
  • 00:17:33 how do I know that well
  • 00:17:35 if you have a look at the documentation
  • 00:17:39 you see this example response handler
  • 00:17:42 down here and this is what they are
  • 00:17:44 doing here they are getting the top gear
  • 00:17:46 from response ID now I also need to
  • 00:17:50 append this token to my form and I will
  • 00:17:53 just copy their kill here copy both
  • 00:17:56 lines actually to make sure that this
  • 00:17:59 new token is now added to D while HTML
  • 00:18:03 code to the dom as a hidden input field
  • 00:18:05 so let's check apply PHP file will
  • 00:18:09 receive another hidden input field at
  • 00:18:11 the end of the form which holds this
  • 00:18:13 stripe token which again we need to send
  • 00:18:16 to the server to level two there
  • 00:18:19 send it to stripe again when we actually
  • 00:18:22 make the charge we didn't charge yet we
  • 00:18:25 just validated the data so therefore now
  • 00:18:28 I'm sending this token or I'm pending it
  • 00:18:31 so that I can send it and with this last
  • 00:18:34 line here I'm actually submitting the
  • 00:18:37 form
  • 00:18:38 so with get zero I basically just get
  • 00:18:42 the form and with submit I will submit
  • 00:18:46 it because now I do want to send the
  • 00:18:49 post request now I don't want to capture
  • 00:18:52 it with JavaScript now I basically let
  • 00:18:54 the request continue before I stopped it
  • 00:18:57 and I threw in JavaScript and strive to
  • 00:19:00 validate the data now that the data is
  • 00:19:02 validated I want to continue and submit
  • 00:19:05 the form to the server which I do with
  • 00:19:07 this line with that all these stripe
  • 00:19:11 front-end related things are set up and
  • 00:19:16 we should be able to work with this
  • 00:19:19 however to saw this should be slash a
  • 00:19:22 hashtag charge arrow here as should it
  • 00:19:25 be down here little mistake on my side
  • 00:19:28 because I'm selecting by ID here so with
  • 00:19:31 that I'm ready to submit data to strive
  • 00:19:34 to validate it but of course I don't
  • 00:19:37 have any code in place to actually well
  • 00:19:40 send it on the PHP side and make charge
  • 00:19:43 so this will be what we're working on
  • 00:19:45 next