1 00:00:00,480 --> 00:00:04,060 Awesome we have our card input and we can start accepting the payments. 2 00:00:04,530 --> 00:00:06,680 However the way it works would strike. 3 00:00:06,750 --> 00:00:12,990 It's not like user enters sensitive card number values as well as the rest of the card info and then 4 00:00:12,990 --> 00:00:14,650 would just send it over the wire. 5 00:00:14,670 --> 00:00:16,310 That would be highly insecure. 6 00:00:16,410 --> 00:00:20,770 The way it works would strike is once our card values are correct. 7 00:00:20,910 --> 00:00:25,580 Once the numbers are correct and rest of the values we get back the token. 8 00:00:25,680 --> 00:00:28,700 So once we submit the form we're gonna get back to token. 9 00:00:28,740 --> 00:00:34,980 If everything is correct as far as the card is concerned if we're gonna get errors well then we're gonna 10 00:00:34,980 --> 00:00:40,350 get errors and we're just going to display like I showed you before where if I'm trying to submit my 11 00:00:40,350 --> 00:00:42,870 form and my card values are incorrect. 12 00:00:42,870 --> 00:00:45,340 Well then we're just getting back the years Hello. 13 00:00:45,360 --> 00:00:48,410 If everything is correct we get back our token. 14 00:00:48,960 --> 00:00:55,830 So we're gonna pass our token to a back end and then using the secret key and the token from the back 15 00:00:55,830 --> 00:01:01,350 and from our strappy back and we're going to communicate with a stripe and complete the transaction 16 00:01:01,650 --> 00:01:02,580 so that way again. 17 00:01:02,670 --> 00:01:08,790 We're not sending sensitive information from our front end which would be highly insecure and we're 18 00:01:08,790 --> 00:01:12,030 gonna start working in this video on submitting the form. 19 00:01:12,300 --> 00:01:18,720 So we're gonna head up to our handle submit remember the function that we had And first we're going 20 00:01:18,720 --> 00:01:24,000 to start by showing dealer like we did previously already within a log in so I'm not going to repeat 21 00:01:24,000 --> 00:01:25,790 myself essentially we're just doing that. 22 00:01:26,070 --> 00:01:31,980 So the user doesn't keep on submitting so we're going to go with show alert and then as far as the alert 23 00:01:32,010 --> 00:01:38,130 while we can just pass in the same message we can just say a message and then let's say submitting order 24 00:01:38,280 --> 00:01:46,050 or maybe let's do a different message submitting order and then we're gonna say dot dot dot please wait. 25 00:01:46,050 --> 00:01:51,530 Something like that that is gonna be our alert and then we need to get back out talking. 26 00:01:51,570 --> 00:01:53,220 So how do we set up to talking. 27 00:01:53,400 --> 00:02:02,490 Well since we have access to the props we can get props stripe and then create token and it is returning 28 00:02:02,760 --> 00:02:03,630 I promise. 29 00:02:03,690 --> 00:02:10,170 So since we have a sync we can just use a white keyword where we await when our promise is settled. 30 00:02:10,170 --> 00:02:18,660 So I'm gonna have cost response and that is equal to a wait for UPS and then we have of course the stripe 31 00:02:19,230 --> 00:02:24,080 and then we're looking for the method by the name of create token. 32 00:02:24,100 --> 00:02:31,310 OK so it does return a promise so we can change the catch right away if there's some kind of error. 33 00:02:31,440 --> 00:02:35,750 Let's say we're gonna have the error and then we would want the console log it. 34 00:02:35,910 --> 00:02:42,290 So let's go with console log let's remove the semicolon and let just type out the error. 35 00:02:42,600 --> 00:02:48,270 And then I would want to console log the response because depending on what response we're gonna get 36 00:02:48,690 --> 00:02:50,700 well we're gonna take some actions. 37 00:02:51,060 --> 00:02:57,360 So if we're gonna get back our token awesome we're gonna call our submit order function and we haven't 38 00:02:57,360 --> 00:03:03,580 created which essentially just communicates with stripe and passes the values down to our back end. 39 00:03:03,600 --> 00:03:08,770 However if the token doesn't exist then of course we're just going to display the message. 40 00:03:08,880 --> 00:03:12,060 But I guess there's just going to be the fastest if we just console log. 41 00:03:12,060 --> 00:03:13,360 The response first. 42 00:03:13,530 --> 00:03:17,310 So let's say what would be our response and let's try to submit it. 43 00:03:17,310 --> 00:03:21,630 Like I said I'm going to fill out the name value just so I can submit something because I want to show 44 00:03:21,630 --> 00:03:22,710 you the errors first. 45 00:03:23,040 --> 00:03:27,810 So we're gonna go with some kind of name we try to submit and then of course we get back the error. 46 00:03:27,810 --> 00:03:32,140 Now I still have of course my alert that says submitting the order. 47 00:03:32,190 --> 00:03:36,630 So of course if I'm going to get the errors then we're just going to clean out everything. 48 00:03:36,690 --> 00:03:40,870 But then in this case notice if my response is of course the error. 49 00:03:41,010 --> 00:03:44,120 Well then I can just get whatever moral message I had. 50 00:03:44,130 --> 00:03:47,950 So in this case the error message is you've got your card number is complete. 51 00:03:48,390 --> 00:03:51,330 So remember we had of course our error correct. 52 00:03:51,330 --> 00:03:57,360 So now if the token doesn't exist and it definitely doesn't exist because I'm getting it back the error 53 00:03:57,360 --> 00:04:01,780 object then of course I can just show that there is some kind of error. 54 00:04:01,800 --> 00:04:07,450 So the way it's going to work is I'm going to check first of all if the token is there. 55 00:04:07,530 --> 00:04:13,290 So I'm gonna structure out the token token from my response. 56 00:04:13,290 --> 00:04:15,070 That's gonna be my first step. 57 00:04:15,160 --> 00:04:20,790 So get me the token from the response of course if there is ever a token it's not going to be there. 58 00:04:20,820 --> 00:04:23,840 So I'm going to set up my if statement if token. 59 00:04:24,090 --> 00:04:26,220 Then we're going to do a couple of actions. 60 00:04:26,220 --> 00:04:32,290 If the token does exist if it doesn't exist we're going to go with else if it doesn't exist what we 61 00:04:32,290 --> 00:04:33,210 would want to do. 62 00:04:33,210 --> 00:04:38,410 Well first of all we have a method of hiding the alert so we can just go with high alert because there's 63 00:04:38,430 --> 00:04:41,220 no point for us to show anything within the alert. 64 00:04:41,280 --> 00:04:44,230 We already displaying everything within a paragraph correct. 65 00:04:44,280 --> 00:04:45,900 So we can just hide the alert. 66 00:04:45,900 --> 00:04:47,140 That's step number one. 67 00:04:47,220 --> 00:04:54,210 And then we can just set error using our function so set error a number that was our state value and 68 00:04:54,210 --> 00:04:58,860 then we can get our message by looking in the response. 69 00:04:59,100 --> 00:05:00,230 Then error. 70 00:05:00,400 --> 00:05:02,960 And then the property name is. 71 00:05:03,070 --> 00:05:05,070 Message message. 72 00:05:05,410 --> 00:05:06,690 And then let's go one by one. 73 00:05:06,690 --> 00:05:09,910 Just so you can see that we're gonna be getting correct messages. 74 00:05:09,910 --> 00:05:14,210 So I'm just gonna type out here John and then we're going to start with car number. 75 00:05:14,330 --> 00:05:15,100 Once we clicked. 76 00:05:15,100 --> 00:05:17,360 Notice your card number is incomplete. 77 00:05:17,710 --> 00:05:23,440 So one by one let's add correct values just so we can check that all our error messages are correct. 78 00:05:23,440 --> 00:05:26,670 Next one is gonna be your card's expiration date is incomplete. 79 00:05:26,800 --> 00:05:29,230 And I'm not going to console log each and every one of them. 80 00:05:29,230 --> 00:05:30,790 Hopefully you get the gist. 81 00:05:30,790 --> 00:05:36,040 Then we're gonna go home let's say correct month and just keep in mind that it needs to be in the future. 82 00:05:36,100 --> 00:05:41,860 So of course you cannot pass on some incorrect values then it says your card security code is incomplete 83 00:05:42,310 --> 00:05:44,320 in order to have the proper code. 84 00:05:44,320 --> 00:05:48,140 We just need to type any three digits so two three two. 85 00:05:48,190 --> 00:05:51,170 And then the last one is your postal code is incomplete. 86 00:05:51,190 --> 00:05:58,620 So let me add some kind of old postal code and of course once I do that then I'm gonna get back to response. 87 00:05:58,630 --> 00:06:04,750 So now if token lets in fact console log our response just so I can see what's console. 88 00:06:04,750 --> 00:06:09,340 Our response and we're going to see that if everything is correct and by the way of course I refresh 89 00:06:09,340 --> 00:06:10,090 now. 90 00:06:10,090 --> 00:06:12,630 So let me typing again John. 91 00:06:12,790 --> 00:06:17,090 Then we're gonna go with all the correct value since we already cover these error messages. 92 00:06:17,140 --> 00:06:21,950 So January 1st 2022 then some kind of security code. 93 00:06:22,080 --> 00:06:26,590 And as far as the zip code again we're gonna go with one of the old zip codes. 94 00:06:26,590 --> 00:06:27,750 Let's try to submit. 95 00:06:27,850 --> 00:06:32,530 We're submitting the order again we're not handling the alert in this case. 96 00:06:32,560 --> 00:06:34,580 That's the reason why alert is gonna stay. 97 00:06:34,840 --> 00:06:38,170 But we got back our token which is awesome. 98 00:06:38,170 --> 00:06:39,700 This is what we were looking for. 99 00:06:39,700 --> 00:06:44,830 So once we have our token then we can start communicating with a backend. 100 00:06:44,860 --> 00:06:51,190 And again we're gonna pass to a back and our token and then from the back end we're going to complete 101 00:06:51,280 --> 00:06:52,150 our transaction.