I just watched my timer count down to zero, eventually hit zero, and then updated automatically over
to order expired.
So I'd say that the timer is working out pretty well.
Now, the last thing to do on this order show page is make sure that we have a page button whenever
user clicks on pay.
We need to show this little pop up right here where the user will enter in their credit card expiration
number.
All that stuff.
Remember that you and I are not going to be responsible for this form.
Instead, we're going to make use of a library from Stripe.
That's going to show this form automatically.
It's going to handle the credit card expiration date data.
All that stuff.
Once the user submits all that, it's going to give back to us a token.
You might remember discussing that token along with Stripe when we were putting together our payment
service.
So after a user submits this thing, we're going to get back a token on the react side of our application
and we will make a post request off to our payment service.
And a payment service will then be responsible for billing the user's credit card.
Now, to actually show this model.
We're going to install a library off of NPM.
So let's go take a look at the documentation for that right away.
At NPM Jasco AM, I'm going to do a search for React Stripe.
Check out.
Here's the first result.
And so if you want to, you could definitely take a look at the documentation here.
It is pretty easy and straightforward to use.
All you really have to do is import this library as stright.
Check out.
We're then going to show it as though it were a react component at a very minimum, we have to provide
a callback function to the token prop that is going to be invoked anytime a user submits their payment
information.
And this thing gets a token back from the stripe API.
So we are going to provide this callback right here.
That's going to receive that token.
And that's where you and I are going to make our post request to our payment service.
The other required property is these striped key.
That is the published publishable key, which we can get from our striped dashboard.
So if you go back to your stripe dashboard ad dashboard, that striped dot com, you can find developers
on the left API keys.
And that is the publishable key right there that we want.
Those are the two required properties.
But there are several other properties that we probably want as well.
So you can see a big list of all the other properties we can pass in.
The other one that you and I are probably going to want to provide is a mount that's gonna make sure
that we get the user's credit card authorization for a very specific amount of money.
We might also want to pass in the e-mail of the user as well.
If we pass in the email, that's just gonna make sure that the form kind of repopulates the users email
as opposed to require them to enter in their email again separately.
All right.
So those in mind.
Let's go over to our terminal, we're going to install reac striped checkout and then make use of it
inside of our order show component's.
So back to my terminal.
I'll change into our client directory.
And then do an NPR install for React Gripe.
Check out.
Get going to let it do its thing.
We'll come back together in the next video and make use that inside of our order show component.