In the last section we finished up the payments component.
We then import it into the header and we were just about to use it inside of our switch statement at
the case in which a user is logged into the application which is of course when we actually want to
show that payments component on the screen.
Now at the very end there I paused and I said very quickly I need to update my re-act version.
We're about to do something that doesn't work quite so well with older versions of re-act which is what
I kind of erroneously had inside of my project right before this because I was kind of testing something
out with an older version of react.
So that was just a real quick side thing shouldn't actually impact our project at all.
So back to the task at hand when we hit the return case right here we want to make sure that we return
the log out button still.
But we also want to return the payments component as well.
Now traditionally we would wrap this thing with like a component or another element like say a div or
a UL but if you recall whatever gets returned from rendered content right here is going to be stuck
right into this.
And so semantically from an e-mail standpoint it doesn't make any sense to have a UL and then a div
and then a list of lies.
So rather than putting in some intermediate component or some intermediate element that we're going
to instead return an array of elements.
So I put down my return keyword or put down the array and make sure that I clean up the semi colon that
was at the very end of this line.
So no semi-colon over here anymore.
And then right above this component we're going to place another lie that shows the payments component
that we just put together right above it all say Eli.
And inside of their payments.
Oops not that but payments like so.
And I forgot my comma at the end.
OK.
So let's test this out inside the browser.
Now I you know flip back over there's the refresh if you have your console open and you put down that
same debugger statement that I did.
You might notice that it pauses in execution right here.
So I'm currently paused inside of the payments component.
So before we kind of test all this stuff out I want to go back are the payments component.
Remember we just put in the debugger right here.
And I said that I wanted to show you what happened to the stripe key.
So in the striped key property right here we referenced process start EMV dot react up stripe key.
One very important thing about environment variables is that the value of this environment variable
is injected into this kind of slot right here.
When our re-act application is actually built by Create re-act up.
So when this code runs inside the browser the word processor EMV dog react blah blah blah does not actually
exist.
It gets entirely replaced by the actual key.
And that's exactly what I wanted to show you with the debugger statement.
So if we go back over to our code base or we go back over to our running code inside the Krumm Council
Here's the debugger statement here's the start of all the GSX and then the actual Propp that we're passing
in is streite key right here.
And notice that we are passing in a string here.
So the actual key was taken from the EMV file the process start EMV blah blah blah gets ripped out.
And the key is stuck in its place.
So when your project is actually built by Create react up you don't end up having any of these process.
Ian VI variables sitting around I just thought that was kind of interesting.
OK let's finish testing this stuff out.
So I'm going to remove the debugger statement I'll save the file and then I'll go back over and I'm
going to refresh the entire page.
OK.
So when I do you'll notice this.
Well there's no easy way to say it.
Hideously ugly button at the top.
That is awfully ugly.
Yes it is.
But when we click it we get this awesome little pop up that request our users credit card number the
expiration date the security code and then asks them to pay $5 an awesome and you can see at the top
right it clearly says test mode which tells us we're still running our account in test mode.
So it looks like we have done the initial setup of or react stripe check out successfully.
Now one last thing I want to test I want to show you really quickly I'm going to open up the console
really quick inside of here.
You're going to see a warning because we are returning an array from that render content method inside
the header Xeres rendered content where returning an array every time we return an array re-act thinks
that it's a list and that we need to provide a key.
So that's what this warning right here is saying will take care of that in just a second.
But right now I want to focus on the actual credit card form.
So you'll recall that when we put the payments component together we said that whenever we got a token
back from Strype we should just cancel it like that was the callback that we provided to the component
we said just cancel that token we get back.
So I want to fill out this form and then take a glance at the token that we get back from Strype So
for the e-mail is is all test data that we're putting in right now.
So we're not going to put in an actual credit card number or put in a junk email and then the credit
card number that we put in here.
Remember when you were in test mode with Strype the explicit purpose of test mode is to give you the
ability to put in fake credit card numbers that you can use to just kind of arbitrarily charge any amount
of money to.
And it's just going to work obviously in test mode.
And no don't try to use these credit cards you know to actually buy something there.
They're completely fake they're just for stripe test mode.
So the test credit card number that we're going to use throughout this course is a very special number
so you can't make your own up.
This is a very special number that you have to use.
It's 4 2 4 2 4 2 4 2 4 2 like so it's really easy you can just press for two for two and your keyboard
over and over again until you get to the very end.
You don't have to actually count out like OK.
Four to four and so on.
You know just keep pressing for you then we'll do our expiration to make sure that the expiration is
sometime in the future and we can put in any three digit for the CVC will then hit pay.
Now it looks like OK that's successful and then we see a console log over here that represents the pending
charge or the sort of authorization for the charge that was just created.
So you'll notice here that it is not just a standalone token even though that's kind of what I'd said
this thing was and definitely made it sound like the thing was from the callback.
And right here we see the word token but it's really an object that represents the entire charge.
The closest thing to a token that exists inside of here is the ID property.
So this id property right here really kind of represents you can kind of imagine the token kind of represents
the pending charge in memory is that this idea is essentially what we really care about with this idea
right here.
We can make a follow up request from our API server over to Strype and say OK I want to actually build
this person for X dollars now you'll see a couple of other properties inside of your.
We get some stuff back like say client IP that's mostly relevant from a fraud standpoint.
There are a couple outside services out there that can help you reduce fraud.
If you take some of this information and pipe it into these outside fraud prevention API.
So it's not something that's really relevant for us created.
Is the time stamp of when we created this charge e-mail the user of course live mode is false because
we are still in test mode type of card because we paid with a credit card and then you'll also notice
this card property on here.
It's an object which contains a couple different properties about the credit card that was just entered.
Now we do get the address the city state zip of the person who belongs to the card or who owns the card.
But you'll notice very importantly we don't actually get the actual credit card number back here.
The most we get are the last four digits of the credit card which are for two for two in our case so
we can keep the last four digits if we wanted to some time at some point like some for some reason ask
the user to like verify their identity inside of our application.
You know we can always make use of the last four but in general obviously again we never touched the
entire credit card number.
OK.
So looks like everything worked correctly so I can take a quick break.
When we come back we're going to talk a little bit about how to make this button look a lot nicer than
how it looks right now.
And we'll also talk about what we're going to do with this token now that we've actually gotten it from
Strypes servers.
So quick break.
We'll come back and we will also reserve our take care of that little warning about the key.
At the same time as well.
So let's deal with all that stuff in the next video.