1
00:00:00,380 --> 00:00:03,360
In the last video we install the re-act stripe.

2
00:00:03,390 --> 00:00:06,810
Check out library to the client side of our project.

3
00:00:06,810 --> 00:00:13,180
We're now going to change back into the server side and start the project back up with NPM run dev like

4
00:00:13,180 --> 00:00:14,070
so.

5
00:00:14,570 --> 00:00:14,850
OK.

6
00:00:14,880 --> 00:00:18,150
So let's think about how to tackle all this stuff.

7
00:00:18,150 --> 00:00:21,240
We first have to take care of some configuration on the front end.

8
00:00:21,480 --> 00:00:25,380
After we set up all this reac stripe check out Stuy stuff on the front end.

9
00:00:25,410 --> 00:00:29,190
We'll then move to taking care of everything on the back end as well.

10
00:00:29,190 --> 00:00:34,530
Now to make use of the re-act stripe check out library we first have to make sure that the available

11
00:00:34,560 --> 00:00:40,380
API keys specifically the publishable key is available to the reac stripe check out library.

12
00:00:40,560 --> 00:00:46,170
So this key right here is a requirement of check out yes we have to have it available on the front end

13
00:00:46,200 --> 00:00:47,390
of our application.

14
00:00:47,700 --> 00:00:53,970
The back end similarly wants the publishable key and the secret key in this video.

15
00:00:53,970 --> 00:00:58,650
I think that we should just go through the entire process of putting all these different keys into the

16
00:00:58,650 --> 00:01:03,570
right places so that we don't have to come back later and access these keys again at some point in the

17
00:01:03,570 --> 00:01:04,500
future.

18
00:01:04,500 --> 00:01:10,830
So in this video we're going to make sure these keys get put onto our server side configuration and

19
00:01:10,890 --> 00:01:14,130
our client side is going to take care of all of it right now.

20
00:01:14,490 --> 00:01:20,160
We'll start off first with the server side stuff because we are familiar with how keys are handled on

21
00:01:20,160 --> 00:01:21,400
the server side.

22
00:01:21,480 --> 00:01:28,990
If you recall we have our config folder inside of there is the dev J.S. file and the Prod. J.S. file.

23
00:01:29,070 --> 00:01:35,940
So both of these the dev side has all the Rockies intend for use the development environment and the

24
00:01:35,940 --> 00:01:40,640
Prod. side pulls keys from our Heroku environment variables.

25
00:01:41,130 --> 00:01:42,110
So let's do the setup.

26
00:01:42,150 --> 00:01:46,620
Let's just get this done with because it's basically going to be a lot of copy paste.

27
00:01:46,620 --> 00:01:49,600
So I'm going to flip back over to my stripe dashboard.

28
00:01:49,770 --> 00:01:51,300
Here's my publishable key.

29
00:01:51,390 --> 00:01:53,040
I'm going to copy the key.

30
00:01:53,340 --> 00:01:56,970
I'm going to change back over to my dev dot J.S. file first.

31
00:01:56,990 --> 00:02:00,170
It's going to take care of dev genius first.

32
00:02:00,440 --> 00:02:05,490
Now going to make sure that I add a comma at the end of the cookie key line because we're going to add

33
00:02:05,550 --> 00:02:07,940
a new property inside of here.

34
00:02:08,210 --> 00:02:14,970
So the first one that we're going to take care of is going to be Strype publishable key and we'll paste

35
00:02:14,970 --> 00:02:16,430
the publishable key.

36
00:02:16,440 --> 00:02:18,020
So you should see right there.

37
00:02:18,030 --> 00:02:24,750
Short for publishable we'll make sure that we get a comma at the end and then we will also pull in the

38
00:02:24,810 --> 00:02:26,120
secret key.

39
00:02:26,130 --> 00:02:30,490
So here's my secret key I'll copy it change back over to Deb.

40
00:02:30,520 --> 00:02:35,650
Yes and we'll do Strype secret key and then paste that one.

41
00:02:36,300 --> 00:02:36,640
OK.

42
00:02:36,660 --> 00:02:43,380
Before we change away from this file I have to ask you very carefully please make sure every line has

43
00:02:43,380 --> 00:02:45,220
a comma where appropriate.

44
00:02:45,270 --> 00:02:48,780
Please make sure you spelt the word publishable correctly.

45
00:02:48,780 --> 00:02:54,130
If you make any mistakes at this point we're not going to be making use of these keys anytime soon.

46
00:02:54,210 --> 00:02:58,500
OK we're going to take care of the client side stuff first and then come to the server side stuff.

47
00:02:58,530 --> 00:03:03,660
So if you make any typos here or anything like that it's going to be really hard to debug because we

48
00:03:03,660 --> 00:03:07,010
won't start to see any error messages around it until we later on.

49
00:03:07,020 --> 00:03:10,810
So please triple check your spelling here.

50
00:03:11,050 --> 00:03:12,940
OK so there's the dev JSA File.

51
00:03:12,960 --> 00:03:16,860
We're all done with this one so I'm going to close this file out and we're going to take care of the

52
00:03:16,860 --> 00:03:18,220
project file.

53
00:03:18,440 --> 00:03:23,190
So remember all the keys inside of here are for use in production and they are all sourced from our

54
00:03:23,190 --> 00:03:25,580
Heroku config.

55
00:03:25,830 --> 00:03:28,260
Heroku environment variables.

56
00:03:28,920 --> 00:03:31,300
However we do have to still set up the relationship.

57
00:03:31,350 --> 00:03:37,320
So after cookee key put a comma down we'll say Strype public or something.

58
00:03:37,370 --> 00:03:41,790
Streite publish of all key is process done.

59
00:03:41,790 --> 00:03:46,400
Ian V Strype publishable key.

60
00:03:46,770 --> 00:03:53,460
Well make sure we get the comma Strype secret key is processed.

61
00:03:53,520 --> 00:03:59,450
Even the dot stripe secret key like so OK.

62
00:03:59,490 --> 00:04:05,530
Again I got to ask you please triple check your spelling of publishable here so you should see a publishable

63
00:04:05,530 --> 00:04:07,560
one and publishable too.

64
00:04:07,720 --> 00:04:12,550
Right here make sure you they are spelled correctly because this is going to be really hard to debug

65
00:04:12,580 --> 00:04:14,230
at some point in the future.

66
00:04:14,840 --> 00:04:19,690
OK so now the last thing we do on the server side is make sure that the Heroku development works and

67
00:04:19,710 --> 00:04:24,050
the Hiroko environment has these different environment keys set up correctly.

68
00:04:24,280 --> 00:04:31,550
So we're going to open up our Heroku dashboard so we'll make a new tab I'll navigate to Heroku dot com

69
00:04:32,980 --> 00:04:39,610
and I'm going to find the dashboard for my current project that's running our e-mail application so

70
00:04:39,730 --> 00:04:41,350
mine is called agile by you.

71
00:04:41,350 --> 00:04:46,810
If you recall yours is likely called something else so you'll want to pull your application up and then

72
00:04:46,810 --> 00:04:49,530
remember how we add on environment variables.

73
00:04:49,630 --> 00:04:53,060
We're going to follow the Settings tab right here.

74
00:04:53,140 --> 00:04:59,770
We will find reveal config variables and then we will add them onto this list.

75
00:04:59,940 --> 00:05:05,770
OK so we're going to first flip back over to the product G-S file and we're going to copy the property

76
00:05:05,770 --> 00:05:11,260
names here to just really ensure that we don't actually accidentally make any typos.

77
00:05:11,320 --> 00:05:17,140
So I will select Strype publishable key I'll copy it I'll add it as a new key.

78
00:05:17,160 --> 00:05:20,050
I'll then go back to my striped dashboard.

79
00:05:20,050 --> 00:05:26,300
I will grab the public key right here or copy it and paste the value.

80
00:05:26,380 --> 00:05:28,580
So you should now see publishable key.

81
00:05:28,750 --> 00:05:31,240
Lining up with P.K. right here.

82
00:05:31,240 --> 00:05:32,020
You should see it.

83
00:05:32,080 --> 00:05:33,020
OK.

84
00:05:33,670 --> 00:05:37,630
So we'll add that and it will do the same process for the secret key as well.

85
00:05:37,630 --> 00:05:39,980
So here's Strype secret key.

86
00:05:40,060 --> 00:05:40,860
Copy that.

87
00:05:40,870 --> 00:05:42,250
I'll paste it.

88
00:05:42,310 --> 00:05:48,580
Now we're going to go back over to the striped dashboard grabbed the secret key right here and paste

89
00:05:48,580 --> 00:05:49,470
it as a value.

90
00:05:49,720 --> 00:05:49,980
OK.

91
00:05:49,990 --> 00:05:51,140
So one more time.

92
00:05:51,270 --> 00:05:54,260
P.K. appear OK down here.

93
00:05:54,370 --> 00:05:56,440
S.K. being short for secret key.

94
00:05:56,650 --> 00:05:57,740
And then the last step.

95
00:05:57,790 --> 00:05:58,560
Don't forget this one.

96
00:05:58,560 --> 00:05:59,250
Very important.

97
00:05:59,260 --> 00:06:00,720
Make sure you click at.

98
00:06:01,270 --> 00:06:01,620
OK.

99
00:06:01,630 --> 00:06:02,380
So that looks good.

100
00:06:02,380 --> 00:06:08,440
We've now got our Strype environment variables set up correctly on the back end of both our development

101
00:06:08,440 --> 00:06:11,070
environment and our Heroku instance.

102
00:06:11,110 --> 00:06:15,850
So not going to close the Heroku dashboard and now we can start to think about how we're going to handle

103
00:06:16,110 --> 00:06:19,300
all this environment variable stuff on the front end.

104
00:06:19,900 --> 00:06:25,480
So again I want to remind you that this config folder right here and all the configuration side of it

105
00:06:25,780 --> 00:06:28,980
is strictly for the back end of our application.

106
00:06:28,990 --> 00:06:35,630
We are not going to use this config folder for anything on the front it nothing on the front end.

107
00:06:35,680 --> 00:06:40,480
And the reason for that is that yes we have these development and production keys are these separate

108
00:06:40,480 --> 00:06:41,440
files right here.

109
00:06:41,740 --> 00:06:46,810
But inside of the re-act world it is the front end of our application.

110
00:06:46,810 --> 00:06:53,830
Any file that gets required into our reaction a project like any file it gets required in is going to

111
00:06:53,830 --> 00:06:57,530
have its contents publicly visible to the outside world.

112
00:06:57,550 --> 00:07:04,120
So in other words if we somehow required in this dev dot file to our client side application all the

113
00:07:04,120 --> 00:07:07,480
keys inside of here would be accessible to the outside world.

114
00:07:07,690 --> 00:07:12,970
Because this entire file would be pulled into the client side project when we required it.

115
00:07:12,970 --> 00:07:19,450
So again we make sure that the config for our server side is distinctly different and distinctly separate

116
00:07:19,780 --> 00:07:25,680
from the config for our not server side the the front end that's when it's called.

117
00:07:26,320 --> 00:07:27,240
OK.

118
00:07:27,610 --> 00:07:31,950
So it then mind we are not going use the same directory we're not going to use the same set up here.

119
00:07:32,110 --> 00:07:34,200
And believe it or not there's actually one other big issue here.

120
00:07:34,210 --> 00:07:38,890
You might be thinking OK Stephen whatever who cares let's make a config folder in the client directory

121
00:07:38,920 --> 00:07:40,250
and make the stuff happen.

122
00:07:40,450 --> 00:07:41,650
Well there's one other big issue.

123
00:07:41,650 --> 00:07:44,090
So let me tell you about what the other big issue is.

124
00:07:44,140 --> 00:07:46,860
If we open up our config key is not Geass file.

125
00:07:46,990 --> 00:07:49,210
You'll recall how we settle this stuff up.

126
00:07:49,270 --> 00:07:53,380
We said if we're in production required this file and export it.

127
00:07:53,530 --> 00:07:58,840
If we are in not production essentially require this file and export it.

128
00:07:58,950 --> 00:07:59,950
So you might be thinking.

129
00:08:00,040 --> 00:08:01,160
All right that's fine.

130
00:08:01,180 --> 00:08:05,770
We'll make the separate config folder will do the same set up on the front end as well.

131
00:08:05,860 --> 00:08:08,940
Well here is the problem with that approach.

132
00:08:09,340 --> 00:08:14,350
On the front end of our application and it is going to seem really esoteric or kind of strange by the

133
00:08:14,350 --> 00:08:17,270
way but it's really fine on the front end of our application.

134
00:08:17,320 --> 00:08:22,780
If you recall we are making use of yes 20:15 modules.

135
00:08:22,890 --> 00:08:25,720
So like let's open up the SIRC folder.

136
00:08:25,750 --> 00:08:27,760
Find the index dot jazz file.

137
00:08:27,760 --> 00:08:28,510
Check it out.

138
00:08:28,840 --> 00:08:37,990
Yes 2015 modules use 20:15 modules are characterized by import statements like this and export default

139
00:08:38,350 --> 00:08:40,780
statements as well like this one right here.

140
00:08:40,810 --> 00:08:47,980
So the front end of our application is making use of yes 20:15 modules the back end as we've said previously

141
00:08:48,900 --> 00:08:56,200
is making use of common G-S modules which are characterized by require statements or their require function

142
00:08:56,260 --> 00:08:57,850
like this right here.

143
00:08:57,870 --> 00:08:59,000
Now here's why I bring this up.

144
00:08:59,020 --> 00:09:02,090
Here's what the problem is with common.

145
00:09:02,100 --> 00:09:04,070
Yes modules like this right here.

146
00:09:04,180 --> 00:09:13,120
We can have some amount of logic executed before we decide what file to require in how ever when we

147
00:09:13,120 --> 00:09:13,720
make use of.

148
00:09:13,750 --> 00:09:15,440
Yes 20:15 modules.

149
00:09:15,520 --> 00:09:20,430
You are not allowed to execute any type of logic whatsoever.

150
00:09:20,590 --> 00:09:23,440
Before listing and import statements.

151
00:09:23,470 --> 00:09:29,590
So in other words on the client side of our project because we are using as 20:15 modules we can't put

152
00:09:29,590 --> 00:09:35,760
in a check like this to say hey if we are in production bring in this file but if we are not in production

153
00:09:35,770 --> 00:09:43,000
bring in this other one we cannot have that layer of logic inside of the client side of our application.

154
00:09:43,000 --> 00:09:47,620
So obviously that's not the best thing in the world and it's going to just slightly kind of complicate

155
00:09:47,620 --> 00:09:48,810
our lives a little bit.

156
00:09:49,030 --> 00:09:52,760
Fortunately the Create react up project that we are making use of.

157
00:09:52,780 --> 00:09:58,990
Remember we used create re-act up to generate our client side project has a good solution for.

158
00:09:59,050 --> 00:10:01,700
AP he's just like what we need.

159
00:10:01,790 --> 00:10:03,170
So let's take a quick break.

160
00:10:03,170 --> 00:10:07,970
When we come back we're going to look at some of the Create react out documentation and we'll talk about

161
00:10:07,970 --> 00:10:14,600
exactly how create re-act out is going to help us in defining some secret API keys and all this kind

162
00:10:14,600 --> 00:10:15,480
of good stuff.

163
00:10:15,500 --> 00:10:17,300
So let's get to it in the next section.

164
00:10:17,300 --> 00:10:18,980
I'll see you in just a minute.