Hello guys, today in this tutorial I am guiding you the step by step process on integrating
the Sprite API payment gateway inside your Node.js and Express application. So this will be a live demo of the application that we will be building
You can see Welcome to Payment Gateway and this is a simple button, Pay with Card
So I have deployed this application on Heroku. I have given the link in the video description
If you click this button, a pop-up window will appear asking for your email address
This is your name, this is the product that you are buying here
And here you just need to provide a fake email address because this is not production level
this is just in testing mode. So I will provide my real email address and then you need to
provide the test card numbers that they provide you. If you go to just write on Google
test card numbers for Sprite, so they will give you these numbers
So let me just type this, 424242, this is the user number and then you can provide any
sort of date, future date and any CVC code. So let's say 42425
And if I click on the Pay button, you will see inside my payments, already three payments
are successful. So you will see if I just say, three payments are there
So now if I click the Pay button, you will see $70 are there, so my termination is there
After this, it will say in the next page, in the success route, success is there
So your payment is successful. So if I refresh the dashboard, you will see the fourth payment
will be added. And also you can see this is the fourth payment, succeed, succeed
This is a description of the product, customers who bought the product and also the date and the time
And it also sends out a nice confirmation message or invoicing as you call
Click on this option and send receipt. If you click this, you can send it to the person
who has bought your product. Click on the Send button after the payment is done
You can see receipt sent. If I check my email address, this is my real email address
so you will see this receipt is received. If I open this, nice animation is there
you can see that receipt form. This is the amount which is paid, $70, which is the date
5th September, and the payment method was Visa card. So in this way, you can also print out this information, invoice, kind of the application
So we will be building this application from scratch. So you can see the live demo
in the video description. Go to this website and check out the live demo
And all the source code of this video, I have given in the link of the video description
Go to the video description and go to this blog of mine. There I have step by step guided you
how to build this application with screenshots. So I will be using this blog in my video
So you can just use as a video reference. So let's get started
So first of all, I will just close out all the previous projects and start this project from scratch
So the very first thing that we need to do is that, let me just go to my projects directory
And here I will make a new directory. So type here cmd and write make the
so make directory, we will make a new directory of tryproject. Then we will go into this directory
And the very first thing that we will do is, we will initialize the mp package or json file
by invoking this command npm initialize file. Now we will install the express, npm iExpress
We also want EGS template engine. We also want the body parser library
And we also want node one, which will automatically restart the application for us whenever we make changes
And lastly we will want the stripe library, which will actually make the transaction for us
So just enter it, it will install these dependencies, so it will take some time
I will be back whenever these are installed. Now you can see that guys, all the dependencies are installed
So first of all, what we need to do is that, we need to open this inside our Visual Studio Code text editor
So just write code dash, so this will open it inside the Visual Studio Code
So the very first thing that we will do is that, we will make the start script inside our package.json file
So you will see this is a file, open it, so this will contain some information about your project
So here, just change it from test to start. And we will provide a value to it of node one index for here
Now we need to create this file, which is the starting point of the application, just create it
In the meantime, let me just show you, in order to get started with stripe, we need to be having a stripe account
So go to stripe.com and login with your account. The login process is pretty easy
Once you login, click on the dashboard option. So the address is dashboard.stripe.com
Here you will land here, click on this option, get your test API keys
If you see, you will get these two keys, publishable key and secret key
So if you click this option, you will get your secret key. So you need to copy all these details, you need to use these details inside your application
So now let me just first of all import express and make it very simple
First of all, we will import express. So we need to require it
We also need to require body parsers. We also need to require our path dependency
So require it. Then we will make a simple express app like this
And then we will make also a post variable. So it will run on either process or EMB when we are in production
If this port is not available, we are running on testing mode
So we will run this on 3000. Simply we will call app.systems, pass the port number
And in the callback function, you can just control log that in that fixed symbol that the app is listening on this port number, which is the pass port number
That's it. Now we need to load the HTML. So whenever we open the application, app.getout
So inside this, this takes the callback function. We need to use our EJS template engine
So for using it, we need to set the view engine like this
Pass the view engine, which is EJS that we have installed. And right here, what we want, we need to render out this
So response.render. And the file name will be simply home.ejs. And here what we want, we need to also pass a key variable, which we will create
So basically we need to create two variables right here at the top, which is publisher key and secret key
So the things that I have shown you. This will be publishable key
And next will be our secret key. So just go to your Sprite dashboard and get all these details
So first of all, I will copy this publishable key. And here I will paste it
And then you will copy the secret key. So this will be different for you
So don't copy mine. Simply you need to copy this secret key
So after this, you need to pass this publishable key. I think you need to pass this publishable key as in the key parameter
So just pass this publishable key parameter. That's it. So now we simply need to make a views folder
And inside the views folder, we need to create this file, which is phone.ezs
So right here in the template guide, I will not write this code here
This will make the video a bit longer. So this is basically a set of xqemons
So I will just copy this, go to my blog and copy paste this code. So basically what we are doing is that we are giving the title Sprite payment demo
Then we have a simple x3 heading, Welcome to Payment USA. Then we have a simple form, which makes the post request to this route, which is Payment
And this has a simple script. The source will be equal to this route
And we have given a simple Sprite.button class to it. And then we are rendering out the dynamic key parameter, which we have published here
You can see that we have sent this publishable key. And then we are rendering it inside the key parameter
We are paying $7000 in dollar currency. So this will be equal to $70
Name of the person, you can change this name to anything else. And the description of the product, Buy a UX Shares Complete Course
That's it. So these are the parameters. So basically if I start the application, and if I just look what is happening here
So if I see, NPM start. The app is started on localhost 3000
So if I just go to this application, you will see, Welcome to Payment USA
If I click this Pay with Card button, you will see your name. This is the description of the product
You can see this is running in test mode. So this is card number, data
This is date that you need to provide, CVC number and pay $70
So if I just click this button, you will see there is also some kind of validation message also
So now we simply need to make this post request, which is go to this route, Payment
So right here inside index.js, we will make this request. So app.post, Splash Payment
So this will have request response as a callback function. So first of all, we need to also import our Stripe library and pass the secret key
So right here, we will make a const variable of Stripe. And we need to require the dependency, which is Stripe
And then we need to pass our secret key. Like this. That's it
Now inside our post request, and also we have required this body parser
So what we want to do is that we need to use this middleware. So app.use, body parser
Then we have this URL encoded. And here we need to pass a property, which is extended to false
And also, we need to have body parser.json. So just initialize these two lines
So basically, this will initialize the body parser middleware inside your express application
Now inside this post route, the very first thing that we need to do is that we need to create Stripe.customers.create
So basically, this is a method. It creates an object that needs to contain the information about the person who is buying the product
So basically, we will retrieve the email of the person by request.body.stripe-keylist
And then we will also require a source parameter. Inside this, we will store the access token
So request.body.stripe-token. So basically, this is a property by which we can get the access token
After getting this, we will initialize the name property to the person name, which is me, Gautam Sharma
And then we will put an address field also, the address of the person
So this is actually an object that contains the line1 property. So here you can just provide any sort of address, 2, 3, mountain, valleys
New Delhi, like this. Put a comma. Then comes the property of postal code
So here you can provide your postal code. Let's suppose I provide 110092
And then also it contains the property of city. So basically, this city is New Delhi
And also, you have the state property. It is Delhi. After this, we have the last property, which is called as country
So you also need to provide the country. So you can customize this
These are additional options, but we are providing it. After this, this becomes a promise
So right here, we need to handle this by a dot then
So we will have a customer object. This again will be an arrow function
Right here, we need to return. Return sky dot. That is, charges dot create
So here, this is again a method here. So here we need to provide some properties
First is the amount. How many rupees that we need to pay
So 7000 in rupees. And then we need to again provide a description about the product
So this will be a web development product. Then we have the currency property also
In which currency that we need to pay. I will be paying in USD
United States Dollar. And then we have the customer property. Lastly, so customer will be equal to the ID of the customer which is passed
So customer dot ID. That's it. So after this, this again becomes a promise
We need to handle this. Dot then. And once again, once the payment is successful, this will return a task property
We can just say response dot send. That success. And we can even control of this charge value
So this will contain some properties about the transaction. And also it returns an error also if the payment is not successful
Dot catch. Inside it we have the error variable. And then we can simply say response dot send. Error
If any kind of error takes place. That's it. So this was the whole application I think
If I just refresh it, it will automatically start it. If I refresh, click on pay with card
Click on pay with card. You will see, we will provide our email address
And then we will provide a simple card number. Paste it. Then we will provide a simple date
And see, it is supposed to be 2-3-4. Click on the pay option
You will see nice animation will be there. So hopefully, this will say success
You will see. Success is there if I see the control. You will see all this information will be printed out of the transaction
You will see the script URL is also there. So basically, if you want to store this information inside your database
You can store it. And display this information to your user. And store it inside a particular document also
So if I just click here. Inside my scribe dashboard. If I just click here
Refresh, you will see one other payment will be added. If I refresh, you will see $70
So 5th September, 1.38 PM. So in this way guys, you can just integrate the scribe
API payment gateway inside your node.js and express application. All the source code will be there inside the video description
So go to the blog and download the source code. And please like the video, subscribe to the channel
And I will be seeing you in the next tutorial. Thank you