In the last section we spoke about these Strype building process.
We're not going to sign up for a brand new Strype account and install Strype into the client side of
our application.
So I'm going to going to open up a new browser tab inside of it.
I will navigate to streite dot com.
Here I am.
I will find either create account or sign in and then create you know basically just create an account
that's all we're trying to do here.
So you can sign up for new account right here.
Now of course I've already created an account ahead of time so I'm going to go ahead and go back and
sign in
so entering my details
and we get sent to the dashboard.
So the desk word is where everything actually occurs on strike.
Now stripe internally has several different services available inside of it.
It's not just about this rather straightforward simple payment flow that we are taking right here internally
Strype has a lot of stuff going on with it.
So you're not necessarily going to see like something that just very very clearly says like hey here's
the Cingular flow that you can go into for working with stripe.
There really is a lot of stuff going on here.
So we're going to kind of just beeline directly how to get an API key that will allow us to start accepting
payments.
So once you're signed in to your account you're going to also start to see the word test everywhere.
So for example the page title is test I might see a test somewhere else on here test data right here
right and center.
So when you first sign up for Strype your account is first created in what is called test mode test
mode allows you to accept fake credit card numbers for the purposes of testing your application.
So obviously as you and I as developers are testing this stuff we don't want to be using our own real
credit card details and like you know paying money into our account or anything like that we want to
have some ability to test the account.
So when we are in test mode using test data we get some number of preset credit card numbers that stripe
will accept freely and assume that it was given a a valid real credit card number and we will talk about
exactly what those credit card numbers are.
Once we set up our actual form you can activate your account by going over here that will take your
account out of test mode and allow you to accept real actual credit cards.
Now in this course even though we have done a really good job so far of going through deployments and
security on API keys and all this stuff and treating this like a real application we are not going to
go so far as activating our account.
And the reason for that is that to actually activate your account and start to accept credit card details
you have to start to enter like a lot of tax information in here like a lot of very serious stuff like
company information bank account numbers all that kind of stuff.
Obviously very much outside the scope of a tutorial course and obviously I don't want you to see me
entering those credit card or bank details.
So we're going to leave everything in test account.
But just be aware that to really take the thing live and really accept credit cards you basically just
have to go through that process and that's it.
After that everything essentially behaves the same.
OK.
So enough of that we still want to find our API key so we can install react on the client side of our
application.
So in the left hand nav I need to find this API section down here so I'm going be taken to API and then
right away I should be presented with a publishable key and a secret key.
So these two key is right here essentially work the same way as the Google API keys that we've worked
with throughout the course the publishable key is very well labeled.
It means like literally you can publish this key and send it to the outside world.
No problem with that.
So we'll make use of the publishable key that is to identify our application to Strype and we'll use
it on the front end of our application.
The secret key on the other hand yes it is very secret.
It's something that we do not want to share with anyone in the world.
So we want to make sure that we keep the secret key very closely guarded.
Now in the context of our application we're still going to handle these keys the same way we have every
other one we'll make sure that the secret key gets stored inside of our keys file.
Well really both unpublishable publishable key and the secret key get stored inside of our keys file
for the back end.
We will make sure that we update an environment variable on our Heroku deployment and it will make sure
that we freely publish the publishable key on the front end.
Now one thing that I want to say just very quickly remember that inside of our application right now
if we go back over to our code editor we've got that config directory and inside of here we are doing
some determination on where our keys our API keys are coming from.
Now to be 100 percent clear this config directory right here and the keys inside of it are explicitly
intended to be used only by our back and server.
They are not for front end to use.
We can't use this same type of approach right here on the front end and everything just kind of like
magically work out.
So on the front end we're going to do things a little bit differently.
And on the front end we only need the access to the publisher Lokey right here.
So on the secret key for the back end we'll still add it to these you know config files but for the
front end stuff where we do need the key as well.
We're going to handle it slightly differently.
OK.
So we've got our API key here.
Now the last thing we're going to take care of is to install the Strype plug in that we're going use
on the front end of our application.
So a new tab.
I'm going to do a google search for Strype.
Check out and when I do so I'm going to find check out straight right here.
So this is the library or the plug in there we're going to make use of to actually accept credit cards
from our users or at least to show a credit card form to our users.
So this is the kind of form that we're going to see when we make use of this check out library.
You'll see this check out library referred to as check out.
Yes.
You know short for javascript it's the name of the library its sole purpose is to show the credit card
form to users collect the credit card exchange it with the stripe API.
Get back some identifying token and then give that give that token to our application so we can do the
follow up actual billing request.
Now this is the one part where I said a little bit ago that building with re-act application is slightly
different than any other type of front end application.
Any other type of front and free framework.
So when we make use of check out J us we're not going to use just check out G-S we're actually going
to use this other thing called Strype check out react.
So if you google Strype check out react you're going to find a library by a guy named as Minnock called
re-act stripe check out.
So the sole purpose of this library is to make that check out G-S library work nicely with react.
So this is the one thing Howard said.
Yeah like with react and billing with re-act is just slightly more challenging.
It's because we are going to use this component rather than the base.
Check out stuff.
So again the sole purpose of this is that check out G-S is kind of written in a world where they're
are assuming that you're using a framework or a library like Jay queery or angular or something like
that to render your application.
And it doesn't work very nicely out of the box with react.
Now we certainly can we can get it to work with re-act just fine.
But life is a lot easier if you use this library instead.
OK so last thing we're going to do in the section we're going to install re-act stripe check out as
an NPM module to the front end of our application.
So going to flip on over to my counsel.
I'm going to kill that running server or change into the client directory and then I'll NPM install
dash dash save and then the name of the library is re-act striped checkout.
So react Strype
OK.
So we'll let this do its thing.
We'll take a quick break and when we come back we'll figure out exactly how we use this library on the
front end of our application.
So I'll see you in just a minute.