Hi and welcome back.
In this video we're going to be
integrating Stripe into our react native app.
But in this lesson particularly,
we'll be focusing on server side integration using Express JS and node JS.
If you skipped over the last section
and you don't know how to use Node or express, please go back to the section above
and make sure that you are familiar with using these technologies.
Otherwise, let's continue on.
Now I'll walk you through the process
of integrating our server side code with Stripe.
For this I have a specific folder created
called Servers and I just created an empty folder called Stripe Payment.
I have no files here and we're going to create the server side code together.
So I'll just open this up in my editor.
Here we go.
There are no files created here as you
see, and we're going to do an initial setup first.
So let's open our terminal and make sure that we are in the same directory.
So open up your terminal whether it's
inside your editor or whether it's just a terminal that comes with your device.
And then let's make sure that we have several things installed.
So first and foremost we're going to need to install Express.
Then we're going to have to install body parser.
Whoops, I spelt it wrong.
It's like this. Okay, great.
Those are installed and you should be able to see package JSON appear here.
Now we're going to need some Babel code as
well here just to make sure that we can transpile our ES6 code correctly.
So those are going to be
npm install --save-dev @babel/cli @babel/core @babel/node @babel/preset-env @babel/runtime.
So let's install these.
Okay, great.
Now let's also install Nodemon so that we
can update our server without having to stop it.
So now if you go to your package JSON file, you're going to see all
of the installations here and package lock should have been generated for you.
And all of our Node modules are also set.
Great, so now we're all set with our
initial setup and we can continue on with our integration.
Well, let's create index JS file here and inside here we're going to have
to start importing the body parser and then we're going to have to import
Express from express and then we're going to have to import Stripe.
But for this we're going to have to install Stripe first.
So let's do NPM install Stripe as well inside our terminal and wait for it.
Great, it's been installed so we can
import Stripe from Stripe and we shouldn't need these braces here.
And then we're going to have to get the publishable key and secret key.
So let's set up empty variables for those
so far and I'm going to show you where to find them.
stripe secret key.
So let's save this.
And now I'm going to show you where to find those so let's go to stripe.com
I'm going to go to my dashboard.
I'm going to open the test mode and click
on Developers and then you can click on the API keys.
And here next to Publishable Key
and Secret Key you should be able to see your keys.
Just make sure that viewing test data is on for you and that you save your secret
key somewhere because it can only be revealed once.
So once you have those, please just copy paste them and put them inside here.
I'm not going to put mine here because this is a personal information.
So I'm just going to put it later on.
Once we're going to be testing our setup and you're not going to be able to see it,
but just copy and paste your credentials here.
Great.
So then we're going to have to define an application that is going to use express
and then let's say that we want to use request response and the next function
here and the we're going to use body parser.
And make sure that all of our requests are parsed as JSON.
And then we're going to make sure
that next function is appropriately called with all of these parameters.
So this is just going to make sure
that all of our data is already parsed and passed as JSON to the other functions.
This just allows us to easily access
the data sent by the client in our route handlers.
Great.
So after that we are going to have to create a Payment Intent endpoint
and this is going to be an endpoint that accepts information.
And since we're not going to be altering any kind of information and we're just
going to be getting the information, we're going to have to use a post request.
So let's just set up a post request and call this
Create Payment Intent Endpoint and it's going to be an asynchronous call that is
going to accept a request and response and we're going to write some code here.
A Payment intent represents a payment that the customer intends to make.
It is needed for Stripe to handle the payment process securely,
including authentication, confirmation and capturing the funds.
By creating a Payment intent,
we initiate the payment process and ensure that the payment is processed securely.
So inside this route we'll accept several things.
We're going to need an email of the user.
We're going to need the currency
that they're using for the payment and we're also going to need the amount.
So we're going to get this
from Request Body using the destructuring and once we have those we're just going
to use Stripe and say that we're using Stripe here using the Stripe Secret key.
And then we're going to say that API version that we're using is 2020-08-27.
So after that we'll create a new String customer using the provided email.
So let's create Constant customer here
and then await on the response from Stripe customers.
Create email.
Once we're done with this,
we're going to have to set up some kind of parameters for our payment intent.
The parameters that we're going to need
is first of all going to be the amount which is sent in already.
Let's just make sure that it is going to be an integer
so we can just do it like this and then we're going to have to give it
the currency and then we're going to have to give it
the customer id and we can get it from the customer that we generated here.
And then we're going to have to pass in payment method options and the payment
method option that we are going to pass is going to be a card.
So let's create a card here and we're going to need a request 3D Secure
and we're going to set it to Automatic here.
And let's explain what this does in this case.
We're setting the request 3D Secure option
to Automatic which means that Stripe will handle 3D Secure authentication
automatically if it's required by the card issuer.
So payment method types define the types
of payment methods that can be used with this payment intent.
So we're going to have to define this here as well.
And we're just going to pass in an empty array.
Whoops this should be types my bad.
And we're going to define an empty array in our case.
And since it's going to be empty,
it's going to default to an array of cards inside the Stripe.
But we can just leave it empty.
We don't have to be so specific because Stripe will handle this for us.
And then we're going to have to use a Try catch block to create the payment intent
and send the client secret to the client or send an error if it fails.
So let's do this and I'll explain what it does on the way.
So this is the try catch
and we're going to get an error here and if we get any errors, we want to
return a response from the server that is going to indicate what this error is.
So we're going to get the message from Stripe like this.
And if we don't have an error,
then we have to get the payment intent information from Stripe.
So let's say wait
on that and make sure that we call payment intents and that we create this intent
using the params that we created here so that we pass it to the Stripe server.
And then once we get this back,
all we want to do is make sure that we return a response from our server
that includes the client secret that this payment intent generated for us.
Okay, now let's talk about what client secret is.
The client secret is a unique Identifier for the payment intent that is used
by the client side code to securely confirm and complete the payment.
We're going to be using this on the react native side on our mobile application
to make sure that we can complete the payment.
And it should be kept secret and only
shared with the client as part of the payment.
So we have written all of the code that we
need and all we need to do is make sure that we listen to some port.
So let's make it 42 42 port and then once we start listening,
we can console log that node server is listening on port 42 42.
Great.
So now that we have all of these, we can start our nodemon for the index JS file.
Okay, we are having some issues with the import because I totally forgot
to mention that we need a Babel RC file for this.
So let's create the Babel RC file.
Let's create new file, call it babelrc.
Let's open up the JSON and say that our presets is going to be an array that just
says use Babel preset environment and then we're also going to need the plugins.
This is also going to be an array that is
going to use Babel plugin transform runtime.
Great, let's save this.
Let's do npm install one more time and the let's do node one index JS
and let's make sure that our package JSON has type module set.
Okay? And 40 to 42 port is already in use.
So I'm just going to use port 3000
and make sure that this outputs it as well.
Okay, great.
So now we have all of this information and I'm going to pause for a bit and I'm
going to enter my Stripe Publishable key and string secret key inside here and then
we're going to go on with Postman to test our setup.
Please make sure that before you test this with Postman, you also have grabbed your
publishable key and Stripe secret key as mentioned before.
Great, so now let's go to postman.
Let's make sure that we grab the URL correctly.
It should be our http localhost 3000
and the endpoint should be
Create Payment Intent and it's going to be a post request.
We're going to send in raw data that's going to be in JSON format.
And let's say that email is going to be Nata at Vache me
and that currency is going to be usd
and that amount is going to be $50.
Now for $50, you're going to see me type in 5000 here because Stripe actually grabs
the last two digits and makes it converted into cents.
So Stripe will actually read this as $50 even though we send the amount in as 5000.
Great, so now if I click on send, I'm getting back the client secret key.
And once we have the client secret key,
this means that everything happened successfully.
And now we have to initiate a second kind
of API call that would usually be handled by the react native side.
So we're going to use this client secret
key to complete the payment and we're going to see that right now at 06:57 P.m.
Which was like 1 minute ago.
nata@vache email created a payment intent and it is still pending.
It's incomplete.
It's going to be in incomplete state
until we use React native client to complete this payment.
But you do see here that with our test we have created an incomplete payment.
So if I were to send in one more,
we are supposed to get another client secret key.
And if I were to refresh this page, we should see now $51 appear here at 06:58
P.m. With the same email address just with the different secret key.
So that's all for today's lesson.
We have just created a server side integration with Stripe and provided more
details on how the JSON body parser middleware works, the purpose of creating
a payment intent, the role of payment method,
options and types, and the importance of the client secret.
Next, we'll write code inside our React
native project to make sure that our payments can go through.
And you're going to see how Stripe UI looks are entering card information
details and how we can test if everything is working as expected.
So I'll see you in the next video.
Hope this video was exciting for you.
We're about to finish up our payment integration for the donation application.
Thanks so much for watching. See you in the next video.