Hello everyone and welcome back to our bootstrap course.
In this lecture we're gonna be adding more to our checkout page.
We are going to be adding payment fields so information about your credit card or what kind of card
you want to use the name on the card et cetera.
So let's go ahead and open up our each email tab and hide the outputs that we can see this.
I'm going to zoom in a little.
OK so we're going to add this as a divs right below what we already have.
So we already have our form here for information.
And this is still going to be in the form but it's going to be outside of all the other deaths.
So just above or the forum and below that row of the div or to add in pigment.
So let's go ahead and add in another header in fact and we can make a header that will say payment.
So we're going to make it in each for doing each three add we're going to first add some spacing.
So we're going to give it the class and be three which was spaced out with bootstrap and let's close
off the header for and this is going to be the text payment.
So this is going to be another title just like we have already appear for checkout where we had the
checkout.
Let's see where it is it just going up a little bit higher.
We had checkout.
Now this we actually made an H2 with a display for.
So if we want to be consistent we can keep the same structure and make as each to the display for we
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
it.
OK.
So right now we have it as an inch forward just fine.
Let's go ahead and continue on by making another div and this is going to be of Class D block and we're
going to give it the margin at the top and bottom three with m y three.
And this time we're going to open up this div and we're going to make some radio buttons radio buttons
are kind of like bullet points that you can select and the user can select one of them to determine
what they want to pay with.
So we're going to open up a new div and it's going to be of class custom control and custom radio.
Now you can make custom radio buttons with each team out and see asset's vanilla Chanel and see Asus
but by making it with the bootstrap class just like we have here using the bootstrap class custom control
and custom radio bootstrap will automatically style your buttons your radio buttons for you and it will
be much more efficient.
So we're going to use bootstrap for radio buttons.
Let's go ahead and make our first input field.
Now each of these divs with the class custom radio will make its own bullet point so in the first bullet
point we going to have an input and we're going to allow the user to select credit card debit card people
et cetera.
So let's make an input with the credit card and we're going to give it the name of payment method and
then we're going to give it the type of radio.
So that means that this input will be recognized as a radio input which is different from a type of
text which means you would just input text by putting the time to be radio each e-mail will automatically
make it into a radio button.
And then the CFS will be styled with bootstrap styling.
OK great.
Let's also add the class custom control input and we can close that off.
Great.
So that is what we have for the input.
Let's also add [REMOVED].
We're gonna make a new label in a court of class custom control label and it's going to be for the credit
card I.D..
And let's go ahead and close off that label.
And here we can put any tax credit card and this will be the tax associated with the radio button.
Okay great.
Let's go ahead and make a few more.
Before we preview this.
So right now we have this one radio button and we're going to go ahead and make another one all still
in this containing div.
So just below that Dave let's go ahead and make a similar structure for a debit card.
So the user want to pay with the debit card they would select this radio button with radio buttons.
You can only select one out of all the radio buttons in a form.
So in a set rather.
So let's go ahead and open up a new div and we're going to make this of class custom control again and
custom radio.
So these this will style it with the bootstrap styling.
And now let's go ahead and open up and inputs.
We're going to open up an input I.D. debit card this time and the name is going to be payment method
and the type is going to be a radio just like for the credit card.
So following a similar structure a class will be custom control input and we're going to close that
off.
Okay great.
Let's also make a label for this input.
So we're gonna make a label for the debit card calling it by its I.D. and giving it the class custom
control label and let's go ahead and not forget to close off that label tag there and the label is going
to be debit card.
Okay great.
So now we have the label for the debit card setup.
Now if you want to make one of these radio buttons checked by default all you have to do is add a checked
keyword to it's input.
So just here in the input you can add checked just like that to the input.
And that means that this input will be checked by default.
And of course the user can change it by checking another radio button instead and that will automatically
uncheck this one and check the other one.
So great.
So now we have these two set up let's go ahead and add one more for people.
So these are the typically standard payment methods credit card debit card or PayPal.
Of course you can also add stuff like PVR stripe or Shopify.
It's up to you to decide how you want to add the payment methods typically your client will tell you
what they accept as a payment.
So let's add one more because three is a good number for designs.
We have two so far.
Let's go ahead and add the option for PayPal.
So we're going to go ahead and open up a new of class of class custom control and custom radio.
And then I'm going to go ahead and close off that div and inside we are going to open up a new input
with the idea people and the type to be a radio the name is going to be the same as for the previous
ones just payment method which will put them all into the same group of radio buttons the same set and
we're also going to give it the class custom control input as well as that's all we need for now.
Okay.
And remember if you want to make any of the inputs required you just have to either required a keyword
and that means that the user will be required to select or enter an input for that specific set of inputs.
Okay.
Great.
Otherwise it will not be required which means the user can submit the form without filling in that specific
field.
Okay.
Let's go ahead and add also a label for this.
People said so a label for people and the class is going to be customer control label which will make
a label with bootstrap styling and forget to close off that label and put text inside the text in this
case is going to be paper.
Okay great.
So now we have the radio buttons for credit card debit card and PayPal.
What we would need more are the the fields for the name on the card as well as the expiration date and
the security code as our standard for a a payment field.
So let's go ahead and preview this before we add all of those.
So I'm just going to go ahead and test this in the output so I'm going to watch the output and hide
the e-mail.
And as you can see I'll scroll down.
And now we have here our payment header as well as our credit card debit card and PayPal options.
Debit card is immediately selected but we can change them just like this and we can only select one
out of the set.
This payment to header is looking a bit small so I'm going to just change that to an H two.
That way it will match the check out here.
Also making it each three you should make a slightly bigger than this each for right now.
But it would still be part of the checkout page which is the best option.
So I'm going to change it to an h three.
So I have to hide the output there and go back up here.
Yes.
Here we have the payment as an each for a header for we'll just make it in a header three.
Now let's also add some padding to us.
We can add padding on the top and bottom of five.
OK.
That will be set out a bit nicer you can change this as looks best for your design.
OK great.
Well so far we have our shipping address our payment information with the credit card debit card and
people.
The next lecture we're going to add a few more inputs for the card name the expiration date and the
security code and then that will be everything that we need for the checkout page.
Thank you all for watching.
Congratulations on having made it this far.
And we will see you in the next lecture.