In the last section we spoke about some of the big considerations around building inside of that.
We're now going to continue by talking about exactly how we're going to work with this stripe as a payment
processor and how it's going to work inside of our application in such a way that you and I never have
to actually accept credit card numbers on our back and server but somehow we still collect them from
our user.
So let's get into this.
OK.
So this is the flow that a user user is going to go through whenever they give us their credit card
number.
So this is how we're going to essentially get some money out of them up in our head.
We're going to have that button that says something like add credits.
Now when the user clicks on that button we are going to reach out to stripe our payment processor and
we're going to ask Strype to generate a credit card form and show it to our users.
So when we make use of Strype we traditionally install a plugin authored by Strype into our reactivates
application anytime we want to accept a credit card number.
We tell that Strype plug in to generate and show a credit card form to our users.
So the trick here the way in which you and I are not going to handle credit cards at any time is that
this form that we've been talking about the actual credit card form this is going to be automatically
generated by Strype themselves and displayed to our users on our Web site.
So that's going to be how we collect a credit card number on our site but never actually accept the
credit card number ourselves.
So once the form is visible to our users the user will enter their credit card details.
So I put in the number the expiration date security code all that kind of stuff those credit card numbers
will then be taken from the form directly by the stripe plug in and sent directly to the Strype API.
So at no point in time during this process will you and I interact with the credit card number at all
in any way shape or form.
After these details are sent to the Strype API Strype will then respond with a token that represents
the pending charge.
So let's keep up you know we'll talk about this pending charges thing but let's continue through the
flow and get a better sense of the entire process.
And I'll tell you exactly what this token charge thing blah blah blah is.
So we take that token which is essentially just a little blob of information.
We are going to send it to our API our API will then make a follow up request over to Strype and confirm
that the charge was successful.
And at that point in time we will then add some credits to the users account.
OK.
So really the probably confusing thing about this process the part that I think is probably the most
confusing is that sometime during this flow like this step right here we take the credit card details
or to be accurate Strype does Strype takes us credit card details and sends them off to the API to Strype
API then Strypes sends back this token representing the charge.
We then send that token to our API and then make some follow up request with Strype So for some reason
it appears that we communicate with the streite API two times.
Well let's talk about exactly what's going on here.
This initial exchange of credit card details with Strype can really be thought of as a sort of authorization.
So when the user sends their credit card number off to Strype through their form and we get back this
token thing right here you can think of that token as representing like a pending charge or an authorization.
It's something that says hey the user has authorized your application to charge up to X dollars to their
credit card.
We then take that token send it back to our API.
We figure out the final total.
It's like the actual amount that we really want to build a customer for.
We then build a customer using that token.
So step one is to essentially get the OK or the go ahead and then step two is to actually go ahead and
do it.
Now the entire thought process here is that if we'd had all the logic for the charge on the front end
it could be very easy for a malicious user to come in and kind of manually change the actual value that
we want to charge them for.
So like we might say hey our service costs $100 but a malicious user could come in and somehow say well
I'm going to kind of arbitrarily tweak the value to $100 to $1 pay that and then give you some token
that makes you think like yes money has been successfully charged.
So the general idea here is that all the code that you and I run on our express server is 100 percent
secure or you know reasonably secure and it will not be vulnerable to any users tampering with that
process.
So the actual charge or the actual light hey I want to collect these dollars from this user or this
credit card is a step that occurs on our back end where the user doesn't really have a lot of say or
a lot of control over that flow.
Whereas they do have a lot of control on the front.
OK.
So this is the general flow.
This is the overall idea.
So I would say the high point kind of a high point of the really the big point inside of here is that
we have to install this Strype library into our project and we're going to use that to actually collect
a credit card from the user and make this billing stuff.
All this credit card stuff sort of happened.
So with that in mind we're going to take a break right now.
When we come back we're going to sign up for the Strype API.
We're going to create a new Strype account.
We're then going to install Strype into our client project and start to set up the form.
So let's continue the next section and sign up for the API.
I'll see you in just a second.