Building Checkout Component

[00:00 - 00:10] Like we discussed in the last lesson, we will use Stripe Elements to take care of the credit card state. So we have to design a page in a way that the design goes with what we already have.

[00:11 - 00:26] So we can keep the payment form field on the left and the payment summary on the right with the payment button on the summary. So let's start writing it and let's start with a div with class name checkout.

[00:27 - 00:36] And as we discussed, we will keep the form on the left and summary on the right . So we can create two more divs, one with class name checkout form.

[00:37 - 00:50] So let's write checkout underscore underscore form and another one with checkout summary. So let's write checkout underscore underscore summary.

[00:51 - 01:04] Inside the checkout form, let's start with the heading and let's give it H1 and let's just simply call it checkout page. Below this, we can use card from @d.

[01:05 - 01:23] So here, let's import card and this card will have a title and let's call it fill your card details here. So fill your card details here.

[01:24 - 01:36] And since we want to keep the design as per our previously used styles, let's use form from @d. So inside the card, let's import form.

[01:37 - 01:48] And on top, let's create a form reference. So here, let's use form, which is equal to form dot use form.

[01:49 - 01:56] And we can pass this reference to this form. So form is equal to form.

[01:57 - 02:04] The form should be vertical. So let's give it a layout of vertical.

[02:05 - 02:22] Now let's start writing our first form item. So let's write form dot item and let's call it card name because this will carry the name on the card.

[02:23 - 02:34] So let's call it card name and it also should have some rules. So let's write rules.

[02:35 - 02:41] So first of all, it should be required. So let's write required to be true.

[02:42 - 02:55] If there is an error, let's write a message, which should be card name is required. And for now, let's give it a minimum length of five characters.

[02:56 - 03:04] We also need the label. So label can be name on card.

[03:05 - 03:15] Now let's use the input from @d. So inside the form item, let's import input.

[03:16 - 03:22] And this will have name same as the form item. So let's call it card name.

[03:23 - 03:37] And also, let's mention the placeholder, which is mention the name on your card . We now have to write the state for card name because this is the only thing we are going to manage from react.

[03:38 - 03:46] All the card related details will be taken care by stripe. So on top, let's create state for it.

[03:47 - 03:57] And let's call it card name. So const card name and set card name.

[03:58 - 04:02] And we will use use state hook from react. So let's write use state.

[04:03 - 04:10] And this will have a type string always and the initial value can be an empty string. We can now create a handle change function.

[04:11 - 04:23] So let me write const handle change. This will have an event and the event will be of type change event of type HTML input element.

[04:24 - 04:27] So right. And put element inside this function.

[04:28 - 04:38] We simply want to set the card name to be e dot target dot value. You can add as many values as you want.

[04:39 - 04:48] I'm just telling you how to integrate a stripe elements with your react control values. Now let's pass the value inside the input.

[04:49 - 05:04] So value will be card name and the on change event will trigger the handle change function. Below this, let's write another form item.

[05:05 - 05:12] So let's go a bit up. This will have a label of card number.

[05:13 - 05:30] So let me write label is equal to card number and inside we are not going to use input from and D, but we will use card number element from stripes. So let's write card number element.

[05:31 - 05:38] This one, that's important. And since we are not using and the input here, let's wrap this component inside a dev.

[05:39 - 05:54] And let's create a dev with class name stripe input. And now we can keep this element or component inside the stiff using this stuff .

[05:55 - 06:03] We will style it as per our existing design. And because it's a stripe element, we don't have to do anything to manage its state.

[06:04 - 06:13] So we can keep it as it is. Now I want to keep the expiry element and the cvc element to be in line rather than having a separate line.

[06:14 - 06:25] So what we can do is we can wrap them inside a new diff. So below this form item, let's create a new diff with class name in line.

[06:26 - 06:35] Now let's again call form dot item. And this one will have a label of expiry date.

[06:36 - 06:51] So let's write label is equal to expiry date. And again, we will write class stripe input and inside we will wrap the card expiry element.

[06:52 - 07:00] So let's write card expiry element. The same way we can write another one for cvv.

[07:01 - 07:07] So below this form item, let's create another one. Let's write form dot item.

[07:08 - 07:22] And this one will have a label of cvv. Again let's use the div stripe input.

[07:23 - 07:35] And here we will use card cvc element. This is how the checkout form will look like.

[07:36 - 07:53] Now let's start working on the checkout summary component as well. So inside components, let's create another one and we will call it checkout summary.

[07:54 - 08:08] Let's start by creating a function. Check out summary and exporting it.

[08:09 - 08:14] And now I'm very clear on how it should look like. So let's start writing it.

[08:15 - 08:25] Let's write return statement first and inside let's start with the react fragments. And on top, I want to cover it with a card.

[08:26 - 08:35] So let's import card from anti. Let's start by giving it a heading which is called summary.

[08:36 - 08:43] So let's say summary and below that I want to create a divider. So we will use the divider from anti itself.

[08:44 - 08:56] So let's call divider and this will be horizontal. So we can give it a type horizontal.

[08:57 - 09:03] Below that we want to create a total. So let me create a new div with class name checkout summary total.

[09:04 - 09:12] So let's write checkout_summery_total. So we will use two spans.

[09:13 - 09:19] One which will say total and another span will have the price. So let's create the first span.

[09:20 - 09:30] It will simply say total and another span will have the price. And to get the price we need the basket.

[09:31 - 09:47] So let's import basket. So here let's use const basket for which we will use app selector hook which will have the state and we will use it from state.basket.

[09:48 - 10:14] Now let's write the total for which we will use the reduce function on the basket items. So let's write const total which will be equal to basket.items.reduce and inside this function we will have access to the accumulated sum and the item and we simply want to return the total.

[10:15 - 10:32] So what we can do is write sum plus item.price and we can give it initial value of zero. And now inside this span I can use a dollar and inside we can write the total.

[10:33 - 10:39] So this we can use another divider. So let's simply copy it and paste it.

[10:40 - 10:48] And finally we will use the button from Andy. So below this let's call a button from Andy.

[10:49 - 11:01] This button will have a type primary. So let's call type primary and the class name can be check out summary button.

[11:02 - 11:11] So check out underscore summary underscore button. We also need the size to be large.

[11:12 - 11:24] So let's write size is equal to large and this button will simply say make payment. So here we can write make payment.

[11:25 - 11:35] Now let's import this component inside the checkout component. So here and inside checkout summary we can use the checkout summary component.

[11:36 - 11:43] And here it is. Finally copy the file with the name checkout dot SES from the code below.

[11:44 - 12:02] And after that inside SAS pages create a new file with name same name actually. So let's call it checkout dot SES page the code here and import it inside the main file.

[12:03 - 12:16] So let's use import and import from pages slash checkout dot SES. Now we can open the browser to see how the page looks like and for that we'll have to run the server.

[12:17 - 12:26] So let's say npm start. So opening the browser make sure you're login because our component is inside a private route.

[12:27 - 12:45] So I will use student at the rate test.com and the password. Now let's add something to the cart and now let's click on checkout.

[12:46 - 12:51] And this is how our checkout page looks like. So, now let's start making it work from the next lesson.