Now, we are going to introduce some animations that will be useful while waiting for the payment operation. So, we are going to show a progress bar. So, progress bar value will be the progress of this progress bar and interval it will be, of course, the interval reference that we use in the start progress bar animation so, the animation would be not related to the real state of the request. So, it would be simply an animation that does plus five to the progress bar value So, what we do is to create a set interval whose function will get the progress bar value, and we'll check if the progress bar value is 100. Then we start back from five. Otherwise we'll add five to the progress bar value.

So if progress bar value is 100 then we start again. Otherwise we increment a little bit. So then we need to set back the progress bar value in our state. Here during the registration, I did a mistake of course. This value default animation interval has to go Of course, in the set interval function and not in set state sorry for that. And remember that default animation interval is in milliseconds.

Now we are going to stop the interval ID a clear the interval in component will amount. This is because we don't want to risk to have the I mean the interval function to update the state of our component if our component is unmounted. So we are sure here that when the component will unmount our interview We'd be cleared Okay. So now we are going to go to the handle submit function, what we have to do is to prevent the Submit of the form so we use the prevent default function over the event Param we start the progress bar animation, we check again we have to be sure that the prop stripe object is its present and we use the Create token function. So, when the operation when they create token operation succeeds in our payload, we will have the token and or the error or the error object.

So, if the token is present, we can perform our payment, otherwise, we will handle the error in a graceful way. If the stripe object is not present we will vote the user anyway. In this case we should have it because we have this control before in the render method that should prevent to reach that code if the stripe object is not present It's now time to add submitting state property in the state that will be true if and only if we are submitting our payment request. So, when the submitting property of our state is through, we can showing our progress bar whose value will Be our progress bar value from the state that we'd be changed by the start progress bar animation method. If you're not submitting we can show button to submit the form so we will use a pay button. We are going to define these soon that these disabled if our stripe object is not ready we can have a pay now message for now.

So okay so what we can do is to just copy and paste Some style from the stripe guide, so we can add in our layout file and we export our pay button in this way so we import the pay button here and the there is some error here. This is because we missed some brackets. So we are now ready to continue with our code.