Now got everything around handling orders put together inside of our payment service.
Now our attention is going to move over to actually handling credit cards and actually billing users.
So this video we're gonna get an overview of the API that we're going to use we eventually handle a
real credit card payments coming in from our users.
All right.
So quick diagram first off we're gonna start with a quick mockup of what a user is going to see in our
app on the left hand side is a very simplified version of what a user is going to look at whenever they
take a look at an individual ticket.
So this would be a ticket that a user might want to buy.
They're going to display the title of the ticket and the price.
And then right after that we'll show a Buy Now button or something that looks very similar whenever
a user clicks on this.
We're going to use a third party library to open up a automatic dialog that looks like this right here.
This is going to be a dialogue created by a third party library called the stripe J S library.
The goal of this modal dialogue right here is to take in some credit card input from a user.
The user will enter in their name and then a credit card number and then submit the payment.
But this entire mode right here again is created by stripe Jesus.
And the reason I'm saying that so much is that what happens with this information is really important
for us to understand and know point time do you and I really want to directly handle credit card numbers
and that's what this stripe API does for us.
It removes the requirement of unite to deal with credit card numbers directly is there are huge security
concerns with handling credit cards at any point in time so by having this modal window right here created
by stripe we're essentially delegating handling everything related to a credit card number off to stripe
as opposed to dealing with it ourselves.
So what happens when the user clicks on submit right there.
Well let's take a look at another diagram and understand what happens and user submits their credit
card number.
So Seagram is a little bit complicated even though it looks relatively simple in nature because there's
kind of a lot of hidden gotchas and hidden little steps inside of here so we're going to have running
inside the browser the stripe j ust library that's the thing that is going to eventually create that
modal window user is going to enter their credit card details when they click on submit the stripe j
ust library is going to take those credit card details and send them off to the stripe API.
Now during this initial send off right here read centrally going to get back something called a token
and you should really view at this token right here as kind of like an authorization.
It is something that's going to allow you and I some developers to eventually charge that credit card
that the user just submitted for some amount of money the token that is received back inside the browser
when those credit card details are submitted should be thought of as a pre authorization.
No money has been charged yet.
It is a token that allows us to do a follow up request and actually charge some real money.
The nice thing about this token is that it is a little bit more secure than handling a credit card number
directly.
It's really a kind of one time use thing where as soon as we charge the money with that token that's
it.
We no longer have any access to the user's credit card or anything like that.
The token is going to be sent back into the browser from the stripe API.
The stripe j ust library is again going to take that token and hand it off to you and I inside of our
javascript code that has also been executed inside the browser you and I are then going to take that
token and submit it inside a request to our payments service then inside of our payment service you
and I are going to take that token.
We're going to make sure that the user is trying to pay for some valid order.
We're gonna make sure we verify the price correctly.
All that kind of stuff.
Then once we decide that is now time to charge the users credit card we're going to make a request from
our payment service.
Often the stripe API and we're going to include that token and that's what's going to actually finalize
the charge or really create a charge the term charge in the world of Stripe really means payment.
So whenever you see a charge we're talking about a credit card charge or a payment of sorts so it's
only when you and I take that token and make the final request of the stripe API that the user's credit
card actually gets charged and you and I in theory receive some money now as we look at this diagram
I hear you're gonna notice that the browser component plays well a really big part of this entire flow
but at this point we have not really worked on our ReACT application whatsoever.
All it really handles right now is the ideal of authentication.
We don't have any thing around tickets or orders let alone payments.
Does that mean we're gonna go work on all the react stuff before we can come back and start to finish
up the payment service.
Well no no.
We've got these automated tests but together so turns out that we can actually write a tremendous amount
of this flow.
So essentially receiving that token so many it to the stripe API and successfully charging a credit
card we can implement all that stuff and test it out using automated tests with jest as opposed to having
to manually test it inside the browser through the use of the stripe j ust library or anything like
that.
That's the idea that's we're going to move on or start to work on moving forward.
We're going to implement some code inside the payment service receive the token rate a charge and we're
going to also get a little bit creative in testing this stuff as well.
So let's take a pause right here.
When we come back the next video we're going to start to create a new stripe API key and or that's going
to allow us to make use of the stripe API.