In the last section we finished up a lot of initial configuration around all the Strype API keys.
So now we should be ready to go on the front end and the back end no further configuration necessary.
Now at this point we're going to start to wire up that re-act stripe check out component.
I want to remind you that you can really check out all the documentation around it at the get home page
that it's hosted on worry.
We're essentially going to go through the basic use of it.
Feel free to look out the requirements here and all of this stuff you absolutely can.
You don't have to though because we are really going to cover all the basics that you need to know.
All right.
So before we start to make use of this component I want to make one thing clear about what this thing
really truly does.
Right out of the box.
So if we go back to a mockup remember that at this point in time we've said Oh yeah the header should
have this button that says like add credits and if you click that you should see some interface or something
to add some money or like give us your credit card number essentially.
We also looked at a diagram that showed the credit card form.
And remember we had said that this form would be generated by the Strype checkout library.
So to be clear to kind of set expectations on what that Riak stripe check out component is really doing
when we render that thing as a react component it shows a button that says Buy now.
So by default when you render that component it shows a button that the user can click when they click
it when they actually click it.
Then the form will appear on the screen.
So extra.
Check out.
It is not the actual checkout form per se.
By default it shows a button which the user can click and that will then actually load up the credit
card form.
So at this point we are going to create a new component whose sole purpose is going to be to do a little
bit of configuration of react striped check out after we create that component.
We will then place it into the header component of our application so that it can properly display its
button up in the header.
Then whenever a user clicks it OK then the checkout stuff takes over and form appears in the middle
of the screen.
OK.
All right so let's get this shot.
When you flip on over to my code editor and find my client directory Here's my source directory and
find my components folder and inside there I'll make a new file called payments.
Jesus right now the name of this thing payments you know I just picked it off top of my head.
You can call this stripe wrapper or stripe billing whatever you want.
I just decided to call it payments.
Now again we're going to make our own component that sort of wraps the striped check out thing and passes
it a couple of configuration options.
So we are going to make a re-act component of our own inside this file.
We will also import the re-act stripe check out component and showed that inside of our own component.
So let's get to it.
I think that once we start putting the code together it'll make a lot of sense.
So I'm going to make a class based component so I'm going to import both react and component from react
and hey why not let's get this done with right now let's import streite check out from re-act stripe
check out.
You will notice that I'm kind of breaking naming convention here.
The library is called Riak stripe check out but I called it only Strype check out.
That's because honestly we don't need the react word in there.
You know we know this is for react and putting on reac doesn't really bias anything.
So I'm just leaving it off.
OK.
Now we'll make our class payments extends component inside of here we have our render method and in
here we will return our one singular component which is the Strype check out component.
So I will place Strype Check out like so at the very bottom I will export default payments.
OK.
Now before we go in wire this up to the header we might as well do a couple of the required configuration
options that we need for handling this stripe checkout thing.
So the first required property that we have to put in here to get the thing to work the way we expect
is going to be the amount of money that we want to request from the user.
So the prop is called a mount.
Now this is going to be just a little bit tricky to understand the amount right here.
When I think about the amount of money that I'm paying someone my mind immediately goes to US dollars
because I'm from the U.S. You know I live in California and I've got you know OK.
Probably like $2 in my wallet but I do have dollars in my wallet.
All just put it that way right.
I got dollars in my wallet.
Now if you're in a different country like you're in Brazil or you are in England or you are in Portugal
or wherever else when you see the word of mouth you might think of your respective currency.
And so that's very important we need to make sure that we tell streite exactly what currency we're talking
about and exactly what denomination inside that currency we want to request as the amount now by default
striped check out defaults to using U.S. dollars.
If you are in a different country than the U.S..
So if you are in Brazil Brazil you're in Portugal you're in England or wherever else.
I still highly recommend that in this course you stick with U.S. dollars along with me because if we
both use U.S. dollars we can make sure that our code is always going to look very similar and we'll
be able to ensure that you and I have essentially the same code on the screen at any given time.
So I do recommend you just stick with us dollars.
Stick with me.
And later on after we finish everything you can come back and change the currency if you want to.
OK I want throw that out there.
OK.
So we will stick with us dollars together.
And now the next thing we do is actually figure out what this amount is.
So we want to simply charge our users like say $5 to send out five distinct surveys.
So we really want $5 out of this thing rather than asking for five like that amount right here.
It's supposed to be the amount in cents.
So U.S. cents.
There are 100 cents to a dollar.
So if we want $5 we're going to ask for five hundred cents like so.
So this right here says Give me five dollars in U.S. currency.
Now the other options I promise won't take as long as that one and maybe they will I don't know.
OK so the next one that we're going to take care of is a property that is very poorly named.
I want to make sure this is clear this is a very poorly named property.
So the name is tokin.
Now when you see it right here you might think that it means like oh this is the API key like the token
API you know those terms are kind of interchangeable.
That's not what it means at all.
Totally right here is expecting to receive a callback function and that callback function will be called
after we have successfully retrieved a authorization token from the Strype API.
So remember how Strype works after the user enters their credit card details.
Those details are sent directly to Strype by the form.
And then Strypes sends back a token representing the charge.
So that is what this token is referring to.
We're talking about the token that we get back from strike.
So this is going to be a callback function right here that gets called with a token we receive from
strike.
Now the reason I say this is a poorly named property is not only a fact that it uses the word token
but traditionally with re-act components any type of callback property usually is called Like on something.
So on token would have made way more senseor would have been a lot more clear what's going on but that's
not what is actually called.
It is called tokin.
So we just do tokin now for it.
Now let's just console log the token when we get one back.
So I'll put in an arrow function that takes the token and logs it out again.
Now the very last property and this one is definitely the easiest stripe key.
I bet you can guess what this is.
This is going to be our API key.
It's going to be the publishable key that we just defined inside of those dot ENP files so to reference
the key that is inside those dot inby files.
Remember the name of the key is re-act stripe key.
So right here at striked key will say process on EMV dot re-act stripe key.
OK.
So this is looking good.
Now just to kind of throw back to the topic of what is going on with this environment variable right
here.
When we test this out I'm going to put a debugger statement at the very top at the render method because
I want to see the actual javascript code that is generated by this statement or by you know this real
block right here.
And I think that the value of this right here like how this actually shows up in the browser might kind
of surprise you.
OK.
So let's say this file and then the last thing we have to do is change over to our header and show this
component in the header.
So I will go over to the head component.
I will import payment's out the top import payments from payments and then I'm going to fall find the
case in which our user is logged in.
So here is our render content method.
Here's the switch statement.
The default case is the case that that controls whenever the user is logged into our application.
So we essentially want to show another little bit of GSX in this case right here.
So to give us that opportunity we're going to return not just a blob of GSX right here but you know
this is actually I just realized my project is using a version of reactor where this is not going to
work properly and you likely are using re-act 16 which is working properly.
So let's take a quick pause right now.
I'm going to update my version of react and when I come back we're going to do a little change this
line that's going to make a lot of sense.
Quick pause.
We're going to come back.
We'll make sure we actually place the payments thing inside of here and make this all work.
So we'll see you in just one minute.