Hi and welcome back.
Today we're going to be going over how
to upload our Stripe payment integration to Firebase functions.
If you have no idea what firebase
functions are, I highly recommend you go back to the section where we are
explaining servers, APIs node JS and express.
Because we have a lecture there called
transferring Local Setup to Firebase
and Testing with Postman where you're going to see how to do this on a very
simple server side code.
Example, if you already have a Firebase
account, which you should because we have used it for authentication purposes
already for the donation application, then I'm just going
to show you how to upload the
stripe payment server side code to Firebase functions right now.
So first of all, what we're going to need
is close our server that was running here before.
I'm going to clear my terminal and I'm going to make sure that I initiate
a Firebase project here so that would be done with Firebase init here.
So we're going to say that we're going to be using Firebase functions.
So just navigate to the functions here,
click on Space so that this is selected and then just click on Enter.
Let's create a new project and let's.
Call it Stripe Payment ID.
And I'm going to call this stripe payments project example.
Now this is creating a Google Cloud platform project for me.
I'm going to wait for this to complete and then we can continue our setup.
Great, so my Firebase project is now ready.
I'm going to say that we're using
javaScript for our server side function code.
And I don't want Eslint to catch any bugs or enforce any kind of styling.
And I do want to install the NPM
dependencies right now so that my Node modules is created inside the functions
folder that is going to appear here.
Great, so Node modules will install right now according to this package JSON file.
And then we're going to have to transfer
some of our package JSON code here as well to make sure that
all of the other packages that we
were using before are also running on our Firebase project.
So let's go here, let's copy the
dev dependencies, go to our package JSON here and make sure that we paste it here.
And now we have two dev dependencies.
So let's unite them like this. Great.
Now let's go back here and let's
say that we need type module here as well.
And now let's make sure that we
can run the Body Parser and Express and Stripe there as well.
So let's copy all of this and
paste them inside the dependencies.
We're not going to use Nodemon right here anymore.
Let's save this setup and make sure
that we have comma here as well.
Let's not forget about that. Great.
Once we have this, we're also going to have to transfer our Babel RC file here.
So let's refactor the functions and make.
Sure that babel RC file is here.
But as you see in the package JSON file, we're running on node version 16.
So we need to make sure that preset environment is also installed with that.
So let's make sure that we put
an object here for this and this object is
just going to say that our target for node is 16.
Now let's make sure that our local
environment is running on the 16th version.
And for me it is because I have NVM, which is node version manager.
Again, if you don't know what NVM is,
please go back to the previous videos where we explain all of this.
But right now I'm running on the 16th
version, which is exactly what I need to make sure that this code
recompiles once I run NPM install. So great.
Now since we have everything set up,
what I will also need to do is make sure that I transfer my constants JS file here
and that my index JS content is actually going to be placed here.
So I'm just going to paste it here.
I'm going to import the functions in
an es six way.
So I'm going to say import all
as functions from Firebase functions.
I can comment this code out.
We don't need to listen to anything because this will happen automatically.
And then I just need to say
that we have an exportable constant called, let's say Stripe Payment.
And let's make sure that we use functions
Https on request app.
And this is going to connect to
our app code that we have set up here.
So this should run just fine.
Let's save this.
And now we can delete our node
modules here so we don't need this anymore.
Great, we can also get rid of
the index JS file.
We can get rid of package and
package JSON files because we're not going to need those anymore.
And now we just have the firebase
set up right here.
First of all, what we're going to need to do is install all of these new packages.
So let's go to the functions directory and let's run NPM install so that our node
module has everything installed as it needs.
Great, we got no errors.
And now to deploy, we're going to use this statement right here.
So we're going to say NPM run deploy and this should create our new
function if everything goes well.
So it's telling me now that my project
should be on Blaze Pay As You Go plan to complete this command.
So this is my mistake.
I'm going to click on this link given here
and it should open up my Firebase projects.
I'm going to go here.
This is my stripe payment project example.
I'm going to modify my plan.
I'm going to select pay as you go plan.
I'm going to continue and I'm not going to put any budget here.
I'm just going to skip this step
and click on Purchase. Great.
So now that this is all set.
My deploy should run if I get no errors.
Let's see.
Okay, so I got an error because constants JS file was not imported correctly.
Whoops. I don't need this functions right here.
My import was incorrect.
So I'm going to rerun the deploy.
And this would definitely work now. Great.
My package is uploading because everything was correct.
And now what Firebase will do is it will
generate an endpoint for me that I can use instead of localhost.
So it's going to be called Stripe payment.
And it's going to give me the
uRL address that we can try using on our react native project.
So let's wait on this to complete and grab the URL that its going
to return to me. Great.
So here's my endpoint that I can use from now on.
I'm going to copy this and then I'm going to open my donation project.
And instead of localhost, I'm going to use an API URL.
So I'm going to call it like this.
API URL plus this.
And I'm going to create a constant here called API URL, and its value.
Is going to be my new Firebase function.
I'm going to save this.
And now that I have my Stripe
payment endpoint set up and I'm using this
API URL, I'm still running my Metro bundler.
So I'm just going to reload my application.
I'm going to go to my simulator.
I'm going to click on some I'll
click on some other donation item, like 14.81.
Let's click on donate.
Let's enter this test number
and some weird credentials here to be able to click on donate.
Now my payment was successful,
and if I go back to my dashboard and reload this page, I'm going to see
that this was successfully processed at 08:50.
P.m., which is right now.
So this is great.
Thanks so much.
We have just get up our Stripe
integration with our donation application.
Our server is running on firebase, which
means that technically, if we had users
they could also use our server side
code because we're not running the server on localhost.
Because if we're running the code on
localhost, then it's only accessible to us.
And nobody else because this is our local environment setup.
So this is all great.
We have just finished our donation application.
Going forward, we're going to learn how
to upload our applications on Google Play Store and Apple Store.
So thanks so much for watching.
You have really become an advanced developer.
I hope that you're super excited about
all that you've learned because you definitely
deserve all the recognition for the effort
that you've put in throughout this course
because you've really badge it to the advanced level.
So now if you want to create any
applications and accept payments, you already
have a way to do this.
Thank you and I'll see you in the next video.