- Read Tutorial
- Watch Guide Video
So let's go ahead and hop into our code and start by aligning this component right. Because right now if you go to our application and you use this address I guess it's aligned but it's not really the way we want. So let's go ahead and hop into our code and let's get rid of the fields.
Okay, let's close out of everything, and let's open up just paymentForm.js in here we want to get rid of all these fields except for confirm, we want to leave confirm just so we have a reference. So we really actually want to do this, we want to get rid of all the fields.
Then what we'll do is change this to be called payment-form and we're good to go.
paymentForm.js
class PaymentForm extends Component { render() { const { className, handleSubmit } = this.props; return ( <form onSubmit={handleSubmit} className={`${className} payment-form`}> </form> ) } }
So really what we need to do is reference our shipping form because it's going to be quite similar, and we just did that. So in paymentForm.js we're going to want the fields in our design that are called Name on Credit Card, Credit Card Number, Expiration Date, and CCV. Okay, let's get Name on Credit Card and Credit Card Number in there right now.
So I'm gonna copy the first two fields from shippingForm and paste them into payment form okay, they're going to be called name and card. So replace all these names right here with card, be careful not to replace this name with card, I'm talking about this property called name.
Next thing we need to do is we need to replace this with a name, I guess we just did that. Okay, so get rid of the address and just copy name, these just need to be name and card. If that didn't make sense just look at my code and copy this down.
paymentForm.js
class PaymentForm extends Component { render() { const { className, handleSubmit } = this.props; return ( <form onSubmit={handleSubmit} className={`${className} payment-form`}> <Field className='shipping-form__name' type='name' title='Name' placeholder='Name' name='name' component={FormInput}/> <Field className='shipping-form__card' type='card' title='card' placeholder='card' name='card' component={FormInput}/> </form> ) } }
We got name and we got card as our inputs, so we got a name and we got a card. For the title name we're going to say Name on Credit Card, just like our design says. The next one's going to say Credit Card Number, so we're going to say that the title is Credit Card Number. Next thing we're going to do is give this a placeholder of 4 underscored dashes then a dash then four more underscore dash's a dash 4 underscores a dash and then 4 underscores, so that's going to be like our card right.
Next thing we want to do is check our app, so it looks like it's rendering these items. Let's go into our application and let's see what it looks like. Alright, we got these they're obviously not placed correctly but they're what we want right, we're getting there.
Let's go to VS code, let's change these classNames to payment form. So let's say payment form card, payment form name. Next thing we want to do is we want to get in... see how they're up here now? It was applying to our shipping form grid.
Next thing we want to do is we want to get in an expiration date and a CCV. Luckily we already did that with state and zip code right there, they're small like that. So we can put those in and copy the styles for them as well, so expiration and CCV.
I'm going to go to state and zip in our shipping form and copy these fields and paste them in, and then what we're going to do is we're going to put expiration and CCV. So the state one I'm going to replace all with expiration, the title is going to be Expiration Date and this one's going to be ccv, the title is going to be CCV.
paymentForm.js
class PaymentForm extends Component { render() { const { className, handleSubmit } = this.props; return ( <form onSubmit={handleSubmit} className={`${className} payment-form`}> <Field className='payment-form__name' type='name' title='Name on Credit Card' placeholder='Name' name='name' component={FormInput}/> <Field className='payment-form__card' type='card' title='Credit Card Number' placeholder='____-____-____-____' name='card' component={FormInput}/> <Field className='shipping-form__expiration' type='expiration' title='Expiration Date' placeholder='expiration' name='expiration' component={FormInput}/> <Field className='shipping-form__ccv' type='ccv' title='CCV' placeholder='CCV' name='ccv' component={FormInput}/> </form> ) } }
Now what we need to do is place these on our grid correctly, because right now what you'll see is that they're just four regular inputs okay.
Now let's go into our code, and for expiration it's not appearing for some reason the title. We'll deal with that once we align everything just to make sure it's not a problem with our grid. Alright sweet, so let's go ahead and let's apply some styles, so I'm going to go to payment.scss.
Now what we're going to do in here is very similar to what we're doing in shipping.scss so I'm going to hop over to shipping.scss on the right side here. And in here what we're going to want to do is say dot payment and we'll say grid row content start to content end, grid column is start to end. The reason it's lining up before we even did that is because in payment.js we're still using sign in.
So let's make sure we change this to payment, so in payment.js change these to payment because we need them to be payment. Now technically they don't need to be payment but when we get to the rows it will, but for the content where it belongs on the grid it doesn't need to be. Okay so now it will be lined up and with out this style it's not lined up okay, so just know that you have to put in these styles in payment.scss.
Now let's reference our form and let's copy this grid in our shipping.scss and paste that into our form. Right now let's think about the fields we need here, we obviously don't have a lot of these and they're named differently if we do. So in our design it's all over the place.
Back in shipping we have this many, we have about four layers here with the space whereas in here we only have three layers without a space. So let's go to vs code, let's get rid of the 35 pixel space and let's get rid of one of the layers, let's get rid of city.
Alright, so we're left with 3 64s and the rest of our stuff, let's name them now. The name is going to stay the same, address we're going to rename to card, state zip we're going to rename to date and zip, or we can call it expiration and zip because that's what we called the JSX. We want the space the line and the buttons, that's our code right now. All right the columns stay the same.
payment.scss
&__form {
display: grid;
grid-template-rows: [name-s] 64px [name-e card-s] 64px [card-e expiration-ccv-s] 64px [expiration-ccv-e] minmax(20px, 81px) [line-s] 26px [line-e buttons-s] 38px [buttons-e];
grid-template-columns: [back-s] 137px [back-e space-s] 40px [space-e pay-complete-s] 1fr [pay-complete-e] 1fr;
grid-row-gap: 15px;
}
Now let's say .payment-form and we'll put in our name and we'll say that we have a grid row of name start to name end. Let's put it in our card and say grid row card start to card end, let's put in our expiration and we'll say attach the zip to this as well, because they're on the same row.
So basically we're putting what we're putting here. So let's copy zip code and state here on the right side of my screen right in our shipping.scss we want to copy these.
&__state,
&__zipcode {
grid-row: state-zip-s/state-zip-e;
grid-column: back-s;
input {
width: 200px;
}
}
&__zipcode {
transform: translateX(226px);
}
The reason we want to copy these is because we need the same styles, we need the same input and we need to move the CCV over a bit, it's not zip I named the zip up here, we want to change this to ccv, I'm trying to be extra clear here. Now we'll change this right here the state-zip to expiration-ccv-end. Grid column is still going to be back start, I think... why is it back start, that seems strange, oh back start is right there for some reason I was thinking back start was the second button. Okay, so we're good there.
Let's go ahead and check out our application. All right, it looks a little off, we must have named stuff differently.
So let's check our html directly in the console here, payment form, name, card expiration, and CCV okay. That's because it says shipping form. We've got to go to vs code and we need to go back to payment form and we need to change all the shipping in here to payment, there we go.
paymentForm.js
class PaymentForm extends Component { render() { const { className, handleSubmit } = this.props; return ( <form onSubmit={handleSubmit} className={`${className} payment-form`}> <Field className='payment-form__name' type='name' title='Name on Credit Card' placeholder='Name' name='name' component={FormInput}/> <Field className='payment-form__card' type='card' title='Credit Card Number' placeholder='____-____-____-____' name='card' component={FormInput}/> <Field className='payment-form__expiration' type='expiration' title='Expiration Date' placeholder='expiration' name='expiration' component={FormInput}/> <Field className='payment-form__ccv' type='ccv' title='CCV' placeholder='CCV' name='ccv' component={FormInput}/> </form> ) } }
Now if we go to the browser you'll see it lines up better. Okay, it didn't line up better, payment form card expiration CCV, let's see in our code why this is happening. Expiration CCV, let's go to the ccv here, it's because we never changed state and zip code. So say expiration and let's say ccv here, then down here we obviously want to say ccv now it will work, look at our code here.
payment.scss
.payment-form {
&__name {
grid-row: name-s/name-e;
}
&__card {
grid-row: card-s/card-e;
}
&__expiration,
&__ccv {
grid-row: expiration-ccv-s/expiration-ccv-e;
grid-column: back-s;
input {
width: 200px;
}
}
&__ccv {
transform: translateX(226px);
}
}
Let's go back to our application and you'll see that everything is where it belongs.
The next thing we need to do is add in the line and the buttons which we can do really quickly. Let's head over to our code and let's take in the line, the back, and the use this address. Let's take those and paste those into our payment form. Let's then rename use this address to pay-complete, let's then rename all of these use this address instances.
See how I'm changing the column here? Let's change it everywhere in this file, so it should occur four times two times here in our pay-complete and two times in our actual grid set up let's change this to pay-complete. Notice how this is very similar. Let's go ahead and let's go to paymentForm.js and let's put the JSX in for the line, back, and payment complete.
Okay, so very similar to our shipping form, we have line, use this shipping address, back, let's copy that and pasted it into our application in paymentForm.js. So I pasted in the line use this address and back. The next thing we want to do is rename shipping and put these as payment.
paymentForm.js
<div className='payment-form__line'></div> <Field className='payment-form__pay-complete' onClick={() => history.push('/information/payment')} type='submit' title='Pay & Complete' name='pay-complete' component={FormButton}/> <Field className='payment-form__back' onClick={() => history.push('/signin')} type='button' title='Back' name='back' short={true} component={FormButton}/> <OrderSummary className='payment-form__order-summary'/>
Okay so make sure you understand what's going on here right, we're just doing the same exact grid so it's really easy. What I'm trying to show you here is that CSS grid is very powerful and components are really powerful, that's the whole point of react, like I've said a million times.
Let's rename use this address to pay-complete and let's say that the title is Pay & Complete. Let's go check our design or our application and see what it looks like. Alright, you'll see we quickly add in the back and the pay & complete buttons.
So really really simple and we've done it a million times, that's why this is so easy. The next thing we need to do is add in the order summary and the shipping to, let's do that right now. The order summary is literally the exact same thing in this component as it is in shipping form.
So what we're going to do is copy that and paste it in here. So we have order summary with a className of payment-form__order-summary. The next thing we need to do is scroll up to the top and import OrderSummary. So type in import OrderSummary from ./orderSummary.
Okay next thing we need to do is align it on our grid because right now we check our application. It's just going to be in the same place as it was when we were developing it right, remember it is over here on the other grid. So what we need to do is go into vs code and we need to go to payment.scss and we need to put it in where it belongs. So just like in shipping to my right you can see that if we say order summary grid row name start and grid column use-this-address to end over -1 it will put it right where it belongs if we say justify self is end.
Okay let's try it out, you'll see it's right where it belongs.
Now the line is not, the line needs to extend all the way. Let's go see if it is in our Login, okay it is in our Login. Let's see if it is in our payment, so it's in our Shipping Address, but then when we go here to the Payment Information it's not extending. So we need to make sure that it's extending all the way by adding a grid column to that line.
So we're applying that grid column to line but for some reason it's still not extending all the way. So the way we can fix this is by going to order summary and setting the grid column to instead of use this address to pay & complete start. It was just blocking it off because it's saying hey where does this exist on the column? Nowhere? Let's just autofill it to the last column, let's just fill up the rest of the space so it's saying that basically the column ended, the entire grid ended at the start of order summary which means line was ending at the start of order summary.
Let's try this again, and it looks good to me.
We just need one more thing and it'll be really quick to add, we need to add in this Shipping To.
So the thing is we need to get this data straight from the user object, we need to fetch it from a database. So I'll leave that for the next video because this video is already really long. I thought we'd end it in this video but as soon as I remembered this is coming from a user we need to fetch it.
So let's go ahead and commit our code and we'll finish the front end portion of course in the next video.
Terminal
git status git add . git commit -m "built payment form"
Okay, I'll see you in the next video.