Hello everyone and welcome back.
Today we are actually going to be
installing Stripe on our donation application.
For this, we're going to need to follow Stripe's documentation.
So let's make sure to open up Google and go to Stripe, react native SDK and go
to their GitHub and follow their documentation.
So installing Stripe is pretty simple.
This is the command that we're going to need.
So I'm just going to quickly open up a new terminal window here.
I'm going to go to my desktop and navigate
to the donation apps root and I'm going to run this.
The installation process has been completed.
Great.
We're not using Expo so we can completely skip this part.
And for Android we have to use certain API
level and compile SDK version must be 33, which I already have.
And now we need to add some kind of setup for our Android.
So let's make sure to do that and follow the documentation.
I'm going to make this window smaller.
Great.
And now we need to go to app, build gradle file.
So let's go to Android then app,
then build gradle file and make sure that we have the implementation for this.
Implementation code is towards the end.
So go to the end of your file and you're
going to see a bunch of examples of how to write implementation.
So let's make sure to copy this and paste it here.
I'm going to indent it and the I'm going to write it in the same style as it's
written here and here, as you see, we got to enter some version number
and lucky for you, I know that it should be 1.5.0. So let's save this.
And then we got to set appropriate styles in our styles XML file.
And styles XML file is located inside
Android source main res folder, then values.
And then we're going to open up our styles XML.
And here we're going to have to change up some things.
First of all, we're going to have to make sure that we are using material.
So we're not going to need this part anymore.
And all we're going to say is material
component here and then we got to put in day and night here.
So it would be theme material components daynight, no action bar.
Then inside here we already have a little code that we can just leave in as it is.
So now we're all done with Android setup.
And for iOS setup, they tell us that we need to install our pods.
So let's make sure to do that.
Let's navigate to iOS folder and do Pod install repo update.
But this might give you some errors the first time you try it.
So just make sure to go to your iOS folder, delete Pod file lock before then.
This is just going to be regenerated once you run this.
So let's do pod install repo update and it should go smoothly for you.
Great. All of my pods have been installed.
And now all I need to do is make sure that I reset my cache.
So let's do
npm start -- --reset-cache
okay, I have Metro bundler running,
so I got to turn that off because my port is already in use.
So let's do this again.
Great.
And now let's press I, and this should open my simulator.
Great.
We shouldn't need this anymore, so I'm going to move my editor right here.
Great.
Now that this is complete and my application is rendered,
let's just go to our payment page and make sure that our Stripe installation worked.
And for this, we're going to navigate to the payment JS file in our donation
application, and we are going to import stripe provider from Stripe.
This is just a wrapper component
that we're going to use to use stripe components.
So let's just use stripe provider.
And this will ask you for your Publishable key.
Now let's talk about where you can find your Publishable key.
Your Publishable Key can be found inside your dashboard.
Make sure that you enable test mode, and then just click on APIs,
and you're going to see your Publishable key right there.
It's going to be a string that you have to put in here.
So your Publishable key will be placed here.
But since this is a sensitive information, I already created an importable constant
for me to use this without using what my Publishable key is.
So I'm quickly going to be importing this.
I'm going to navigate here as well,
and we're getting no error, so our installation seems to be working.
But to verify that, let's create a card form
that is a component of stripe, which was imported right here.
So make sure that this is imported for you as well.
I'm going to save it.
And here we're going to see a weird thing pop up because it has no styling.
So let's give it some styling and make sure it has enough height to render so we
can just create a new style and call it card form.
Go here, create a card form and give it some height.
Let's say it's going to be vertical scale 150.
And here we go.
We see our card form rendered here.
Let's make sure that it has some margin
top, which is going to be vertical scale twelve, let's say.
And on ios, everything seems to be working fine.
We're not going to hook it up with our APIs yet, but what I do want to do,
since this is a new nothing, is that I want to make sure that this
implementation is working for you on Android as well,
just in case we're getting any errors and you need some guidance on that.
So I'm going to run this on Android as well.
You should do so as well. Okay.
My code is building.
My donation app is opening. Great.
I'm already logged in,
so I'm just going to click on this item, for example, where I'm donating $13.
I'm going to click on donate and here we go.
I see my card number here and all
of the same form, except for it has a little bit
of different styling for Android, which is completely fine.
So it seems to be working fine on Android as well.
Let's just make sure that zip code is not hidden here.
Do we need to give it a little bit more height, such as 200?
Yep. Zip code was hidden because of the height.
So let's make sure that we have
an appropriate height set so all of our fields are visible to the users.
That's all for today.
We have created stripe integration, and we haven't hooked it up with our APIs
yet or created any functions that would actually let us donate any kind of money.
But we're going to do this in the next lesson.
Thanks so much for watching, and see you in the next video.