We just wired up the body parts or middleware to test it out and make sure that the body of our request
is being handled appropriately.
I want to add a console log statement to our request handler and consul log the value of Reyk body.
Now we are specifically looking at body right here because we are just looking at the body parts or
documentation which set us which told us in very clear English right here when the incoming requested
body is parsed.
The actual contents other kust body will be placed on the rec body property.
And I just said the word body many times in a row.
OK.
Racked up body.
That's all we care about.
So right now we're just confirming we're just making sure that that piece of data the credit card token
is being communicated to our server correctly.
Now we need to make sure that our server is running.
So all change back over to my terminal and we'll start the server up with NPM run Dev and we'll give
it just a second to warm up.
Now one thing I want to tell you just to make sure it's really clear and make sure there's no surprise
ahead of time.
You'll recall that inside of our request handler we're not actually processing the response and sending
back any type of response at all.
So when we actually test this out inside the browser and our re-act application makes the request to
send off the Strype token that request is just going to kind of hang in space.
As far as the browser is concerned because we are not currently forming up a response and sending it
back.
OK.
So it looks like the client is set up.
That's great.
I'm going to flip back over to the browser.
I'm going to make sure that my chrome console is open.
Here's the network tab and I am sorting by or filtering by SH are requests.
I'm going to clear out the log or click the Add credits button at the top are going to enter some credit
card info which remembers always the fourth number and then some fake information.
Now peda OK so that reaches out to the Strype API.
That's this tokens request right here.
And it gets back a credit card authorization I.D..
So here's the request to our back in and API.
You'll notice that says localhost three thousand API Salustri and then do notice again the request status
is pending because we're not properly handling it on the backend.
So what we really want to see is to make sure that we get our console log out.
So I'm going to flip on over to the terminal and yellowness.
I don't have a console log.
I just made the same mistake twice in a row.
You'll notice I never actually saved the billing routes file.
Make sure you save your files.
Let me just run through this one more quick time or click add credits again put in my info
and will pay again.
OK so now when that goes to our back and server now it can flip on over.
And here is the console log of the request body.
So when the request body Here's the ID.
This is the thing that we really care about.
This is the token that identifies the credit card that we're trying to charge money to.
We then get some information about the card itself and then we get some other client Id created you
know these are all properties we looked at previously.
OK.
So that's pretty much it.
It looks like we are successfully communicating the request body into our request handler.
So now we can take that Rec dot body or take that little token that credit card token and we will use
it to create our actual charge just like we saw back in the Strype API reference a moment ago.
So remember we call Strype charges create to actually build the credit card.
OK let's do this back inside of our billing round stock G-S File.
We're going to delete the console log and we're going to put in the logic to create And Bill this new
credit card.
So we'll say Strype charges create and then we are going to pass in a configuration object that specifically
instructs Strype what we want to do with this credit card.
So the first thing we're going to specify is the amount of money that we want to build.
So remember that we had already specified this on the client side of our application.
We had said yes we want to believe five hundred cents or five U.S. dollars.
Now we still have to see it again on the back end because remember on the front end that's just kind
of an authorization.
It says hey we want to charge you up to five dollars or 500 cents.
Now if you're on the back end we are actually confirming and say yes in fact we absolutely positively
do want to charge you exactly five hundred cents.
So that's why we are specifying the amount a second time.
Next we're going to specify the currency which is going to be U.S. dollars.
And again even if you don't use U.S. dollars for the purposes of this course I recommend you stick with
a currency of USD or U.S. dollars just so all of our code matches up and all of our numbers match up
as well.
It's going to make both of our lives a lot easier.
Next we have to specify a description for the charge.
So this is can be absolutely anything at all can be any description we want.
It's going to be something that kind of marks or kind of a little bit of logging statement around the
actual charge.
So for us let's just say $5 for five credits to say hey that's what you're buying here.
And then finally we have to specify a source property which specifies what credit card or what charge
source we are attempting to build.
So in this case we want to specify the ID from that token object that we just passed into this route
handler.
Remember that Id property that we just saw two seconds ago right here.
This is what identifies the current authorization or this kind of charge authorization.
So it's this I.D. property that we want to pass in as the source.
So when we cancel this whole object it was available as wrecked body.
So to get just the I.D. we say wreck body dot I.D..
So back over here wreck body id like so.
OK.
So that's pretty much it.
That's going to create the actual charge.
And then Bill the credit card and then send a response back to our API from Strype saying hey charge
successfully created.
So let's take a quick break.
We're going to pause for just a minute.
We'll come back in the next section and we'll test this out on our back and so see you in just a second.