1
00:00:00,420 --> 00:00:05,750
Once we have completed our initial setup next we're going to add one item to the cart.

2
00:00:05,850 --> 00:00:07,260
At least one I guess.

3
00:00:07,260 --> 00:00:11,460
Just so we can see what happens if we have some items in a cart.

4
00:00:11,460 --> 00:00:15,780
And now we're going to navigate to a checkout page and of course the only thing we're displaying right

5
00:00:15,810 --> 00:00:17,930
now is a hearing one.

6
00:00:17,940 --> 00:00:21,580
So let's start working on the rest of our form.

7
00:00:21,590 --> 00:00:24,750
And again there's gonna be values that we're gonna be setting up.

8
00:00:24,750 --> 00:00:25,950
I mean most of them.

9
00:00:26,100 --> 00:00:31,460
But then there's gonna be card elements that is gonna come directly from our package that we're gonna

10
00:00:31,480 --> 00:00:35,890
install and then this is gonna be displayed using the package.

11
00:00:35,970 --> 00:00:42,780
This particular input but we can of course work on the rest of the values we can draw back and we're

12
00:00:42,780 --> 00:00:44,730
gonna first set up our section.

13
00:00:44,820 --> 00:00:52,410
So let me delete the heading One I'm not gonna need that and we're gonna go with section section then

14
00:00:52,410 --> 00:00:56,690
within the section there's gonna be adding two but we still need to add some classes.

15
00:00:57,210 --> 00:01:06,180
So class name section and form because that is for our styling then we're gonna have a Q with some kind

16
00:01:06,180 --> 00:01:15,210
of class and class name is going to be section title and the name is gonna be checkout checkout and

17
00:01:15,210 --> 00:01:23,610
then after that we're gonna have a form with a class of checkout form check out form.

18
00:01:23,750 --> 00:01:29,670
Now of course it requires an action but since we're submitting using react we don't really need the

19
00:01:29,670 --> 00:01:33,020
action and then we're gonna have our order total.

20
00:01:33,180 --> 00:01:38,290
So within the form first I would want to show how much is our total.

21
00:01:38,340 --> 00:01:45,460
So we're gonna have our hand three then as a text we're gonna write here order total.

22
00:01:45,470 --> 00:01:52,040
And within a span we're gonna place our total whereas the total coming from that is coming from the

23
00:01:52,050 --> 00:01:52,720
card.

24
00:01:52,950 --> 00:01:55,520
Remember when we do structure it in the last video.

25
00:01:55,710 --> 00:02:00,870
Well now we're accessing and I can see that I have my checkout form and then I have the order total

26
00:02:01,170 --> 00:02:05,850
is let's say hundred dollars and now we're gonna work on our single input.

27
00:02:06,000 --> 00:02:11,500
And please keep in mind I only added single input because of the simplicity.

28
00:02:11,670 --> 00:02:16,650
Normally are gonna You would have an address with multiple fields and all that but in our case I'm just

29
00:02:16,650 --> 00:02:21,540
placing a name just so we can see that we have placed that particular order.

30
00:02:21,570 --> 00:02:25,080
So when we are looking in our back end in our API I can see all right.

31
00:02:25,080 --> 00:02:30,570
So the order was made but again normally you would add more fields but I just thought that this is gonna

32
00:02:30,570 --> 00:02:36,360
be somewhat time consuming if I'm gonna start adding everything from the address all the way up to a

33
00:02:36,360 --> 00:02:37,060
country.

34
00:02:37,080 --> 00:02:45,120
All right now we're gonna head over back and write off 30 heading I was always going to add my comments.

35
00:02:45,120 --> 00:02:46,130
You don't have to.

36
00:02:46,320 --> 00:02:49,310
I'm going to go with single input input.

37
00:02:49,320 --> 00:02:55,590
We're gonna copy and paste and I'm gonna say and offer single input and then within the input while

38
00:02:55,770 --> 00:02:57,380
First we're gonna have a div.

39
00:02:57,540 --> 00:03:03,920
So we're gonna start with a div of class of form control then we didn't leave.

40
00:03:03,930 --> 00:03:09,370
Let's add a label right away label and it is gonna be for a name.

41
00:03:09,420 --> 00:03:12,930
So that's the reason H email for is gonna be also for the name.

42
00:03:12,930 --> 00:03:15,500
Let me close out the label name.

43
00:03:15,540 --> 00:03:19,480
And then right after the label we're going to display our input.

44
00:03:19,650 --> 00:03:24,750
Let me scroll down a bit so you can see better and we're gonna have type of text.

45
00:03:24,780 --> 00:03:26,830
Yes that stays the same.

46
00:03:26,850 --> 00:03:33,030
I.D. is going to be name and then also the value is gonna be our state value.

47
00:03:33,030 --> 00:03:34,910
So the state value was the name.

48
00:03:34,920 --> 00:03:42,240
So I mean get the name for the value and on change again I'm gonna do an in line where we have a listener

49
00:03:42,840 --> 00:03:48,270
and then of course we're just gonna pass and our function the arrow function and then within the arrow

50
00:03:48,270 --> 00:03:54,360
function we're going to access our event object and then I'm just gonna say that said name since that

51
00:03:54,360 --> 00:04:01,530
is the function that controls my set value I'm going to pass in e target and we're gonna grab devalue

52
00:04:02,040 --> 00:04:09,090
that is gonna be our single input then we have the info about the card and I got normally probably you're

53
00:04:09,090 --> 00:04:14,340
not gonna add this to the form because in this case we're just showing what kind of numbers user has

54
00:04:14,340 --> 00:04:16,330
to use in order to test out the cards.

55
00:04:16,380 --> 00:04:22,260
It's not like we are accepting real cards we're still in test now and again normally you wouldn't have

56
00:04:22,260 --> 00:04:22,550
that.

57
00:04:22,560 --> 00:04:28,890
You'd have right away the card but I just find it a bit more useful if let's say somebody visits your

58
00:04:28,890 --> 00:04:33,780
application and in that way they can at least enter something otherwise they need to go and search the

59
00:04:33,780 --> 00:04:40,080
internet and look for the values that you can use for stripe test cards which I don't think it's very

60
00:04:40,080 --> 00:04:46,330
good use of their time and we're going to start again by setting up some kind of comments and we're

61
00:04:46,350 --> 00:04:53,380
just going to say that it is going to be a card element so Card element copy and paste and we're gonna

62
00:04:53,400 --> 00:05:00,990
have end of Card element and the card element and now I went all the way to the top of my page and we're

63
00:05:00,990 --> 00:05:10,610
gonna start by setting up a div with a class or stripe input stripe input like so and then within this

64
00:05:10,610 --> 00:05:15,500
div we're gonna start by setting up a label for the card element.

65
00:05:15,500 --> 00:05:22,100
So we're going to go with label and actually am all for is going to be for Card element and then within

66
00:05:22,100 --> 00:05:31,840
the label we're gonna write card or no sorry credit or debit card and then we're gonna have our paragraph

67
00:05:31,870 --> 00:05:39,070
with a bunch of info where we're gonna have a test card as well as the info about security numbers and

68
00:05:39,070 --> 00:05:44,560
the zip code so we're gonna start by placing a paragraph and then within the paragraph we're gonna have

69
00:05:44,560 --> 00:05:45,450
some text.

70
00:05:45,490 --> 00:05:48,010
Now we also gonna add the right away class.

71
00:05:48,250 --> 00:05:55,140
So let's say last name stripe info just so we have a bit of styling.

72
00:05:55,390 --> 00:06:02,050
Then let's add a text of test using this credit card.

73
00:06:02,050 --> 00:06:09,640
Then we have our colon and then within the span the number is essentially 4 2 4 2 4 times.

74
00:06:09,640 --> 00:06:15,130
So just that 4 2 4 2 and now we would need to copy and paste that four times.

75
00:06:15,130 --> 00:06:16,610
So let me selected.

76
00:06:16,990 --> 00:06:22,200
Let me copy that and we're gonna go with 1 2 3.

77
00:06:22,240 --> 00:06:25,180
So we have four times 4 2 4 2.

78
00:06:25,360 --> 00:06:28,010
And then of course that is gonna be our test number.

79
00:06:28,210 --> 00:06:30,480
Then we're gonna have a line break.

80
00:06:30,550 --> 00:06:33,670
So right outside this plan we're gonna have a line break.

81
00:06:33,820 --> 00:06:45,040
We're gonna say enter any five digits for these zip code zip code and then of course this gives me a

82
00:06:45,040 --> 00:06:46,900
code that I'm not looking for.

83
00:06:46,900 --> 00:06:48,980
And then we're gonna have another line break.

84
00:06:49,000 --> 00:06:50,580
So we're gonna have another line break.

85
00:06:50,740 --> 00:07:01,510
And then this case where we say enter any three digits three digits for the security number forty CVC

86
00:07:01,790 --> 00:07:03,340
CVC.

87
00:07:03,390 --> 00:07:06,110
Let's say that we have currently paragraph.

88
00:07:06,270 --> 00:07:09,300
We have our card element next.

89
00:07:09,300 --> 00:07:11,200
We're gonna have stripe elements.

90
00:07:11,250 --> 00:07:17,380
So again I'm just gonna add a comment of Stripe elements or element whatever.

91
00:07:17,550 --> 00:07:18,840
And then we're gonna have the error.

92
00:07:19,200 --> 00:07:24,330
So right after the input field that stripe element is going to provide where essentially we're just

93
00:07:24,330 --> 00:07:28,850
at a card info as well as all the proper dates and everything.

94
00:07:29,070 --> 00:07:34,800
Then we're gonna have our errors where if there is an error we're gonna display like your card number

95
00:07:34,800 --> 00:07:35,390
is incomplete.

96
00:07:35,760 --> 00:07:40,180
If we add let's say card let me selected properly like.

97
00:07:40,210 --> 00:07:45,330
So let me grab it then copy and paste if let's say I tried to submit it in this case.

98
00:07:45,430 --> 00:07:47,320
And of course I need to type something in here.

99
00:07:47,490 --> 00:07:50,880
Then I'm gonna have your card's expiration date is incomplete.

100
00:07:51,050 --> 00:07:56,520
And in order to set it up we're gonna head over back to our project and then right after striped element

101
00:07:56,550 --> 00:08:04,560
we're gonna add one more comment and the comment is gonna be stripe adverse and then we're just gonna

102
00:08:04,590 --> 00:08:10,060
check our state error value if it is true then we're going to display there.

103
00:08:10,110 --> 00:08:14,560
If not then of course we're just not going to display anything so error.

104
00:08:14,650 --> 00:08:21,090
And then if it is true then I would want to render my paragraph paragraph is gonna have some classes

105
00:08:21,120 --> 00:08:24,960
of class name form empty.

106
00:08:24,960 --> 00:08:27,650
And then in here we're just gonna type in our.

107
00:08:27,900 --> 00:08:34,890
So whatever the error is then we're just gonna display it also would want to show if my value is empty.

108
00:08:34,890 --> 00:08:41,820
So if the user hasn't typed in the name then I'm going to display my paragraph with again the values

109
00:08:41,820 --> 00:08:48,240
are empty or if the user has filled out the value for the name then we're going to display the submit

110
00:08:48,240 --> 00:08:48,860
button.

111
00:08:48,960 --> 00:08:53,460
Please keep in mind that even though again we have our name filled out.

112
00:08:53,640 --> 00:08:58,170
If the values within the card are incorrect we're not going to be able to submit the form.

113
00:08:58,170 --> 00:09:02,310
So it's not like just because we typed in the name all the time we're gonna be getting some kind of

114
00:09:02,310 --> 00:09:02,600
error.

115
00:09:02,610 --> 00:09:06,090
No we're always gonna check whether the card values are correct.

116
00:09:06,240 --> 00:09:09,670
And only then we're gonna be able to submit our order.

117
00:09:09,780 --> 00:09:15,900
We're gonna head over back and in this case unlike the previous time where I'd made two checks four

118
00:09:15,900 --> 00:09:22,140
is empty I'm just gonna set it up as they third operator just so I can show that of course there's always

119
00:09:22,140 --> 00:09:24,370
multiple options how we can solve the same thing.

120
00:09:25,290 --> 00:09:32,130
So I'm going to go with empty value here and then like I said it is gonna be a ternary operator but

121
00:09:32,130 --> 00:09:35,270
I think it is gonna be easier if we first type all the paragraph.

122
00:09:35,440 --> 00:09:37,650
We're gonna add a class name again.

123
00:09:37,860 --> 00:09:39,750
Form empty.

124
00:09:39,750 --> 00:09:44,880
Like so and let's just write please fill out.

125
00:09:44,880 --> 00:09:49,890
Name field and then also let's randomly button.

126
00:09:49,950 --> 00:09:53,440
And then we're gonna set up the eatery operator where it just copy paste.

127
00:09:53,460 --> 00:09:57,150
Again I just find it a bit faster if we type it out this way.

128
00:09:57,210 --> 00:10:02,390
So we're gonna have our button on the button is gonna have a type of submit.

129
00:10:02,490 --> 00:10:06,630
So we're gonna go with submit then we're gonna have a click event.

130
00:10:06,690 --> 00:10:13,260
So we're gonna have on click we're gonna sign it to our handle submit and then also we're gonna add

131
00:10:13,260 --> 00:10:15,350
some class names of class name.

132
00:10:15,630 --> 00:10:23,700
And it's gonna be between between primary as well as Beatty and block and as far as text we're just

133
00:10:23,700 --> 00:10:25,480
gonna have submit.

134
00:10:25,530 --> 00:10:26,330
Let's save it.

135
00:10:26,430 --> 00:10:32,460
And then like I said Let's set up our ternary operator where if the is empty is true then we're showing

136
00:10:32,460 --> 00:10:37,920
please fill out the name field if these is empty is false meaning if the user has filled out the name

137
00:10:37,920 --> 00:10:40,610
value then we're gonna be able to submit.

138
00:10:40,620 --> 00:10:47,340
So we're gonna go with is empty is empty ternary operator and first case scenario we're gonna render

139
00:10:47,670 --> 00:10:48,840
the paragraph.

140
00:10:48,960 --> 00:10:55,970
So essentially if it is true and then the second case if it is false if the user has filled out the

141
00:10:55,970 --> 00:11:04,120
values then let's just grab our button and display that button copy and paste a closed D sidebar and

142
00:11:04,120 --> 00:11:09,860
then of course the moment I fill it out I can submit if the name is empty then we're showing please

143
00:11:09,890 --> 00:11:13,070
fill out Team Name field and now we're going to switch gears.

144
00:11:13,070 --> 00:11:17,120
Sign up for the stripe account and setup our stripe elements.