This video is available to students only

Building Checkout Component

In this lesson, we're going to build the checkout component

Building Checkout component#

As we discussed in the last lesson, using Stripe elements will take care of the card state, so we have to design our page in a way that the design goes with what we already have. We can keep the payment form field on the left and the payment summary on the right with the payment button.

Let's start with the div with classname, checkout. 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 classname, checkoutform and another one with checkoutsummary.

Inside the checkout form, let's write checkout page inside h1 tag. Below this, we can use the Card from antd with title, Fill your Card details here. Since we want to keep the design as per our previously used styles, let's use form from antd, and create a form reference from Form.useForm. It needs to be vertical so let's give it a layout vertical.

Let's start writing our first Form.Item which will have name, cardName and inside rules, it should be required and the message can be Card name is required, and the name should have at least 5 characters. Label will be Name on Card. Let's now use the Input from antd and give it a name, cardName, as well. The placeholder can be 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; all the card related details will be taken care of by Stripe. So on top of our component, let's create a new state called cardName. We will need useState from React where the type of this value will always be a string. We can now create a handleChange function which will take event of type ChangeEventof type HTMLInputElement. We need to prevent the default behaviour first. After that, we will simply setCardName to be; you can add as many values as you need. I'm just telling you how to integrate the Stripe elements with your React controlled values. Now let's pass value to be cardName and onChange event to be handleChange.

Let's write another Form item with label Card Number. Here, let's import CardNumberElement from Stripe. Since we are not using antd input here, let's wrap this component inside a div with classname, stripe-input. Using this, we will style it as per our existing design. Because it's a Stripe element, we don't have to do anything to manage its state, so we can keep it as it is. Now I want to keep the Expiry element and the CVC element to be inline rather than having a separate line. We can wrap them inside a new div with className, inline. Now let's use Form item with label, Expiry data. Write a div with class, stripe-input, so that we can wrap the CardExpiryElement. The same way, we can write another form item for CVV, so we can write label, CVV, and import CardCVCElement.

Start a new discussion. All notification go to the author.