1
00:00:00,600 --> 00:00:04,840
We just install the striped J s library to the Express side of our project.

2
00:00:04,950 --> 00:00:09,810
Let's now flip back over to our code editor inside of the building route's file and start to set up

3
00:00:09,810 --> 00:00:11,280
the Strype library.

4
00:00:11,640 --> 00:00:17,670
So first thing we'll do is import Strype at the very top so at the very top will say Can stripe equals

5
00:00:17,730 --> 00:00:20,630
require strike like so.

6
00:00:21,000 --> 00:00:26,100
Now before we do anything else inside here I want to point you back to the documentation very quick.

7
00:00:26,190 --> 00:00:29,850
Notice the kind of peculiar peculiar signature here.

8
00:00:29,880 --> 00:00:35,840
When we require in the Strype library we require in Strype And then as a second call.

9
00:00:35,850 --> 00:00:39,770
So second set of parentheses we pass in our secret key.

10
00:00:39,840 --> 00:00:43,590
So the secret key that we had already signed up for from the Strype API.

11
00:00:43,680 --> 00:00:47,790
And remember we've already set this API key up across our project.

12
00:00:48,210 --> 00:00:54,440
So we're going to not only require the thing in but also pass in the key with a second set of parentheses.

13
00:00:54,870 --> 00:00:59,920
Now remember how we get access to our keys inside of the server side project.

14
00:01:00,120 --> 00:01:06,780
We have to require that config keys don't J.S. file and then we can freely make use of all the different

15
00:01:06,780 --> 00:01:10,220
keys inside of there inside of this billing route's file.

16
00:01:10,260 --> 00:01:12,410
So right above the stripe require statement.

17
00:01:12,560 --> 00:01:19,950
We'll say Konst keys is require that we're going to go up one directory into config and get the keys

18
00:01:19,950 --> 00:01:20,440
file.

19
00:01:20,550 --> 00:01:24,940
So of one config Keets.

20
00:01:25,080 --> 00:01:26,870
OK so now we've got the keys object.

21
00:01:26,880 --> 00:01:31,920
Remember this has the correct or the appropriate set of keys no matter whether we are in the development

22
00:01:31,980 --> 00:01:33,840
or production environments.

23
00:01:33,840 --> 00:01:40,500
Now as a reminder inside of these files either the dev or Prod. we had named the secret key specifically

24
00:01:40,620 --> 00:01:42,360
Strype secret key.

25
00:01:42,390 --> 00:01:48,010
So we need to make sure we pull in the key using the correct property name.

26
00:01:48,060 --> 00:01:52,170
So back inside of billing routes we're going to put on the second set of parentheses after the strike

27
00:01:52,170 --> 00:02:00,710
requires statement and we'll say Ki's dot stripe secret key strike secret key.

28
00:02:00,910 --> 00:02:01,250
OK.

29
00:02:01,290 --> 00:02:02,270
So that looks good.

30
00:02:03,820 --> 00:02:04,300
OK.

31
00:02:04,550 --> 00:02:06,910
So we've now got access to the key.

32
00:02:07,040 --> 00:02:13,250
Now we are going to move into our post request handler where we all put together the actual logic to

33
00:02:13,580 --> 00:02:17,080
take the credit card bill it and do all that kind of stuff.

34
00:02:17,180 --> 00:02:23,140
Now before we do we're going to run into just a little bit of an issue just a little bit of an issue.

35
00:02:23,210 --> 00:02:29,380
So as a reminder inside of our client side application we are making a post request to our back and

36
00:02:29,420 --> 00:02:35,050
server containing all the different credit card information or everything that was inside that token.

37
00:02:35,060 --> 00:02:40,170
So if you open up the network request tab go through the payment thing and then click on the request.

38
00:02:40,190 --> 00:02:45,500
You can then scroll down to the very bottom and inside of here you should see a request payload and

39
00:02:45,500 --> 00:02:50,570
that will contain everything about the credit card that was just entered by the user.

40
00:02:50,570 --> 00:02:54,280
So clearly this request object contains the actual token.

41
00:02:54,290 --> 00:02:55,700
Like here's the ID.

42
00:02:55,790 --> 00:03:00,080
This is the token that we actually want to use to create the actual charge.

43
00:03:00,080 --> 00:03:06,530
Now the problem here and this is something that is a real gotcha with express a huge gotcha when you

44
00:03:06,620 --> 00:03:14,280
make post requests to use Express Server Express does not by default parse the request payload.

45
00:03:14,510 --> 00:03:20,510
So we have to install another little module on top of express that instructors express that whenever

46
00:03:20,510 --> 00:03:26,270
someone sends in a post request it should take the request body parse it and then make it available

47
00:03:26,300 --> 00:03:28,780
to everything inside of our application.

48
00:03:28,820 --> 00:03:34,760
So little bit of a gotcha just to give you a little bit a little bit of a better idea of what this thing

49
00:03:34,760 --> 00:03:37,690
is going to do for us what this extra little step is going to do.

50
00:03:37,700 --> 00:03:42,410
Let's go back over to NPM G-S dotcom and we'll look up the documentation for it.

51
00:03:42,550 --> 00:03:45,370
Just so you can see that I'm not like pulling your leg here.

52
00:03:45,890 --> 00:03:46,180
OK.

53
00:03:46,190 --> 00:03:52,850
So over NPM J us we're going to search for the module body parser and then here it is body parsing middleware

54
00:03:54,550 --> 00:03:58,920
and yeah that's pretty much it parse incoming request bodies.

55
00:03:59,180 --> 00:04:06,100
So that's the actual request body is available inside of our handlers as the rec body property.

56
00:04:06,110 --> 00:04:12,250
So after we wire up this module right here all that token information will be available on the rack

57
00:04:12,560 --> 00:04:13,710
body property.

58
00:04:13,760 --> 00:04:19,760
And remember Reyk right here is talking about this rock object inside of our handler that represents

59
00:04:19,760 --> 00:04:21,720
the incoming request.

60
00:04:21,800 --> 00:04:26,290
I know that all these little configuration odds and ends on Express get a little bit tiring after a

61
00:04:26,290 --> 00:04:30,770
while but its one of those things where you just kind to you got to memorize it you got to just keep

62
00:04:30,770 --> 00:04:35,360
it in your head and whenever you work on your own project youve got to remember to bring the stuff in.

63
00:04:35,570 --> 00:04:40,310
Ok so lets install this library all wired up we'll take a quick break and then try it out in the next

64
00:04:40,310 --> 00:04:41,350
section.

65
00:04:41,390 --> 00:04:45,840
So inside my terminal my server is still dead over here.

66
00:04:45,970 --> 00:04:55,080
I'm inside the server directory and we will install dash dash save body parser OK that's a pretty quick

67
00:04:55,080 --> 00:04:59,730
little thing so we'll just flip right back to our code editor right away and we're going to open up

68
00:04:59,730 --> 00:05:05,620
our index G-S file we will require in that module and they'll make use of it.

69
00:05:05,640 --> 00:05:13,410
So just somewhere up here among all of our other require statements will say Konst body parser is require

70
00:05:13,560 --> 00:05:15,970
body Dasch parser like so.

71
00:05:16,250 --> 00:05:17,730
So here's their quires statement.

72
00:05:18,150 --> 00:05:22,530
And then if you read carefully in the documentation you may have noticed that it said that this was

73
00:05:22,560 --> 00:05:29,360
an express middleware remember that express middleware are wired up to express by the app dot use call.

74
00:05:29,400 --> 00:05:33,770
I remember that was something that we covered during an optional section a while ago.

75
00:05:34,050 --> 00:05:40,290
So these are all middleware that somehow operate on the incoming requests before they are sent off to

76
00:05:40,290 --> 00:05:42,080
our requests handlers.

77
00:05:42,120 --> 00:05:49,400
So we'll put this new parser middleware right above all the other ones the very top will say app don't

78
00:05:49,410 --> 00:05:53,960
use and to wire up the body parts or middleware.

79
00:05:54,000 --> 00:06:00,890
We're going to say body parser Daut Jaison and we'll make sure that we put an opening and closing parentheses

80
00:06:01,050 --> 00:06:03,460
right after Jaison like so.

81
00:06:04,230 --> 00:06:05,550
OK so that's pretty much it.

82
00:06:05,580 --> 00:06:11,630
Now any time a post request or a put request or a patch request or anything else that has a request

83
00:06:11,630 --> 00:06:17,340
a body comes into our application this middleware right here will parse the body and then assign it

84
00:06:17,340 --> 00:06:22,510
to the rec dot body property of the incoming request object.

85
00:06:22,530 --> 00:06:24,980
So with that in mind let's take a break.

86
00:06:24,990 --> 00:06:26,930
We're going to come back in the next section.

87
00:06:27,090 --> 00:06:32,220
We're going to out in a little bit of test code to our building redstart J.S. file and just make sure

88
00:06:32,460 --> 00:06:38,810
that the request object or the token the credit card token is being communicated to our request helper

89
00:06:38,830 --> 00:06:39,960
successfully.

90
00:06:39,960 --> 00:06:42,090
So I'll catch you in just a minute.