1
00:00:00,550 --> 00:00:03,540
In the last section we spoke about these Strype building process.

2
00:00:03,580 --> 00:00:08,590
We're not going to sign up for a brand new Strype account and install Strype into the client side of

3
00:00:08,590 --> 00:00:09,810
our application.

4
00:00:10,090 --> 00:00:13,600
So I'm going to going to open up a new browser tab inside of it.

5
00:00:13,600 --> 00:00:15,920
I will navigate to streite dot com.

6
00:00:16,000 --> 00:00:16,910
Here I am.

7
00:00:17,200 --> 00:00:22,240
I will find either create account or sign in and then create you know basically just create an account

8
00:00:22,270 --> 00:00:24,130
that's all we're trying to do here.

9
00:00:24,130 --> 00:00:26,140
So you can sign up for new account right here.

10
00:00:26,140 --> 00:00:33,070
Now of course I've already created an account ahead of time so I'm going to go ahead and go back and

11
00:00:33,070 --> 00:00:33,610
sign in

12
00:00:37,690 --> 00:00:39,780
so entering my details

13
00:00:42,430 --> 00:00:43,990
and we get sent to the dashboard.

14
00:00:44,110 --> 00:00:47,870
So the desk word is where everything actually occurs on strike.

15
00:00:47,980 --> 00:00:51,870
Now stripe internally has several different services available inside of it.

16
00:00:51,880 --> 00:00:57,430
It's not just about this rather straightforward simple payment flow that we are taking right here internally

17
00:00:58,000 --> 00:01:00,480
Strype has a lot of stuff going on with it.

18
00:01:00,490 --> 00:01:05,510
So you're not necessarily going to see like something that just very very clearly says like hey here's

19
00:01:05,530 --> 00:01:08,540
the Cingular flow that you can go into for working with stripe.

20
00:01:08,560 --> 00:01:10,880
There really is a lot of stuff going on here.

21
00:01:10,930 --> 00:01:17,200
So we're going to kind of just beeline directly how to get an API key that will allow us to start accepting

22
00:01:17,200 --> 00:01:18,700
payments.

23
00:01:18,700 --> 00:01:23,870
So once you're signed in to your account you're going to also start to see the word test everywhere.

24
00:01:23,980 --> 00:01:30,250
So for example the page title is test I might see a test somewhere else on here test data right here

25
00:01:30,250 --> 00:01:31,240
right and center.

26
00:01:31,690 --> 00:01:37,360
So when you first sign up for Strype your account is first created in what is called test mode test

27
00:01:37,360 --> 00:01:43,150
mode allows you to accept fake credit card numbers for the purposes of testing your application.

28
00:01:43,180 --> 00:01:47,680
So obviously as you and I as developers are testing this stuff we don't want to be using our own real

29
00:01:47,680 --> 00:01:52,210
credit card details and like you know paying money into our account or anything like that we want to

30
00:01:52,210 --> 00:01:54,820
have some ability to test the account.

31
00:01:54,820 --> 00:02:01,660
So when we are in test mode using test data we get some number of preset credit card numbers that stripe

32
00:02:01,660 --> 00:02:08,230
will accept freely and assume that it was given a a valid real credit card number and we will talk about

33
00:02:08,230 --> 00:02:10,150
exactly what those credit card numbers are.

34
00:02:10,150 --> 00:02:15,850
Once we set up our actual form you can activate your account by going over here that will take your

35
00:02:15,850 --> 00:02:21,010
account out of test mode and allow you to accept real actual credit cards.

36
00:02:21,040 --> 00:02:26,800
Now in this course even though we have done a really good job so far of going through deployments and

37
00:02:26,800 --> 00:02:32,260
security on API keys and all this stuff and treating this like a real application we are not going to

38
00:02:32,260 --> 00:02:34,760
go so far as activating our account.

39
00:02:34,960 --> 00:02:40,000
And the reason for that is that to actually activate your account and start to accept credit card details

40
00:02:40,390 --> 00:02:45,880
you have to start to enter like a lot of tax information in here like a lot of very serious stuff like

41
00:02:45,880 --> 00:02:49,480
company information bank account numbers all that kind of stuff.

42
00:02:49,690 --> 00:02:55,750
Obviously very much outside the scope of a tutorial course and obviously I don't want you to see me

43
00:02:55,750 --> 00:02:58,610
entering those credit card or bank details.

44
00:02:58,780 --> 00:03:01,080
So we're going to leave everything in test account.

45
00:03:01,120 --> 00:03:07,090
But just be aware that to really take the thing live and really accept credit cards you basically just

46
00:03:07,090 --> 00:03:09,070
have to go through that process and that's it.

47
00:03:09,070 --> 00:03:11,770
After that everything essentially behaves the same.

48
00:03:12,400 --> 00:03:12,770
OK.

49
00:03:12,820 --> 00:03:19,480
So enough of that we still want to find our API key so we can install react on the client side of our

50
00:03:19,480 --> 00:03:20,320
application.

51
00:03:20,350 --> 00:03:26,770
So in the left hand nav I need to find this API section down here so I'm going be taken to API and then

52
00:03:26,770 --> 00:03:32,510
right away I should be presented with a publishable key and a secret key.

53
00:03:33,010 --> 00:03:37,840
So these two key is right here essentially work the same way as the Google API keys that we've worked

54
00:03:37,840 --> 00:03:41,340
with throughout the course the publishable key is very well labeled.

55
00:03:41,350 --> 00:03:45,340
It means like literally you can publish this key and send it to the outside world.

56
00:03:45,370 --> 00:03:46,700
No problem with that.

57
00:03:46,810 --> 00:03:51,730
So we'll make use of the publishable key that is to identify our application to Strype and we'll use

58
00:03:51,730 --> 00:03:54,140
it on the front end of our application.

59
00:03:54,220 --> 00:03:57,490
The secret key on the other hand yes it is very secret.

60
00:03:57,490 --> 00:04:01,150
It's something that we do not want to share with anyone in the world.

61
00:04:01,150 --> 00:04:05,130
So we want to make sure that we keep the secret key very closely guarded.

62
00:04:05,200 --> 00:04:10,510
Now in the context of our application we're still going to handle these keys the same way we have every

63
00:04:10,510 --> 00:04:15,090
other one we'll make sure that the secret key gets stored inside of our keys file.

64
00:04:15,100 --> 00:04:20,110
Well really both unpublishable publishable key and the secret key get stored inside of our keys file

65
00:04:20,230 --> 00:04:21,360
for the back end.

66
00:04:21,430 --> 00:04:26,230
We will make sure that we update an environment variable on our Heroku deployment and it will make sure

67
00:04:26,230 --> 00:04:30,230
that we freely publish the publishable key on the front end.

68
00:04:30,520 --> 00:04:37,240
Now one thing that I want to say just very quickly remember that inside of our application right now

69
00:04:37,540 --> 00:04:43,270
if we go back over to our code editor we've got that config directory and inside of here we are doing

70
00:04:43,270 --> 00:04:47,430
some determination on where our keys our API keys are coming from.

71
00:04:47,590 --> 00:04:53,560
Now to be 100 percent clear this config directory right here and the keys inside of it are explicitly

72
00:04:53,560 --> 00:04:56,770
intended to be used only by our back and server.

73
00:04:56,770 --> 00:04:58,800
They are not for front end to use.

74
00:04:58,810 --> 00:05:03,760
We can't use this same type of approach right here on the front end and everything just kind of like

75
00:05:03,820 --> 00:05:05,430
magically work out.

76
00:05:05,440 --> 00:05:08,270
So on the front end we're going to do things a little bit differently.

77
00:05:09,070 --> 00:05:12,540
And on the front end we only need the access to the publisher Lokey right here.

78
00:05:12,550 --> 00:05:18,280
So on the secret key for the back end we'll still add it to these you know config files but for the

79
00:05:18,280 --> 00:05:20,400
front end stuff where we do need the key as well.

80
00:05:20,410 --> 00:05:22,130
We're going to handle it slightly differently.

81
00:05:22,510 --> 00:05:22,810
OK.

82
00:05:22,840 --> 00:05:24,740
So we've got our API key here.

83
00:05:24,790 --> 00:05:29,680
Now the last thing we're going to take care of is to install the Strype plug in that we're going use

84
00:05:29,710 --> 00:05:32,090
on the front end of our application.

85
00:05:32,380 --> 00:05:33,450
So a new tab.

86
00:05:33,460 --> 00:05:35,860
I'm going to do a google search for Strype.

87
00:05:35,920 --> 00:05:41,690
Check out and when I do so I'm going to find check out straight right here.

88
00:05:41,890 --> 00:05:47,770
So this is the library or the plug in there we're going to make use of to actually accept credit cards

89
00:05:47,830 --> 00:05:51,640
from our users or at least to show a credit card form to our users.

90
00:05:51,880 --> 00:05:57,800
So this is the kind of form that we're going to see when we make use of this check out library.

91
00:05:57,940 --> 00:06:00,730
You'll see this check out library referred to as check out.

92
00:06:00,820 --> 00:06:01,400
Yes.

93
00:06:01,420 --> 00:06:06,130
You know short for javascript it's the name of the library its sole purpose is to show the credit card

94
00:06:06,160 --> 00:06:11,620
form to users collect the credit card exchange it with the stripe API.

95
00:06:11,680 --> 00:06:16,660
Get back some identifying token and then give that give that token to our application so we can do the

96
00:06:16,660 --> 00:06:19,910
follow up actual billing request.

97
00:06:20,020 --> 00:06:26,980
Now this is the one part where I said a little bit ago that building with re-act application is slightly

98
00:06:26,980 --> 00:06:29,840
different than any other type of front end application.

99
00:06:29,860 --> 00:06:32,080
Any other type of front and free framework.

100
00:06:32,110 --> 00:06:37,900
So when we make use of check out J us we're not going to use just check out G-S we're actually going

101
00:06:37,900 --> 00:06:43,810
to use this other thing called Strype check out react.

102
00:06:43,840 --> 00:06:50,050
So if you google Strype check out react you're going to find a library by a guy named as Minnock called

103
00:06:50,110 --> 00:06:53,290
re-act stripe check out.

104
00:06:53,290 --> 00:06:59,330
So the sole purpose of this library is to make that check out G-S library work nicely with react.

105
00:06:59,350 --> 00:07:00,770
So this is the one thing Howard said.

106
00:07:00,940 --> 00:07:05,060
Yeah like with react and billing with re-act is just slightly more challenging.

107
00:07:05,100 --> 00:07:09,150
It's because we are going to use this component rather than the base.

108
00:07:09,150 --> 00:07:11,010
Check out stuff.

109
00:07:11,020 --> 00:07:15,760
So again the sole purpose of this is that check out G-S is kind of written in a world where they're

110
00:07:15,760 --> 00:07:20,470
are assuming that you're using a framework or a library like Jay queery or angular or something like

111
00:07:20,470 --> 00:07:22,560
that to render your application.

112
00:07:22,660 --> 00:07:26,500
And it doesn't work very nicely out of the box with react.

113
00:07:26,500 --> 00:07:29,550
Now we certainly can we can get it to work with re-act just fine.

114
00:07:29,620 --> 00:07:33,550
But life is a lot easier if you use this library instead.

115
00:07:33,550 --> 00:07:38,740
OK so last thing we're going to do in the section we're going to install re-act stripe check out as

116
00:07:38,740 --> 00:07:42,550
an NPM module to the front end of our application.

117
00:07:42,640 --> 00:07:44,950
So going to flip on over to my counsel.

118
00:07:45,460 --> 00:07:52,210
I'm going to kill that running server or change into the client directory and then I'll NPM install

119
00:07:52,360 --> 00:07:57,490
dash dash save and then the name of the library is re-act striped checkout.

120
00:07:57,580 --> 00:07:58,900
So react Strype

121
00:08:01,700 --> 00:08:02,360
OK.

122
00:08:02,880 --> 00:08:04,830
So we'll let this do its thing.

123
00:08:05,340 --> 00:08:11,430
We'll take a quick break and when we come back we'll figure out exactly how we use this library on the

124
00:08:11,430 --> 00:08:12,980
front end of our application.

125
00:08:13,170 --> 00:08:14,740
So I'll see you in just a minute.