Alright, we can talk to Stripe, we can get a token, we can even put in
information and send it over, right?
But it's not built to our standards.
We have standards in this codebase, 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 hear where I'm leaning towards.
Well, 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 with you.
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 .service .js.
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 the create stripe and the normal stripe, we're going to put
it inside of here, we're going to remove the await stripe dot create token
directly from here, we're going to make this an await of what should we call it?
That'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 card
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 dot 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.
Okay, so knowing that, Mo, why aren't you wrapping this in a dot den 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 card token request
from dot dot slash dot dot slash dot dot slash services slash checkout slash
checkout dot service.
And so we'll take our card token request.
And instead of awaiting that will await the card 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, what we can see in the checkout is if we fill in a three,
it's true.
So Mo, why couldn't we just put the
stripe library here?
Well, we don't want to put the library
integrations directly in the components.
Rather, we want our service layer to
control talking to the external party, right?
Our service layer talks to stripe on our behalf.
That way, if anything needed to change in 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 Marie condoing 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 dot number, 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 ahead, 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 CVC is going to be values
dot 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 input 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 things.
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 dot expiry.
And we're going to do a dot split, and we're going to split it on the slash.
So then over here, we're going to say const.
And we'll say expiry is equal to values
dot expiry dot split.
And by doing this, we can now say the
month is zero, and the year is one.
Because if we console dot log this,
right, what we're going to see inside of expiry is actually, we should see these
two fields, it was logged above.
Got a little confused there on the logs.
But yeah, right here, we see an array of two values, zero, four, and 22.
So by calling the zero index, we're getting the zero four, by calling the
first index, we're getting the 22.
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 console log, we can console log info here.
And by doing this, now, if we fill in a CVC code right here, two, four, two, 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 token up to the checkout.
And if an error occurs, we also need to pass the error up.
But that's more of a later concern.
Right now, we've focused on implementing
the first full flow of our user being a user inputs their credit card info, goes
to Stripe 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.