1 00:00:00,450 --> 00:00:05,700 We just wired up the body parts or middleware to test it out and make sure that the body of our request 2 00:00:05,730 --> 00:00:07,640 is being handled appropriately. 3 00:00:07,650 --> 00:00:16,650 I want to add a console log statement to our request handler and consul log the value of Reyk body. 4 00:00:16,650 --> 00:00:21,540 Now we are specifically looking at body right here because we are just looking at the body parts or 5 00:00:21,540 --> 00:00:27,710 documentation which set us which told us in very clear English right here when the incoming requested 6 00:00:27,710 --> 00:00:29,190 body is parsed. 7 00:00:29,370 --> 00:00:35,130 The actual contents other kust body will be placed on the rec body property. 8 00:00:35,520 --> 00:00:37,640 And I just said the word body many times in a row. 9 00:00:37,840 --> 00:00:38,150 OK. 10 00:00:38,190 --> 00:00:38,870 Racked up body. 11 00:00:38,970 --> 00:00:39,850 That's all we care about. 12 00:00:40,020 --> 00:00:45,390 So right now we're just confirming we're just making sure that that piece of data the credit card token 13 00:00:45,630 --> 00:00:49,090 is being communicated to our server correctly. 14 00:00:49,170 --> 00:00:51,000 Now we need to make sure that our server is running. 15 00:00:50,990 --> 00:00:55,860 So all change back over to my terminal and we'll start the server up with NPM run Dev and we'll give 16 00:00:55,860 --> 00:00:58,250 it just a second to warm up. 17 00:00:58,260 --> 00:01:02,280 Now one thing I want to tell you just to make sure it's really clear and make sure there's no surprise 18 00:01:02,280 --> 00:01:03,430 ahead of time. 19 00:01:03,720 --> 00:01:09,330 You'll recall that inside of our request handler we're not actually processing the response and sending 20 00:01:09,330 --> 00:01:11,760 back any type of response at all. 21 00:01:11,760 --> 00:01:17,400 So when we actually test this out inside the browser and our re-act application makes the request to 22 00:01:17,400 --> 00:01:21,610 send off the Strype token that request is just going to kind of hang in space. 23 00:01:21,630 --> 00:01:26,340 As far as the browser is concerned because we are not currently forming up a response and sending it 24 00:01:26,340 --> 00:01:27,370 back. 25 00:01:27,930 --> 00:01:28,300 OK. 26 00:01:28,320 --> 00:01:30,450 So it looks like the client is set up. 27 00:01:30,480 --> 00:01:31,450 That's great. 28 00:01:31,500 --> 00:01:33,640 I'm going to flip back over to the browser. 29 00:01:33,640 --> 00:01:35,930 I'm going to make sure that my chrome console is open. 30 00:01:36,000 --> 00:01:42,090 Here's the network tab and I am sorting by or filtering by SH are requests. 31 00:01:42,090 --> 00:01:48,900 I'm going to clear out the log or click the Add credits button at the top are going to enter some credit 32 00:01:48,900 --> 00:01:56,140 card info which remembers always the fourth number and then some fake information. 33 00:01:56,170 --> 00:02:00,910 Now peda OK so that reaches out to the Strype API. 34 00:02:00,960 --> 00:02:02,790 That's this tokens request right here. 35 00:02:02,910 --> 00:02:06,280 And it gets back a credit card authorization I.D.. 36 00:02:06,420 --> 00:02:09,830 So here's the request to our back in and API. 37 00:02:09,870 --> 00:02:15,630 You'll notice that says localhost three thousand API Salustri and then do notice again the request status 38 00:02:15,630 --> 00:02:19,180 is pending because we're not properly handling it on the backend. 39 00:02:19,650 --> 00:02:24,400 So what we really want to see is to make sure that we get our console log out. 40 00:02:24,450 --> 00:02:26,840 So I'm going to flip on over to the terminal and yellowness. 41 00:02:26,880 --> 00:02:27,890 I don't have a console log. 42 00:02:27,900 --> 00:02:30,110 I just made the same mistake twice in a row. 43 00:02:30,240 --> 00:02:33,330 You'll notice I never actually saved the billing routes file. 44 00:02:33,330 --> 00:02:34,910 Make sure you save your files. 45 00:02:34,920 --> 00:02:42,700 Let me just run through this one more quick time or click add credits again put in my info 46 00:02:47,980 --> 00:02:49,120 and will pay again. 47 00:02:49,120 --> 00:02:53,150 OK so now when that goes to our back and server now it can flip on over. 48 00:02:53,440 --> 00:02:56,470 And here is the console log of the request body. 49 00:02:56,500 --> 00:02:58,690 So when the request body Here's the ID. 50 00:02:58,720 --> 00:03:00,400 This is the thing that we really care about. 51 00:03:00,440 --> 00:03:05,140 This is the token that identifies the credit card that we're trying to charge money to. 52 00:03:05,140 --> 00:03:10,500 We then get some information about the card itself and then we get some other client Id created you 53 00:03:10,500 --> 00:03:12,750 know these are all properties we looked at previously. 54 00:03:13,010 --> 00:03:13,370 OK. 55 00:03:13,390 --> 00:03:14,210 So that's pretty much it. 56 00:03:14,220 --> 00:03:20,030 It looks like we are successfully communicating the request body into our request handler. 57 00:03:20,350 --> 00:03:28,060 So now we can take that Rec dot body or take that little token that credit card token and we will use 58 00:03:28,060 --> 00:03:34,130 it to create our actual charge just like we saw back in the Strype API reference a moment ago. 59 00:03:34,290 --> 00:03:40,130 So remember we call Strype charges create to actually build the credit card. 60 00:03:40,220 --> 00:03:45,580 OK let's do this back inside of our billing round stock G-S File. 61 00:03:45,730 --> 00:03:50,830 We're going to delete the console log and we're going to put in the logic to create And Bill this new 62 00:03:50,830 --> 00:03:51,840 credit card. 63 00:03:51,910 --> 00:04:00,400 So we'll say Strype charges create and then we are going to pass in a configuration object that specifically 64 00:04:00,400 --> 00:04:04,600 instructs Strype what we want to do with this credit card. 65 00:04:04,600 --> 00:04:08,400 So the first thing we're going to specify is the amount of money that we want to build. 66 00:04:08,710 --> 00:04:13,190 So remember that we had already specified this on the client side of our application. 67 00:04:13,210 --> 00:04:18,180 We had said yes we want to believe five hundred cents or five U.S. dollars. 68 00:04:18,490 --> 00:04:22,900 Now we still have to see it again on the back end because remember on the front end that's just kind 69 00:04:22,900 --> 00:04:24,140 of an authorization. 70 00:04:24,160 --> 00:04:29,080 It says hey we want to charge you up to five dollars or 500 cents. 71 00:04:29,080 --> 00:04:34,870 Now if you're on the back end we are actually confirming and say yes in fact we absolutely positively 72 00:04:34,870 --> 00:04:37,920 do want to charge you exactly five hundred cents. 73 00:04:37,930 --> 00:04:41,120 So that's why we are specifying the amount a second time. 74 00:04:41,770 --> 00:04:46,250 Next we're going to specify the currency which is going to be U.S. dollars. 75 00:04:46,270 --> 00:04:52,080 And again even if you don't use U.S. dollars for the purposes of this course I recommend you stick with 76 00:04:52,080 --> 00:04:57,970 a currency of USD or U.S. dollars just so all of our code matches up and all of our numbers match up 77 00:04:57,970 --> 00:04:58,680 as well. 78 00:04:58,690 --> 00:05:02,080 It's going to make both of our lives a lot easier. 79 00:05:02,140 --> 00:05:05,340 Next we have to specify a description for the charge. 80 00:05:05,350 --> 00:05:09,060 So this is can be absolutely anything at all can be any description we want. 81 00:05:09,070 --> 00:05:14,290 It's going to be something that kind of marks or kind of a little bit of logging statement around the 82 00:05:14,290 --> 00:05:15,660 actual charge. 83 00:05:15,670 --> 00:05:22,520 So for us let's just say $5 for five credits to say hey that's what you're buying here. 84 00:05:22,600 --> 00:05:29,200 And then finally we have to specify a source property which specifies what credit card or what charge 85 00:05:29,440 --> 00:05:32,020 source we are attempting to build. 86 00:05:32,470 --> 00:05:39,790 So in this case we want to specify the ID from that token object that we just passed into this route 87 00:05:39,820 --> 00:05:40,650 handler. 88 00:05:40,660 --> 00:05:45,490 Remember that Id property that we just saw two seconds ago right here. 89 00:05:45,490 --> 00:05:50,830 This is what identifies the current authorization or this kind of charge authorization. 90 00:05:50,830 --> 00:05:55,550 So it's this I.D. property that we want to pass in as the source. 91 00:05:55,570 --> 00:05:59,870 So when we cancel this whole object it was available as wrecked body. 92 00:05:59,950 --> 00:06:04,350 So to get just the I.D. we say wreck body dot I.D.. 93 00:06:04,590 --> 00:06:09,510 So back over here wreck body id like so. 94 00:06:10,090 --> 00:06:10,480 OK. 95 00:06:10,540 --> 00:06:11,510 So that's pretty much it. 96 00:06:11,560 --> 00:06:13,850 That's going to create the actual charge. 97 00:06:13,990 --> 00:06:20,740 And then Bill the credit card and then send a response back to our API from Strype saying hey charge 98 00:06:20,800 --> 00:06:22,660 successfully created. 99 00:06:22,690 --> 00:06:24,160 So let's take a quick break. 100 00:06:24,160 --> 00:06:25,640 We're going to pause for just a minute. 101 00:06:25,720 --> 00:06:31,410 We'll come back in the next section and we'll test this out on our back and so see you in just a second.