1
00:00:04,010 --> 00:00:06,480
Hello everyone and welcome back to our bootstrap course.

2
00:00:06,500 --> 00:00:09,640
In this lecture we're gonna be adding more to our checkout page.

3
00:00:09,650 --> 00:00:15,440
We are going to be adding payment fields so information about your credit card or what kind of card

4
00:00:15,440 --> 00:00:18,700
you want to use the name on the card et cetera.

5
00:00:18,740 --> 00:00:24,190
So let's go ahead and open up our each email tab and hide the outputs that we can see this.

6
00:00:24,230 --> 00:00:25,560
I'm going to zoom in a little.

7
00:00:25,670 --> 00:00:31,190
OK so we're going to add this as a divs right below what we already have.

8
00:00:31,190 --> 00:00:35,540
So we already have our form here for information.

9
00:00:35,540 --> 00:00:41,730
And this is still going to be in the form but it's going to be outside of all the other deaths.

10
00:00:41,750 --> 00:00:48,820
So just above or the forum and below that row of the div or to add in pigment.

11
00:00:48,830 --> 00:00:56,100
So let's go ahead and add in another header in fact and we can make a header that will say payment.

12
00:00:56,130 --> 00:01:02,920
So we're going to make it in each for doing each three add we're going to first add some spacing.

13
00:01:02,930 --> 00:01:07,310
So we're going to give it the class and be three which was spaced out with bootstrap and let's close

14
00:01:07,310 --> 00:01:10,820
off the header for and this is going to be the text payment.

15
00:01:10,820 --> 00:01:16,400
So this is going to be another title just like we have already appear for checkout where we had the

16
00:01:16,400 --> 00:01:17,150
checkout.

17
00:01:17,150 --> 00:01:20,260
Let's see where it is it just going up a little bit higher.

18
00:01:20,300 --> 00:01:21,290
We had checkout.

19
00:01:21,290 --> 00:01:24,830
Now this we actually made an H2 with a display for.

20
00:01:24,900 --> 00:01:30,380
So if we want to be consistent we can keep the same structure and make as each to the display for we

21
00:01:30,380 --> 00:01:35,210
can preview it first is an H for instead of an H two and we'll test how it looks and maybe we'll change

22
00:01:35,210 --> 00:01:35,370
it.

23
00:01:36,110 --> 00:01:36,340
OK.

24
00:01:36,350 --> 00:01:38,080
So right now we have it as an inch forward just fine.

25
00:01:38,360 --> 00:01:43,250
Let's go ahead and continue on by making another div and this is going to be of Class D block and we're

26
00:01:43,250 --> 00:01:48,270
going to give it the margin at the top and bottom three with m y three.

27
00:01:48,350 --> 00:01:54,380
And this time we're going to open up this div and we're going to make some radio buttons radio buttons

28
00:01:54,410 --> 00:01:59,210
are kind of like bullet points that you can select and the user can select one of them to determine

29
00:01:59,270 --> 00:02:00,230
what they want to pay with.

30
00:02:00,260 --> 00:02:05,900
So we're going to open up a new div and it's going to be of class custom control and custom radio.

31
00:02:05,900 --> 00:02:12,080
Now you can make custom radio buttons with each team out and see asset's vanilla Chanel and see Asus

32
00:02:12,260 --> 00:02:17,090
but by making it with the bootstrap class just like we have here using the bootstrap class custom control

33
00:02:17,120 --> 00:02:22,640
and custom radio bootstrap will automatically style your buttons your radio buttons for you and it will

34
00:02:22,730 --> 00:02:23,750
be much more efficient.

35
00:02:23,750 --> 00:02:26,280
So we're going to use bootstrap for radio buttons.

36
00:02:26,300 --> 00:02:29,730
Let's go ahead and make our first input field.

37
00:02:29,930 --> 00:02:36,800
Now each of these divs with the class custom radio will make its own bullet point so in the first bullet

38
00:02:36,800 --> 00:02:41,750
point we going to have an input and we're going to allow the user to select credit card debit card people

39
00:02:42,220 --> 00:02:43,200
et cetera.

40
00:02:43,220 --> 00:02:51,560
So let's make an input with the credit card and we're going to give it the name of payment method and

41
00:02:51,560 --> 00:02:54,840
then we're going to give it the type of radio.

42
00:02:54,920 --> 00:03:01,490
So that means that this input will be recognized as a radio input which is different from a type of

43
00:03:01,490 --> 00:03:07,460
text which means you would just input text by putting the time to be radio each e-mail will automatically

44
00:03:07,460 --> 00:03:09,790
make it into a radio button.

45
00:03:09,800 --> 00:03:14,560
And then the CFS will be styled with bootstrap styling.

46
00:03:14,570 --> 00:03:15,120
OK great.

47
00:03:15,140 --> 00:03:22,360
Let's also add the class custom control input and we can close that off.

48
00:03:22,550 --> 00:03:23,000
Great.

49
00:03:23,000 --> 00:03:25,730
So that is what we have for the input.

50
00:03:25,790 --> 00:03:27,290
Let's also add [REMOVED].

51
00:03:27,290 --> 00:03:34,160
We're gonna make a new label in a court of class custom control label and it's going to be for the credit

52
00:03:34,160 --> 00:03:35,150
card I.D..

53
00:03:35,660 --> 00:03:38,990
And let's go ahead and close off that label.

54
00:03:39,200 --> 00:03:46,120
And here we can put any tax credit card and this will be the tax associated with the radio button.

55
00:03:46,130 --> 00:03:46,580
Okay great.

56
00:03:46,580 --> 00:03:48,050
Let's go ahead and make a few more.

57
00:03:48,050 --> 00:03:48,950
Before we preview this.

58
00:03:48,970 --> 00:03:54,020
So right now we have this one radio button and we're going to go ahead and make another one all still

59
00:03:54,020 --> 00:03:56,390
in this containing div.

60
00:03:56,390 --> 00:04:00,940
So just below that Dave let's go ahead and make a similar structure for a debit card.

61
00:04:01,310 --> 00:04:06,290
So the user want to pay with the debit card they would select this radio button with radio buttons.

62
00:04:06,290 --> 00:04:11,440
You can only select one out of all the radio buttons in a form.

63
00:04:11,570 --> 00:04:14,180
So in a set rather.

64
00:04:14,180 --> 00:04:19,520
So let's go ahead and open up a new div and we're going to make this of class custom control again and

65
00:04:19,520 --> 00:04:20,360
custom radio.

66
00:04:20,390 --> 00:04:24,470
So these this will style it with the bootstrap styling.

67
00:04:24,500 --> 00:04:26,570
And now let's go ahead and open up and inputs.

68
00:04:26,570 --> 00:04:32,960
We're going to open up an input I.D. debit card this time and the name is going to be payment method

69
00:04:33,470 --> 00:04:36,870
and the type is going to be a radio just like for the credit card.

70
00:04:36,890 --> 00:04:43,880
So following a similar structure a class will be custom control input and we're going to close that

71
00:04:43,880 --> 00:04:44,630
off.

72
00:04:44,630 --> 00:04:45,080
Okay great.

73
00:04:45,080 --> 00:04:48,430
Let's also make a label for this input.

74
00:04:48,560 --> 00:04:55,600
So we're gonna make a label for the debit card calling it by its I.D. and giving it the class custom

75
00:04:55,610 --> 00:05:02,720
control label and let's go ahead and not forget to close off that label tag there and the label is going

76
00:05:02,720 --> 00:05:04,370
to be debit card.

77
00:05:04,370 --> 00:05:04,790
Okay great.

78
00:05:04,790 --> 00:05:07,380
So now we have the label for the debit card setup.

79
00:05:07,460 --> 00:05:14,780
Now if you want to make one of these radio buttons checked by default all you have to do is add a checked

80
00:05:15,170 --> 00:05:16,580
keyword to it's input.

81
00:05:16,580 --> 00:05:21,220
So just here in the input you can add checked just like that to the input.

82
00:05:21,230 --> 00:05:23,410
And that means that this input will be checked by default.

83
00:05:23,420 --> 00:05:28,460
And of course the user can change it by checking another radio button instead and that will automatically

84
00:05:28,490 --> 00:05:30,130
uncheck this one and check the other one.

85
00:05:30,140 --> 00:05:31,550
So great.

86
00:05:31,580 --> 00:05:36,310
So now we have these two set up let's go ahead and add one more for people.

87
00:05:36,320 --> 00:05:40,900
So these are the typically standard payment methods credit card debit card or PayPal.

88
00:05:40,900 --> 00:05:44,650
Of course you can also add stuff like PVR stripe or Shopify.

89
00:05:44,810 --> 00:05:51,020
It's up to you to decide how you want to add the payment methods typically your client will tell you

90
00:05:51,020 --> 00:05:53,430
what they accept as a payment.

91
00:05:53,480 --> 00:05:58,220
So let's add one more because three is a good number for designs.

92
00:05:58,220 --> 00:05:59,090
We have two so far.

93
00:05:59,450 --> 00:06:02,680
Let's go ahead and add the option for PayPal.

94
00:06:02,690 --> 00:06:08,180
So we're going to go ahead and open up a new of class of class custom control and custom radio.

95
00:06:08,540 --> 00:06:13,520
And then I'm going to go ahead and close off that div and inside we are going to open up a new input

96
00:06:13,790 --> 00:06:19,940
with the idea people and the type to be a radio the name is going to be the same as for the previous

97
00:06:19,940 --> 00:06:25,520
ones just payment method which will put them all into the same group of radio buttons the same set and

98
00:06:25,520 --> 00:06:31,300
we're also going to give it the class custom control input as well as that's all we need for now.

99
00:06:31,310 --> 00:06:31,610
Okay.

100
00:06:31,610 --> 00:06:36,620
And remember if you want to make any of the inputs required you just have to either required a keyword

101
00:06:36,620 --> 00:06:45,740
and that means that the user will be required to select or enter an input for that specific set of inputs.

102
00:06:45,740 --> 00:06:45,950
Okay.

103
00:06:45,980 --> 00:06:46,250
Great.

104
00:06:46,250 --> 00:06:52,280
Otherwise it will not be required which means the user can submit the form without filling in that specific

105
00:06:52,280 --> 00:06:53,380
field.

106
00:06:53,390 --> 00:06:53,790
Okay.

107
00:06:53,840 --> 00:06:57,110
Let's go ahead and add also a label for this.

108
00:06:57,110 --> 00:07:04,820
People said so a label for people and the class is going to be customer control label which will make

109
00:07:05,150 --> 00:07:10,550
a label with bootstrap styling and forget to close off that label and put text inside the text in this

110
00:07:10,550 --> 00:07:12,050
case is going to be paper.

111
00:07:12,560 --> 00:07:13,040
Okay great.

112
00:07:13,040 --> 00:07:18,350
So now we have the radio buttons for credit card debit card and PayPal.

113
00:07:18,600 --> 00:07:26,510
What we would need more are the the fields for the name on the card as well as the expiration date and

114
00:07:26,510 --> 00:07:33,910
the security code as our standard for a a payment field.

115
00:07:33,920 --> 00:07:36,890
So let's go ahead and preview this before we add all of those.

116
00:07:36,890 --> 00:07:42,170
So I'm just going to go ahead and test this in the output so I'm going to watch the output and hide

117
00:07:42,170 --> 00:07:43,160
the e-mail.

118
00:07:43,160 --> 00:07:44,920
And as you can see I'll scroll down.

119
00:07:44,930 --> 00:07:49,520
And now we have here our payment header as well as our credit card debit card and PayPal options.

120
00:07:49,520 --> 00:07:53,840
Debit card is immediately selected but we can change them just like this and we can only select one

121
00:07:53,840 --> 00:07:55,070
out of the set.

122
00:07:55,400 --> 00:07:59,120
This payment to header is looking a bit small so I'm going to just change that to an H two.

123
00:07:59,180 --> 00:08:01,820
That way it will match the check out here.

124
00:08:01,820 --> 00:08:06,650
Also making it each three you should make a slightly bigger than this each for right now.

125
00:08:06,650 --> 00:08:09,890
But it would still be part of the checkout page which is the best option.

126
00:08:09,880 --> 00:08:12,090
So I'm going to change it to an h three.

127
00:08:12,170 --> 00:08:15,410
So I have to hide the output there and go back up here.

128
00:08:15,410 --> 00:08:15,710
Yes.

129
00:08:15,710 --> 00:08:21,110
Here we have the payment as an each for a header for we'll just make it in a header three.

130
00:08:21,110 --> 00:08:23,410
Now let's also add some padding to us.

131
00:08:23,420 --> 00:08:26,850
We can add padding on the top and bottom of five.

132
00:08:26,920 --> 00:08:27,110
OK.

133
00:08:27,120 --> 00:08:32,680
That will be set out a bit nicer you can change this as looks best for your design.

134
00:08:32,690 --> 00:08:33,170
OK great.

135
00:08:33,230 --> 00:08:39,440
Well so far we have our shipping address our payment information with the credit card debit card and

136
00:08:39,440 --> 00:08:40,270
people.

137
00:08:40,370 --> 00:08:46,040
The next lecture we're going to add a few more inputs for the card name the expiration date and the

138
00:08:46,040 --> 00:08:51,640
security code and then that will be everything that we need for the checkout page.

139
00:08:51,710 --> 00:08:52,730
Thank you all for watching.

140
00:08:52,730 --> 00:08:54,810
Congratulations on having made it this far.

141
00:08:54,860 --> 00:08:56,570
And we will see you in the next lecture.