And once we have installed react strapped elements next we're going to set up our checkout page.
And in this video I'm going to do all the code first and then we're going to kind of talk it over of
what is actually happening because I think it's just gonna be a bit more straightforward.
We're gonna head on up to our imports first we're gonna get everything that we would need from react
strip elements so we're gonna go with import and then the elements we're looking for our card element.
Then we would also want a stripe provider.
Then also we would want elements.
And lastly also want a inject stripe that is coming from.
React strike elements then make sure that you have the props available because it's just gonna be very
useful once we start working with handle submit.
If you didn't in the previous videos make sure you have the props and then we're gonna get her off the
export default.
So we're going to remove export default and you're gonna see in a second why.
So I'm gonna remove it.
I'm not gonna say it because then I'm just gonna get a big fat error and we're gonna scroll down and
we're going to set up a new component so we're gonna scroll down and it's gonna be a component by the
name of card form.
The naming is really up to you.
And I'm just gonna call my card form then we're gonna use inject stripe.
So one of the things that we imported and we're gonna pass in our current form now our current form
is where it is within the checkout component.
So we need to pass a no check on and then we need to set up one more component that is just gonna turn
all the stripe functionality.
So we're gonna call this again how we would want.
I'm gonna go with stripe and I'm gonna call this a wrapper then since it is a component essentially
it's just gonna return a bunch of stuff and we're gonna start by returning a stripe provider strip provider
then within the stripe provider we need to have the elements elements component and then within the
elements component we are grabbing the component that we just created.
So however you named it I named my one card form like so that we make sure that I type it out correctly.
And then as 40 stripe provider.
And like I said the moment I save it I'm gonna get an error because I'm not exporting anything from
my component but then where we have the stripe provider component we have the API key prop and we're
gonna head over to our stripe dashboard and we're looking for publishable key.
So just click to copy and then stripe provider API key prop and we're passing in as a string.
So let's just posturing and then also we need to make sure that we export it.
And I'm gonna export as defaults so export and default and then we're using of course our stripe wrapper
not the checkout one because again we use inject stripe to create a card form and now we're returning
the card form from our stripe wrapper.
Let's save it and then we're gonna head over and in our J sex in the checkout we're going to add a stripe
element and the component we're looking for is the card element because currently our application didn't
break but we're also not showing our input our card input.
So where we have these stripe elements right after the comment we're gonna have the card element component
and then I'm just gonna add some success or class name card element and we're just gonna close out our
component so let's close it out and we're gonna have our form again.
It's just gonna take a bit let's say I don't know half a second not something because please keep in
mind that all this is happening dynamically.
Essentially we're getting this input where we can start adding the card information again.
Let's go over the basics.
So essentially we imported our components then once we imported the components we have inject stripe.
That is a higher order component which by the way is not unique to strike.
We have seen this pattern before by the way we worked with context similar way in the react Beach Resort
project.
And then what happens is we pass in whatever component we have which in our case is the checkout.
So essentially where are we going to have this form then we set it equal to some kind of variable since
we're getting back our component and then we set up one more component and then within that component
we have stripe provider with an API key then we have the elements component and then within the elements
whatever component we create in our case that was the card form.
So once we have this setup then within our actual component that has the form we need to use the card
element that is the component that we're looking for and that adds the functionality and again like
I already previously mentioned we need to have the props because when we're gonna be submitting the
form when we're gonna be trying to get our token we're gonna access the props.
And that's the reason why we pass in the props.
And remember initially how I said that it's not going to make sense because we have the component and
you're wondering well where are we getting the props from.
Well now you see we set up of course her wrappers and then from the strap components we are getting
our props and we're going to use our props to get the token and complete the transaction.