1 00:00:00,540 --> 00:00:04,800 Now that we've got our action creator to post our token to the back end server we need to make sure 2 00:00:04,800 --> 00:00:09,680 that it gets called whenever we get a token from the Strype checkout form. 3 00:00:09,690 --> 00:00:15,570 So back inside of our component's directory I'll find the payments G-S file and we're going to import 4 00:00:15,600 --> 00:00:20,730 both the connector helper and all of our action creators into this file and then hook them up to the 5 00:00:20,730 --> 00:00:22,620 payments component. 6 00:00:22,620 --> 00:00:31,710 So inside of here we'll import connect from re-act redux and we will port import star as actions from 7 00:00:31,900 --> 00:00:36,410 up one directory actions. 8 00:00:36,650 --> 00:00:41,380 OK so now we'll flip down to the bottom of the file where we will wire up the connect helper. 9 00:00:41,820 --> 00:00:45,300 So connect the second set of parentheses. 10 00:00:45,300 --> 00:00:48,010 We have no map state to prop's function here. 11 00:00:48,030 --> 00:00:49,980 All we really care about is the action creators. 12 00:00:50,030 --> 00:00:53,700 We'll pass those in as the second argument. 13 00:00:53,730 --> 00:01:01,530 Now the very last step we need to make sure that after we get a token baktun stripe API we call our 14 00:01:01,530 --> 00:01:06,080 action creator rather than just conc the logging out the token. 15 00:01:06,210 --> 00:01:12,750 So we called our action creator handled tokin which means that the payments component has the actual 16 00:01:12,750 --> 00:01:16,900 creator available on this props handle token. 17 00:01:17,250 --> 00:01:25,450 So we would call this dot Propst dot handle token with the token. 18 00:01:25,470 --> 00:01:26,010 All right. 19 00:01:26,010 --> 00:01:31,830 I think we're ready to test this out now as a reminder we do not have a route handler on our server 20 00:01:31,860 --> 00:01:33,030 put together yet. 21 00:01:33,060 --> 00:01:38,140 So when we test this we're probably going to see some sort of 404 error but that's ok. 22 00:01:38,160 --> 00:01:41,480 I just want to make sure that the request is actually being created. 23 00:01:42,210 --> 00:01:45,580 So I'm going to go back over to my browser find the application. 24 00:01:45,600 --> 00:01:53,970 It looks like the reload already kicked in on the chrome console if I select the network tab up here 25 00:01:54,410 --> 00:02:01,620 and then I filter only by SH are requests I should be able to see the post request made after we go 26 00:02:01,620 --> 00:02:03,810 through the add credits process. 27 00:02:03,810 --> 00:02:06,480 So good to add credits. 28 00:02:06,480 --> 00:02:08,640 We get prompted for our information. 29 00:02:09,120 --> 00:02:10,500 So put in my e-mail. 30 00:02:10,500 --> 00:02:12,470 Remember none of these inputs really matter. 31 00:02:12,480 --> 00:02:14,430 They are not actually being used by stripe. 32 00:02:14,430 --> 00:02:18,270 All that matters is that we put in the correct fake credit card number. 33 00:02:18,360 --> 00:02:20,940 So we'll say for 2 4 2 4 2 4 2. 34 00:02:21,780 --> 00:02:27,660 And then any date in the future and then any CBC will pay $5. 35 00:02:28,450 --> 00:02:30,240 OK so we just got the token back. 36 00:02:30,240 --> 00:02:35,910 And then as you can see we very shortly after that get an air from the route handler or the request 37 00:02:35,910 --> 00:02:42,300 that we just made here is the request to API slash stripe in resulted in a 404 not found. 38 00:02:42,330 --> 00:02:42,640 OK. 39 00:02:42,660 --> 00:02:44,150 So I think that's looking pretty good. 40 00:02:44,160 --> 00:02:51,060 I think that the front end of our application is now wired up as far as it can go in as far as actually 41 00:02:51,060 --> 00:02:53,520 handling all this payment stuff. 42 00:02:53,640 --> 00:02:54,730 We're now going to take a break. 43 00:02:54,750 --> 00:03:00,060 When we come back we're going to change over to the server and create a route handler that's going to 44 00:03:00,150 --> 00:03:06,100 take this token that we're attempting to push and exchange it for an actual charge through the strike 45 00:03:06,120 --> 00:03:06,930 API. 46 00:03:07,260 --> 00:03:08,110 So quick break. 47 00:03:08,190 --> 00:03:10,790 Well take care of the server side in the next section.