Okay, so we are going to create our cart form using react stripe elements, please install it and the index dot HTML file we are going to add our script tag with ID structure Yes, and the source as the stripe library. Then we create a car form.js file in the screens directory and we create our component that will contain the cart for so we import some required modules and we can create the cart form class that extends component as usual. And we create the constructor. Then we are good to define some card element options that we will use later. And this will be basically some options that will pass to the card element component of react. So we styled the base form so we set the font size, the color letter spacing and we start the placeholder without a gray color And we've styled the invalid message color.
And we started start to bind some functions that we're going to define later. And we will use these functions to handle some events from the current element component. So the blur event, the change event, the focus event, then the Submit event and the 3d event so Right now we just define these functions as to do they are not mandatory. Of course, you can do some useful stuff here. For example, okay, of course for the assembler, you can guess easily while they are even change. But what is important maybe here it's ready because when the ready event is triggered, it means that the cart element can receive focus.
So for example, you can force focus on this element in the handle ready function. The handle submit will be very important because we are going to submit the payment request with our token here inside. So let's start to create skeletal So okay here we create some elements. So for example the pay for that it's basically a four and we are going to add some space basically a big round and again some padding and a border race. Then we create a label. So we are styling the HTML label and we define the color And the font weight and the letter spacing okay.
So, he here we are basically returning the pay for so a for whose submit events will be handled by the handle submit function that we have defined. So, here inside we are going to create a label you can have the message you want for example later we cannot even the articles title or any other reference. Then if the stripe property is defined we will see Soon how this would be defined. If this if it's defined, we are ready to create the cart element. We hide the postal code. And then we define some haven't handler between defined and discussed before.
Change on focus and on ready and we pass the options as defined in the constructor. If the stripe object is not present, we just are I mean, we can show loader or something like that. Right now we just say to the user that We are not still ready. So we use the index stripe higher order component to provide the this props stripe property that manages our elements groups. You can check the higher order component definition in react