In the last video we were able to get the token that is provided to us by the Strype API to be consul
logged out our javascript console after we entered a valid test credit card.
So let's now go back over to our flow and get a reminder of what we need to do now.
So we've now gotten a token directly from Strype that represents the charge.
We now need to send that token to our API our API will then do a follow up request over to Strype and
then add some credits to the users account.
Now one thing I want to talk about that is very closely related to this ad credits to users account
thing right here.
We don't necessarily have like a user account per se.
We have a object or a model inside of our database that represents a user.
So when I say on this box right here add credits to users account I'm really saying that every user
model will probably have a record of the number of current credits that they own.
And so when we say add credit Caesar's account we're really saying that we're going to add some additional
number of credits to that user model.
OK.
So just to make sure that part's clear we're now going to kind of fix up a couple of things inside of
our payments form and then we're going to start to implement the step where we take our token that we
get back from Strype and send it to our API.
So what we have to fix for before we get to the step.
Well first off remember that we're getting this warning about the key property inside of our console.
So we said that that is currently being generated by our heterogeneous file specifically this default
or turn case right here.
So we are returning a list of elements but we have not provided a key.
So we're going to put on a key here.
Remember that the only requirements for a key is that it must be unique and consistent across renderers.
Now as you can see right here this is always going to be a static list of records so we can use absolutely
any key we want because it's never going to change.
No we're not rendering a list of elements from like an array of records that will change over time.
This is really a one time render kind of deal.
So I'm going to give it a key of one and key of two on the next record and that should be enough to
just satisfy the key requirements.
So now if we let the OP reload no warning anymore.
OK.
So that's good for step 1.
Now second thing I want to fix up when we click the pay with card button and we get this big old box
on the screen that tells user hey like give us the money.
You can tell that it's immediately not at all clear to the user what they're paying for.
You know we take their e-mail we take the credit card details we tell them they're going to pay $5 but
what are they actually paying for.
Right.
So the re-act stripe check out component that we used previously inside of our payments start G-S file
takes two additional props that we can use to customize the text that appears in that window.
So I'm going to give the stripe check out component a name property name is going to be displayed as
like a big header at the very top.
So for us we'll put in the name of our application just so that the user understands like yeah this
is still payment for our application.
And then the Strype check out component also accepts a description property as well.
This will also show up on the header up here and we can use it to just give the users some idea of what
they're paying money for.
So I'm going to say five four five e-mail credits like so guess what.
Reload again.
Now when we open up the button it's a lot more obvious to our users what's going on.
So the name of the application is e-mail.
And it's a little bit more clear.
OK we're about to pay $5 to get five email credits or five surveyed credits whatever we really want
to call it.
OK.
So this is looking pretty good now I think that there is one last thing to take care of when we look
at this hideous button.
It really does not match the styling of anything else inside of our application right now.
So I think this button needs to change.
Now I know I've said that we're not going to worry too much about styling in this course but this thing
is just over the top.
It just looks bad period.
So to use some other element or some like GSX markup rather than this pre-build button that was included
with the stripe check out component right here.
We can pass our own custom element to use as a representation for that button.
So the way that we do that is we're going to pass an element to the stripe check out component as a
child component.
So let's see what that looks like in practice.
Right now the Strype check out component is a self-closing tag right.
There's the closing tag.
I'm going to remove the self-closing forward slash and then going to put in a separate closing tag.
So.
Check out and then we'll pass in a child's component to use as the button rather than the built in button
that is currently being displayed.
So as a child component say button with a class name of between.
And this is going to have the text add credits like so the class name of Beechen means use a button
from the material design UI package.
So this is a little bit of CSSA we're going to get out of the box for free.
OK.
Now we'll save this and when we go back over it's a much more reasonable looking button that appears
at the top.
Now maybe like you could definitely make the case to me and say Steve I'm like This is a button up here.
It still looks weird it should look like this other button over here.
However I'm going to point out that usually whenever there is some light preferred action or some like
really clear thing that we want our user to do we want to add a little bit of so designed to just pull
focus to this element.
And so traditionally inside of a web application anything that involves giving us money or you know
getting the user to do something we want we want to put in some like additional pizzazz or like something
to look at you know something to draw the users attention.
And so while the button doesn't like quite match up in here compared to a log out button over here I
think that it does a great job of drawing users up to the top header and they see add credits and like
very suddenly the user can very easily say OK I need to add some number of credits by clicking on a
button.
So we're going to use a button here again just to kind of draw the attention of our user to what's going
on up here.
OK.
So I think that's it for quick fixes that we need to do to the payment stuff.
So let's take a break.
When we come back in the next section we're going to start to make sure that we send that token that
we get from the Strype API to our back end server.
So let's take care of that in the next section.