Hello friends, today in this tutorial I will be showing you that how to integrate the scribe payment gateway inside
Angular 13 application alongside with Node.js and Express as the backend. So this will be a full stack application. You will see this is the demo of the application
A simple pay with scribe button is here. If I click the button here you will see the pop-up window will appear
This is the name and simple description of the product which we have done here
You can also customize this also. I can also change this. So if I go to app.component I can make this as 10 here
So it will change to 10. So if I just again refresh it
So now it will change to 10 here. You will see if I enter email and then the custom text card information that scribe provides you
And here you can fill out any information of your choice. And then click on pay here. And then it will show you the success message after the payment is made here
You will see your payment is complete successfully. And now if I check the scribe dashboard here. If I refresh inside the payment section here you will see
This is a sample wrestling game you will see. Succeed is $10 you will see. This is a customer you will see. Date January 6th, 55 pm
So now to cross check I can also make another payment. Just change the email address here
Let me now add this random email address. And then again repeat the same process
Enter this. And click pay here. And once again you will see the success message
And now if you refresh it you will see once again this will be the description here
With that email address you will see again that email address. Because here you need to change here in the server code you need to change this address here
So we can replace whatever email address that the user write here. You can say request.body.email
So in that way you can do this. So once again if I refresh it
So whatever email address user writes in this will be reflected here. So let me write this email address
And once again repeat the process. Click pay here
And now you will see the notification here. And once again if you check here
And now you will see the customer will be doing things like this. So the beauty of this is that you can also send a receipt here
Click send receipt. And you can send it to the email address
So whichever user has purchased the product. If you click send here it will send out this invoice here
Enter the password of the site account. So it is saying that this is checked. So I can even check the receipt which is sent to me
It is saying what you can see. This is the receipt here
$10 you will see that. So it is a very nice application you will be building here in this full tutorial
If you want to get all the source code you can go to the video description link
I have written the complete blog post on my website coding6x.com. The link will be there inside video description
So all the step by step instruction is given alongside the full course
So I will be just be taking the reference of this blog post
So if you want to follow just go to the video description link. And now to get started guys we will delete all the files here and start from scratch
Let me close all the windows. And go to my desktop directory. Go to projects and open command line here
So here we will be making a new directory which will be stripeangularapp
I will go to this directory stripeangularapp. And here what we will do is that we will open it inside visual studio code text editor
And first of all we will make two directories. First for the flight
And second for the server. And now we will go to the client directory
And here we will initialize new angular project which will be angular stripe app
So just initialize this command and it will say would you like to add angular routing
So I will say no. So press n. So whichever stylistic format you want to use
So it will hardly take 5 to 10 seconds depending upon your internet connection and computer speed
So I will not pause the video. So you just need to watch all the steps that I take in order to build this application
So it will hardly take some time. So in the client folder you will see the file name
So you just need to watch all the steps that I take in order to build this application
So it will hardly take some time. So in the client folder if you open this folder now you will see all the files will be there in the source directory
We will now be working with this file which is app.module. So first of all we need to include our http stripe module whenever we want to make a POST request
So let me just first of all do that. So basically if you go to the video description link I have guided the steps here
So you will see this is the line you need to write here. Inside this
So now it is just taking some time. So just wait after it finishes I will guide you
Now you can see it is finished. Having this. And now we can
Now we can ng serve. I can just start this. So it is saying that it is used to
We need to go to the directory here ng angular private app
And then we will run the angular app by executing ng serve
So now it will be able to run the application. So it is just generating the browser application
It is just compiling it. So just wait. So now you can see it is compiled successfully
Now we can open that project at localhost 4200. So we can go to this project localhost 4200
So this is our project archive. You can see angular stripe is running
So now we can include. Let me close this window. And open this
And here guys you need to include our http client here. So simply you need to copy paste the line
Which is http client module. So don't ignore this red line which are appearing here
No errors are there inside the project. And inside the import statement put a comma
And here you need to import this http client module. That's it
Now you need to close this file. You don't need this file here. Simply close it
And now we will working inside our app.component.html. Simply remove all this code here which is there
So we will write our simple button here. Which will be simply be telling us that what code we need to write here
So we will be having a simple button. So just wait. I am showing you what is the code that you need to write
So we will have a simple h2 heading here. Which will be h2
And here we will say Angular 13 Stripe Payment Gateway. In Node.js and Express
And then we will have a simple button right. And whenever you click this button
We will execute this function which will be. So the function name will be make payment
And here you can pass the dollars. How many dollars you want to receive
I will pass 10 here. And then we will say the label will be the button
Pay with Stripe. That's it. You can customize the button accordingly. You can write CSS also
But in this tutorial I will just follow on the business logic of the application
This is all. Now if you refresh the application it will auto reboot
If you refresh it. It is saying fail to compile. Let me see
It is saying that. You haven't made this function. So which is make payment
So basically you need to move to this app.component.ts file. So we need to make this application
And now guys we need to make that function. Which the button has
You can see this is a button here. Make payment function. We need to have this file also
Let me open side by side. So that I can. Go. Into the individual file
So here you will bind this function. So make payment. So this will be a function here
So basically here we are passing the number. Which is amount. So this will be your type number here
Because this is TypeScript. This is not JavaScript. So you need to be having the types as well
So here guys. If you now refresh it. Your error will be gone here. So basically you need to
Run this. And resolve. So now. No error will be there. There will be simply a heading and a button will be there
So now it is building out the application. Press it. Now you will see
Angular 30. File payment. Date sign. Notices and Express. Pay with type
So now we need to. Handle the logic. Whenever we click this button. We need to
Do the. Do some magic. So now. Basically we have a. Method which automatically execute. Which
This is a life cycle method. Which is ngOnInit. So whenever. Your component
Executes this life cycle method. Automatically executes. Which is ngOnInit. This is a method guys
So basically. NgOnInit. And here inside this method guys. We will pass
We will invoke in method. And we will pass. In the method. And we will pass
In the method. And we will pass. In the method. And we will pass
In the method. And we will pass. So, same line we need to write here
So, inside this, this again will take some options here which will be simply the keys
So, here we need to pass the key. So, here we need to again paste from our stripe dashboard
Simply copy this publishable key and paste it. This will be different for you
So, don't copy my key. And after that, there will be a second option
This will be local, which will be auto, put a comma. And the third option will be the actual token, which will be returned at the client side
So, whenever you submit the credit card information data here, this will generate a unique token
for every transaction. So, this will be called a striped token. So, we need to store this token
And this will be as this is striped script. We need to have any here like this
So, we need to store this token and we need to console log it, just to check that it is
happening or not. Let me console log it. And also guys, what we need to do is that, now you will see this is again happening here
So, we need to, inside the same function, what we need to do is that, we need to open
this payment handler.open. This contains the open method. And here inside this, we need to pass some options
This is a pop-up window will appear. So, the name will be there. You can customize the name
You can provide your own company name. I will provide coding fixture
So, this is a description of the product, whatever you are buying here. I can say a simple snake game, let's suppose
And then we will say how much amount. So, amount will be equal to the amount which is passed and we will multiply it by 100 to
convert to dollars. That's it. So, that's the whole program. So, just put a space here
I think it is creating problem because we haven't put a space
So, guys, this error is coming because we spelled this number as capital N
So, this needs to be small n. So, now you will see the error will be solved here
And this error, we need to declare a variable at the very top here
We haven't declared that variable, payment handler. So, this is the error which is coming here
So, right here, we need to declare this payment handler. So, payment handler
And this will be again of type any and this will be equal to null. That's it
So, just declare this statement here like this. And now you will see this error will be gone
At this moment of time, if I execute this, you will see compile successfully
It will auto refresh. And once again, if I go to the application, localhost 4200, if I refresh it, if I click
pay with scribe, now you will see a popup window will appear with the name of the company
a description of the product which is simple snake game. You can all customize this
Then we have the email card number. So, this pay button will not work because we haven't implemented
Let me submit this, the card, sample card here so that we can print out the scribe token
So, 09. You can provide any date of your choice. Click pay
And now if you click inspect element, go to console. Now you will see this is the scribe token which is returned to you
This is the ID. This is stored inside ID here. This is a token that you need to send to the express server to the backend to actually make the transaction
So, this is a thing here. You can see the email address is also present here, which is the email address which is submitted by the user
So, now what we need to do is that we need to submit this information to the backend
So, at this moment of time, we need to create our backend
So, what we can do is that we can open a new directory, open a new command prompt
So, we are there inside angular-scribe-app. Let me search here. In which directory we are in
So, let me check. Stripe-angular-app. So, in this directory we are in
So, let me open a new command prompt inside server folder. And let me start the angular-js app once again
And sorry, ng-serve. So, here we will create a new express server, guys
So, simply I will go to the... I will open inside the server folder here
This is the server here. So, what I will do is that I will initialize the package.json npm init-y
So, this will have the default options. Now, we simply want to install express
And Corse module also, which is used to make cross-scripting request, Corse
I think that's the two modules that we will need for this tutorial
So, install it. And also, we will need Sprite module also, which will be working at the backend
So, this will hardly take... And also install npm iSprite. That's it
Now, make the index.js file. Just rename this to index.js. And here we need to make the simple express server, guys
So, const express require express. We have to have express app here
We will say app.listen. app.listen. And we will list them on a particular port number, which is 5000
And here we will say console.app is listing on port 5000
So, basically, guys, we need to import now the Sprite dependency Sprite
We need to require it. And inside parentheses here, we need to copy-paste your private key, which is there inside this secret key
Just click this button, reveal test key. And this will be different for you
Simply copy and paste it. Paste it here. And this is very much important
Without it, the transaction cannot be taken place. And also, we need to include a cause dependency
So, require cause. And simply add this middleware, app.use.cause. That's it. And also, we will need the body parser middleware, guys, because we are using the POST request from the Angular application
So, we will need to cache those variables. So, for that, we will need body parser
So, just write here app.use body parser.urlencoded. Extend it to false. And app.use body parser.json
That's it. So, these two lines we need to write for the body parser middleware
This, again, is a built-in dependency. You need not have to install it
Now, we will make that POST request, app.post.checkout. We will call this request as checkout
This will be the request response. And this will be an async request
And now, we have made this POST request. Let me just... We need to call this
We need to pass an information here. So, we will control log the information, which is request for body
We will control log it inside server. So, I need to move back to the client side here
So, here I need to create our POST request. For creating the POST request, we will be creating a service here
So, I will just pause this. So, I will say ng. In order to create a service in Angular, it is very simple
We have a command here, which is ng g s. So, it stands for ng generate service
And then, in the services folder, I need to create this service, which will be called as service
You can call this service anything. But if you go to the video description link, I have given a unique name to it
So, if you just go to... Just here, I have given the unique name here. Checkout
So, you can give any name of your choice. Checkout. So, now it will create this services folder inside the source folder
You will see it has created this. In the apps folder, you will find a services folder, which is there
So, these two files are there. Checkout.service.cs and the second file. We only need to add this single file here, in this file
What we need to do is that, we need to bring some modules here inside this file here
So, if you go to here, So, inside this, once again guys, we need to inject our..
The same thing, we need to require the HTTP module here in the checkout service
So, we will see that. So, we will see that. So, we will see that. So, we will see that
So, now we are successfully getting this data. So, now what we can do is that we can write a simple template here inside a success message here
So, you can see here we are returning this data either success or failure
So, now we can move to the client code here. So, here whenever we are console logging it
So, basically we have, we can have a if condition here that we can just check inside the if
condition. So, if data.success property triple equal to success. So, this is used for comparison in the else log
So, here we will just say success to true and in the else scenario, we will have another
Boolean variable which will be failure and this will be equal to true
So, now we need to declare these two variables at the very top here which will be success
and this will be a Boolean and this will be equal to true, sorry this will be false by
default and similarly we will have failure, this will be again a Boolean and this will
be equal to false. And now in order to access these two variables, we will use the statement called as this.success
and this.failure. So, just use this and now inside our template in order to have this app.component.html
we will after the button, we will have these two statements here which will be simply we
have in. So, this will be a div tag. So, we will be attaching this directory here which is ngx
So, this is a conditional statement. So, whenever it is true, then only this html will be shown to the user
So, this is a variable that we have declared here, success here and similarly we will have
a second one for the failure. So, we will have ng if again for failure
So, when they are true, so this block of code will execute
So, h1 heading you will say your payment is successful and in the failure one, we will
say payment error is there like this. And now basically if you refresh it, if you now run your application once again, if you
try to run this, if you click pay with try once again and if you now provide the information
and now if you click pay here, now basically you will see a success message also on the
screen that it is saying that payment error is there, but data is written to success here
Let me just see why it is showing this. It is clearly a problem here
We have not declared it app.component. I think we have made a mistake here
This needs to be data.data because the data was the property which we are comparing here
So, once again repeat the process. Enter the card information. Enter the month and year, 2, 5, 6
Click pay and now you will see the success message will be shown here
You will see your payment is successful. So, basically if you make any sort of mistake here inside your server side code here, let
me change this value to any value, let's suppose 12. So, this is incorrect because this value should be 1000
So, this is some kind of error has taken place. So, once again if you again click on pay here and now you will see the error will be taking place
So, just enter all the information once again. And now the failure response will come in at the right-hand side of the JSON response
You will see data failure. You will see payment error is there. So, in this way guys I have implemented this full stack application
We have shown you step by step on how to integrate the scribe payment gateway inside your Angular
13 application with the Node.js and Express as the backend. All the source code of the application will be there inside video description
If you want to get all the source code, you can go to the video description link. Please hit the like button, subscribe the channel and also comment on this video and
I will be seeing you in the next video