We are going to show the positive feedback to the user that big basically is composed by a simple checkmark inside a column and we will give even an order number that will simply be the transaction ID received by stripe. So as to create the thank you component. Some of you we will like to use all the functional component because you we have all the render method anyway in this case is not the purpose of this course to analyze these kind of topics. So, let's take an order number Prop, a number none the property from the props and we are going to return center div. We use the text center class from bootstrap. Then we can for example, inform the user saying thanks for your purchase and sound kind of my search your there was successfully place it.
And basically what we can do here is to create a thank you component that has its side. a checkmark the checkmark. html entity is the following one. 04 and inside we can have a div with the order number. You can even have directly the order barber that basically contains the, the order number written IDs. And we can even think of other known simple methods such as say you will receive your article in three, five, this So, let's go to use this component.
And as you can see from our cut for component we already have the pushy success successful and purchase transaction ID We import the thank you component. So let's go into use these two parameters in our render method. So what we are going to do is okay like this. So, what happens here, if per purchase is successful, we are simply going to return the thank you component in which the order number is set to purchase transaction ID. Otherwise, we show the classical for to see our order in place so, just to be sure that everything is working correctly, we try Again the worst case so when the sorry when the card payment is declined. So, for example this should be if I recall correctly okay so this works fine when the card is declined we see the error message now let's go to see what happens when the form is submitted with a valid card and here it is.
So we have the stripe transaction ID and we have our thanks for your purchase my such with the checkmark and so on. So, okay this was as you can see, the card declined error that we had before. And this is what we received when the successful API call was submitted. So, in the field, we have the transaction Id just to be sure we just check what happens okay, this is not so good we will of course, as an exercise you can give some margin here and some space here anyway, it I mean, the column works fine. So, this concludes our course, we have seen. So how to create a very simple, a very simple page that displays some articles with the chance to filter for types or to search by some terms and to submit stripe payment using get token that too you retrieve thanks to a very catchy stripe credit card for Thank you, everyone and I hope to see you in the next course.