All right, we can talk the stripe when we can get a token, we can even put in information and send
it over, right.
But it's not built to our staff.
We have standards in this code base.
We don't just do things.
We do them.
And so implementing the stripe integration directly in the component just doesn't feel right, and you
can know and you hear where I'm leaning towards.
Why isn't this a service?
And you're right.
Why isn't it a service?
I messed up.
Or rather, I wanted to show you how the integration would look in a simple way before we go and scale
it.
And even in your day to day job, this is something you want to take.
You want to try things out on a smaller scale before you start expanding it, because the more you expand
it, if you can't prove the simple solution, then you won't be able to get the bigger picture going
right.
We want to make sure that this library works before we start integrating the seven different files in
which we're going to split it up.
Right.
So that was the main point.
And now that we've proven this, what we can go ahead and do is start doing some of that split out.
So what we're going to see over here is in the services, we're going to create a new folder called
Checkout.
And in checkout, we're going to have something called Checkout Thought Service Dot James.
And inside of that service is where we're going to move the bulk of the information that was in here,
so we're going to take it to create strife in the normal strife we're going to put inside of here.
We're going to remove the wheat stripe that create Tolkan directly from here.
We're going to make this a weight of what should we call it.
It's always like there's naming things is always one of the hardest things you can do when writing code.
So I think what we should call it is called token request.
So let's say export const card, token request.
And what that's going to do is it's going to do the stripe out, create token on our behalf of the card
information we send to it.
So we'll send it some card info and that's what it's going to do for us.
It's a very, very, very simple wrapper that's just going to take the card and create the card token
for us.
OK, so knowing that, Mo, why aren't you wrapping this in a dog then and all that stuff?
Well, we're just creating the indirection here.
So what we want to do is instead of doing our stripe integration directly in here, we're going to import
car token requests from thoughts, thoughts that slash services, slash checkout's, check out that
service.
And so we'll take our car token request.
And instead of waiting, that will await the car token request.
We'll make sure that all of this still works.
By going into our terminal over here and then once we do that, where we can see in the checkout is
if we fill in the three, it's true.
So why couldn't we just put the stripe library here?
Well, we don't want to put the library integration's directly in the components.
Rather, we want our service layer to control talking to the external party.
Right.
Our service layer talks to strike on our behalf.
That way, if anything needed to change card token request, we don't need to go directly into the credit
card component and start fiddling around with all of these settings.
No, no, we're organizing things.
We're merican doing our code base, so to speak.
And so with that now, what we can go ahead and do is start integrating the credit card component properly
to the information that is on values.
And so the first thing is this is going to be values is no.
Right.
And then we're going to go look and we're going to go see, well, what what else is in values.
So let's go ahead and disable this for a second and let's go take a look at what's on values.
Right.
And so what we can see is that we have an expiry, a type and a CVC, so we know that Coke is going
to be values, thought CVC.
We don't necessarily have a name yet, and that's because the name is going to come externally.
That's going to come from somewhere else.
So the name is going to come into the credit card because it's going to be filled in somewhere else.
So we're going to default the name for now to MO.
That's what we're going to default it to.
And by doing that now we have three of the five.
But what we can see here is if we fill in all of this information just just really quickly and you can
see it's not accepting this as an input.
So it has some credit card validation built into it.
If we fill this in, what we can see is that here at the bottom, expiry is a string, but we need two
separate parameters.
So what we're going to do is values that expiry and we're going to do a thought split and we're going
to split it on the slash.
So then over here we're going to say CONSED and we'll say expiry is equal to values that expire that
split.
And by doing this, we can now say the month is zero and the year is one.
Because if we cancel the log this right.
What we're going to see inside of expiry is actually.
We should see these two fields, it was locked above.
Got a little confused there on the logs, but yeah, right here we see an array of two values, zero,
four and twenty two.
So by calling the zero index, we're getting to zero four.
By calling the first index, we're getting the twenty two.
Now that we have all of that, we can turn this back on.
And we can give it the card information, we can remove the council log, we can console that log info
here.
And by doing this now, if we fill in a civic code right here due to what we're going to see is that
we're getting a token back.
So we're getting our token back.
And two things that we'll need to do later on, we'll need to be able to pass this Tolkan up to the
checkout and if an error occurs, we also need to pass the error up.
But that's more of a leader concern.
Right now, we've focused on implementing the first full flow of our user being our user inputs.
Their credit card info goes to Strib, creates a token, flows all the way back to the user.
So now that we have that, we can take that token and we can start building a checkout.