I've now installed the rack stripe checkout module, so inside of order show at the very top, I'm going
to import stripe checkout from react.
Right, checkout.
Then right now, I'm always going to show an instance of this thing down at the very bottom where we
have our timer for right now.
Don't say that, David.
Right after all that text.
I'm going to put in react or see me just straight checkout Erico.
And then I'm going to make sure they pass this thing to required properties of the two required properties
are Tolkan, which must be a callback function.
Right now, I'm going to receive the token that we get back from this little component.
And I'll just console's the token.
The second thing we have to provide is our stripe publishable key.
It's going to put in stripe key.
I'm then going to go back over to my striped dashboard.
Here's the publisher Wicky going to copy that and throw it in directly right there.
Now as the name implies, publishable key means that we can safely share this with the outside world.
So there's no security risk if someone gets their hands on this publishable key.
Having said that, it's not always really great practice to have a hardcoded key directly inside of
your code.
So it'd be a little bit better if we instead extracted this thing into a separate helper file or something
like that.
Even as an environment variable or even a Cuban, that is secret at this point.
I'm going to leave that up to you because we've gone to the process of creating secrets and Biman variables,
all that stuff quite a bit throughout this course.
Do keep in mind, though, that this will be an environment variable that's going to be used with next.
You might want to take a look at these striped I mean, the next day has documentation and just take
a look at how they handle environment variables.
For me, I feel totally fine just during the key directly in here right now.
After that, we're then going to specify the amount that we want to pay, so the amount is going to
be on the order that we received as a prop.
And if we forget what we will actually once reference on there, we can always go take a look at that
order inside of our request log.
So here it just refreshed.
I lost my request, log on to create another order.
There's the request for the order right there.
So on the order that we get back or the ordered that we have as a prop, we have the ticket property
and inside there is the price.
So we want to take.
Order, dot ticket, dot price, and then remember everything around stripe treats, amounts or prices,
costs, however you want to refer to it as sense as opposed to U.S. dollars.
So we're going to take our price and multiply it by one hundred.
Finally, I'm going to add on a final processing of email.
So how are we going to get the user's email inside of here?
Well, let's remove that e-mail proper just a second.
We will add it back in.
But first, I want to understand how we can get the user's email inside this component.
You might recall that a little bit ago inside of our app component, which is rendering our child components
in this case.
That includes order show.
Inside of our app components, we get access to the current user and we pass that into our child component
as a prop called current user.
So technically, our order show components, the one that we are working on right now, receives a prop
of current user.
So we're going to want to take that current user prop, and you might recall that inside there is the
user's email address.
So we should be able to add in.
E-mail as current user dot, email like some.
OK, so that is all we should need to get started with Stripe.
So let's save this.
I can flip back over, as usual, my order has already expired.
So let me go back.
Create a new order.
And now we get this.
Pay with card button so I can click on that and that will show my little pop up window.
Notice how the e mail is already displayed right there at the top.
So the user does not have to enter that separately.
Now, all we have do is put in twenty dollars and we are good to go.
Well, don't worry.
You do not have to put in a real credit card number here.
It turns out that very similar to those test tokens that always work, always succeed.
There's something very similar for credit card numbers as well.
So let's take a pause right here and then test out this little window in just a moment.