1
00:00:00,590 --> 00:00:03,150
In the last section we finished up the payments component.

2
00:00:03,180 --> 00:00:08,580
We then import it into the header and we were just about to use it inside of our switch statement at

3
00:00:08,580 --> 00:00:13,680
the case in which a user is logged into the application which is of course when we actually want to

4
00:00:13,680 --> 00:00:15,710
show that payments component on the screen.

5
00:00:15,780 --> 00:00:20,820
Now at the very end there I paused and I said very quickly I need to update my re-act version.

6
00:00:20,820 --> 00:00:25,800
We're about to do something that doesn't work quite so well with older versions of re-act which is what

7
00:00:25,800 --> 00:00:30,810
I kind of erroneously had inside of my project right before this because I was kind of testing something

8
00:00:30,810 --> 00:00:32,370
out with an older version of react.

9
00:00:32,460 --> 00:00:37,020
So that was just a real quick side thing shouldn't actually impact our project at all.

10
00:00:37,020 --> 00:00:44,670
So back to the task at hand when we hit the return case right here we want to make sure that we return

11
00:00:44,700 --> 00:00:46,280
the log out button still.

12
00:00:46,290 --> 00:00:50,640
But we also want to return the payments component as well.

13
00:00:50,640 --> 00:00:56,460
Now traditionally we would wrap this thing with like a component or another element like say a div or

14
00:00:56,460 --> 00:01:02,790
a UL but if you recall whatever gets returned from rendered content right here is going to be stuck

15
00:01:02,880 --> 00:01:04,470
right into this.

16
00:01:04,730 --> 00:01:11,340
And so semantically from an e-mail standpoint it doesn't make any sense to have a UL and then a div

17
00:01:11,400 --> 00:01:13,170
and then a list of lies.

18
00:01:13,470 --> 00:01:18,660
So rather than putting in some intermediate component or some intermediate element that we're going

19
00:01:18,660 --> 00:01:22,530
to instead return an array of elements.

20
00:01:23,160 --> 00:01:30,380
So I put down my return keyword or put down the array and make sure that I clean up the semi colon that

21
00:01:30,380 --> 00:01:31,940
was at the very end of this line.

22
00:01:31,980 --> 00:01:34,030
So no semi-colon over here anymore.

23
00:01:34,350 --> 00:01:39,900
And then right above this component we're going to place another lie that shows the payments component

24
00:01:39,900 --> 00:01:44,320
that we just put together right above it all say Eli.

25
00:01:45,460 --> 00:01:47,660
And inside of their payments.

26
00:01:47,730 --> 00:01:51,960
Oops not that but payments like so.

27
00:01:52,000 --> 00:01:54,150
And I forgot my comma at the end.

28
00:01:54,900 --> 00:01:55,310
OK.

29
00:01:55,380 --> 00:01:56,970
So let's test this out inside the browser.

30
00:01:56,970 --> 00:02:03,150
Now I you know flip back over there's the refresh if you have your console open and you put down that

31
00:02:03,150 --> 00:02:04,760
same debugger statement that I did.

32
00:02:04,760 --> 00:02:08,010
You might notice that it pauses in execution right here.

33
00:02:08,010 --> 00:02:11,610
So I'm currently paused inside of the payments component.

34
00:02:11,610 --> 00:02:15,930
So before we kind of test all this stuff out I want to go back are the payments component.

35
00:02:15,930 --> 00:02:18,020
Remember we just put in the debugger right here.

36
00:02:18,180 --> 00:02:21,540
And I said that I wanted to show you what happened to the stripe key.

37
00:02:21,570 --> 00:02:28,760
So in the striped key property right here we referenced process start EMV dot react up stripe key.

38
00:02:28,860 --> 00:02:34,620
One very important thing about environment variables is that the value of this environment variable

39
00:02:34,890 --> 00:02:38,800
is injected into this kind of slot right here.

40
00:02:38,940 --> 00:02:43,410
When our re-act application is actually built by Create re-act up.

41
00:02:43,560 --> 00:02:50,310
So when this code runs inside the browser the word processor EMV dog react blah blah blah does not actually

42
00:02:50,310 --> 00:02:50,940
exist.

43
00:02:50,970 --> 00:02:54,490
It gets entirely replaced by the actual key.

44
00:02:54,660 --> 00:02:58,540
And that's exactly what I wanted to show you with the debugger statement.

45
00:02:58,560 --> 00:03:04,560
So if we go back over to our code base or we go back over to our running code inside the Krumm Council

46
00:03:05,310 --> 00:03:12,690
Here's the debugger statement here's the start of all the GSX and then the actual Propp that we're passing

47
00:03:12,690 --> 00:03:14,240
in is streite key right here.

48
00:03:14,340 --> 00:03:17,130
And notice that we are passing in a string here.

49
00:03:17,310 --> 00:03:24,930
So the actual key was taken from the EMV file the process start EMV blah blah blah gets ripped out.

50
00:03:24,960 --> 00:03:27,520
And the key is stuck in its place.

51
00:03:27,540 --> 00:03:33,720
So when your project is actually built by Create react up you don't end up having any of these process.

52
00:03:33,730 --> 00:03:37,690
Ian VI variables sitting around I just thought that was kind of interesting.

53
00:03:38,160 --> 00:03:40,980
OK let's finish testing this stuff out.

54
00:03:40,980 --> 00:03:47,330
So I'm going to remove the debugger statement I'll save the file and then I'll go back over and I'm

55
00:03:47,430 --> 00:03:51,820
going to refresh the entire page.

56
00:03:52,330 --> 00:03:52,650
OK.

57
00:03:52,670 --> 00:03:55,290
So when I do you'll notice this.

58
00:03:55,670 --> 00:03:57,900
Well there's no easy way to say it.

59
00:03:58,190 --> 00:04:00,240
Hideously ugly button at the top.

60
00:04:00,290 --> 00:04:01,210
That is awfully ugly.

61
00:04:01,220 --> 00:04:02,020
Yes it is.

62
00:04:02,060 --> 00:04:08,840
But when we click it we get this awesome little pop up that request our users credit card number the

63
00:04:08,840 --> 00:04:15,590
expiration date the security code and then asks them to pay $5 an awesome and you can see at the top

64
00:04:15,590 --> 00:04:20,160
right it clearly says test mode which tells us we're still running our account in test mode.

65
00:04:20,510 --> 00:04:29,170
So it looks like we have done the initial setup of or react stripe check out successfully.

66
00:04:29,180 --> 00:04:33,350
Now one last thing I want to test I want to show you really quickly I'm going to open up the console

67
00:04:33,350 --> 00:04:34,880
really quick inside of here.

68
00:04:34,880 --> 00:04:41,450
You're going to see a warning because we are returning an array from that render content method inside

69
00:04:41,450 --> 00:04:46,730
the header Xeres rendered content where returning an array every time we return an array re-act thinks

70
00:04:46,730 --> 00:04:49,050
that it's a list and that we need to provide a key.

71
00:04:49,070 --> 00:04:52,610
So that's what this warning right here is saying will take care of that in just a second.

72
00:04:52,610 --> 00:04:55,820
But right now I want to focus on the actual credit card form.

73
00:04:56,000 --> 00:05:01,130
So you'll recall that when we put the payments component together we said that whenever we got a token

74
00:05:01,130 --> 00:05:06,410
back from Strype we should just cancel it like that was the callback that we provided to the component

75
00:05:06,410 --> 00:05:08,870
we said just cancel that token we get back.

76
00:05:08,870 --> 00:05:15,440
So I want to fill out this form and then take a glance at the token that we get back from Strype So

77
00:05:15,440 --> 00:05:18,300
for the e-mail is is all test data that we're putting in right now.

78
00:05:18,320 --> 00:05:23,960
So we're not going to put in an actual credit card number or put in a junk email and then the credit

79
00:05:23,960 --> 00:05:25,460
card number that we put in here.

80
00:05:25,490 --> 00:05:31,250
Remember when you were in test mode with Strype the explicit purpose of test mode is to give you the

81
00:05:31,250 --> 00:05:37,670
ability to put in fake credit card numbers that you can use to just kind of arbitrarily charge any amount

82
00:05:37,670 --> 00:05:38,670
of money to.

83
00:05:38,890 --> 00:05:41,230
And it's just going to work obviously in test mode.

84
00:05:41,510 --> 00:05:45,920
And no don't try to use these credit cards you know to actually buy something there.

85
00:05:45,980 --> 00:05:48,530
They're completely fake they're just for stripe test mode.

86
00:05:48,890 --> 00:05:54,260
So the test credit card number that we're going to use throughout this course is a very special number

87
00:05:54,290 --> 00:05:55,720
so you can't make your own up.

88
00:05:55,760 --> 00:05:58,220
This is a very special number that you have to use.

89
00:05:58,430 --> 00:06:05,290
It's 4 2 4 2 4 2 4 2 4 2 like so it's really easy you can just press for two for two and your keyboard

90
00:06:05,330 --> 00:06:08,140
over and over again until you get to the very end.

91
00:06:08,180 --> 00:06:10,490
You don't have to actually count out like OK.

92
00:06:10,610 --> 00:06:12,770
Four to four and so on.

93
00:06:12,770 --> 00:06:19,400
You know just keep pressing for you then we'll do our expiration to make sure that the expiration is

94
00:06:19,400 --> 00:06:25,340
sometime in the future and we can put in any three digit for the CVC will then hit pay.

95
00:06:25,520 --> 00:06:32,870
Now it looks like OK that's successful and then we see a console log over here that represents the pending

96
00:06:32,870 --> 00:06:37,990
charge or the sort of authorization for the charge that was just created.

97
00:06:38,060 --> 00:06:43,220
So you'll notice here that it is not just a standalone token even though that's kind of what I'd said

98
00:06:43,220 --> 00:06:47,820
this thing was and definitely made it sound like the thing was from the callback.

99
00:06:47,860 --> 00:06:54,040
And right here we see the word token but it's really an object that represents the entire charge.

100
00:06:54,110 --> 00:06:58,260
The closest thing to a token that exists inside of here is the ID property.

101
00:06:58,400 --> 00:07:05,450
So this id property right here really kind of represents you can kind of imagine the token kind of represents

102
00:07:05,450 --> 00:07:10,610
the pending charge in memory is that this idea is essentially what we really care about with this idea

103
00:07:10,610 --> 00:07:11,120
right here.

104
00:07:11,120 --> 00:07:17,570
We can make a follow up request from our API server over to Strype and say OK I want to actually build

105
00:07:17,570 --> 00:07:23,580
this person for X dollars now you'll see a couple of other properties inside of your.

106
00:07:23,580 --> 00:07:30,100
We get some stuff back like say client IP that's mostly relevant from a fraud standpoint.

107
00:07:30,130 --> 00:07:34,640
There are a couple outside services out there that can help you reduce fraud.

108
00:07:34,660 --> 00:07:40,360
If you take some of this information and pipe it into these outside fraud prevention API.

109
00:07:40,600 --> 00:07:43,170
So it's not something that's really relevant for us created.

110
00:07:43,210 --> 00:07:49,140
Is the time stamp of when we created this charge e-mail the user of course live mode is false because

111
00:07:49,140 --> 00:07:54,730
we are still in test mode type of card because we paid with a credit card and then you'll also notice

112
00:07:54,730 --> 00:07:56,950
this card property on here.

113
00:07:56,950 --> 00:08:02,590
It's an object which contains a couple different properties about the credit card that was just entered.

114
00:08:02,590 --> 00:08:10,290
Now we do get the address the city state zip of the person who belongs to the card or who owns the card.

115
00:08:10,420 --> 00:08:15,600
But you'll notice very importantly we don't actually get the actual credit card number back here.

116
00:08:15,610 --> 00:08:22,030
The most we get are the last four digits of the credit card which are for two for two in our case so

117
00:08:22,030 --> 00:08:28,850
we can keep the last four digits if we wanted to some time at some point like some for some reason ask

118
00:08:28,870 --> 00:08:32,560
the user to like verify their identity inside of our application.

119
00:08:32,590 --> 00:08:37,330
You know we can always make use of the last four but in general obviously again we never touched the

120
00:08:37,330 --> 00:08:39,680
entire credit card number.

121
00:08:40,330 --> 00:08:40,670
OK.

122
00:08:40,690 --> 00:08:44,830
So looks like everything worked correctly so I can take a quick break.

123
00:08:44,860 --> 00:08:51,130
When we come back we're going to talk a little bit about how to make this button look a lot nicer than

124
00:08:51,130 --> 00:08:52,230
how it looks right now.

125
00:08:52,300 --> 00:08:56,320
And we'll also talk about what we're going to do with this token now that we've actually gotten it from

126
00:08:56,320 --> 00:08:57,350
Strypes servers.

127
00:08:57,580 --> 00:08:58,370
So quick break.

128
00:08:58,390 --> 00:09:03,750
We'll come back and we will also reserve our take care of that little warning about the key.

129
00:09:03,850 --> 00:09:05,350
At the same time as well.

130
00:09:05,440 --> 00:09:07,730
So let's deal with all that stuff in the next video.