Integrating Stripe Payments into Angular and Nodejs applications
Hello people, this post mainly discusses on how to integrate the stripe payments gateway into your MEAN stack applications. Integrating stripe payments into your applications is completely free of charge. They won’t charge you for integration and testing of the stripe payments. They charge the businesses on per transaction basis. You check the pricing in their website. It is simple to integrate and very effective to use this payment gateway for the websites.
First, If you don’t have an account in stripe. Then go to stripe website and singup. After you singup it will ask for your email verification. After verifying your email, you can login to stripe account to see the dashboard.
You dont have to activate your account, if you are still in testing of the stripe payments gateway. In the testing mode you don’t have to give any original card details and they wont deduct any amount from any of the testing data.
There are two types of API keys in the stripe payments, one is publishable key and another one is secret key. You can view your API keys by opening the developers dropdown in the left sidebar. And open the API keys page. In the API keys you can find publishable key and secret key.
Let’s start with frontend part with Angular, There is a ngx module for Angular to implement the frontend part of the Stripe payments. Install the ngx-stripe module using the following commands.
npm i ngx-stripe@7.4.4
There is the detailed documentation about this module in the following website. https://www.npmjs.com/package/ngx-stripe/v/7.4.4
There are different ways you can configure the payments options according to your requirements and usages. I will explain you the basic configuration to implement the Stripe payments.
Import the ngx-stripe module into your app.module.ts and add the module to the imports array of the file with the publishable key as the forRoot.
Now open the component where you want to add the stripe payments form. This is the following code i have written according the documentation given for Angular forms.
The form is designed in three parts.
The first input field is the ‘Full Name’ field where the user enter the Name.
The second input field is the ‘Amount’ field to enter the amount.
And the third part is the card element where we have to configure the card elements in the typescript file. And when the user clicks on Buy button it calls the buy function to create a token and send the token to the backend.
In the typescript of the component create formgroup, element and stripeElements as show below screenshots.
We are creating the stripe card in the ngOnInit function. We are using stripeElements to create the card and configure the card with set of style. In this case we have used the basic style specified in the documentation. And then we have the buy function which does the main work. It take the card elements and the name of the user and creates a token and sends the token to the backend server. Backend server analyses the token and process the payments and send the payments status back to the front to display the status in the frontend. And that’s the end of the frontend part of implementation.
Now let’s look into implementing in backend part of the application. We have to install the stripe node modules to analyse the fronted token and proccess the payment. Install the stripe module using the following command.
npm install stripe — save;
Now go to your stripe dashboard and look for secret key in the API key’s page. Copy the secret page and paste it in the server file while inporting it as follows.
Write a post request to receive the payment details from the frontend server. This post request analyses the token and process the requested amount with the following currency and description. Once the payment is successful it sends a json object to the fronted with status of the payment. If you want to look at the data sent from the server, then you can console log the req.body to see the whole object’s data.
That’s it. The integration part is done. Now you can try to test the API’s by try out with few dummy data. You can try a dummy data with all 42’s as card number which takes VISA card. And check if you can track the transaction in your stripe dashboard Payments page.
Great !! I hope you have implement the stripe payment. If you need any more assistance feel free to reach me out at saikiran1298@gmail.com
Thank you!
