We can use niotron’s paytm component for selling stuffs to users of our app and as most of the users are uisng paytm payment gateway, So its very popular among all now a days and integrating this on our app, makes it more easy to sell stuffs. So let’s learn how we can use this component.
I’m dividing this topic into 3 simple steps
- Creating Paytm Checksum API/Webhook
- Creating a test project on Niotron
- Testing
STEP 1 : Creating Paytm Checksum API/Webhook
In order to use niotron’s paytm component, you have to have a server where you can create checksum for each payment.
But don’t worry i have written a simple php code for this and you are free to use this code too. Get the codes from my Github account.
You’ll get ‘generate-checksum.php’ file there. Download the file and upload it on your hosting/server. After that you’ll have to find the path of this file to access on web.
Example : https://yourdomain.com/path-to-folder/generate-checksum.php
STEP 2 : Creating a test project.
I have made very minimal UI, because the goal of this post is to explain you, how to use the paytm component in niotron. The UI is made in 3 sections,
- Generate Checksum
- Process Payment
- Display Status
Here when generate checksum button clicked, we are sending a request on our ‘generate-checksum.php’ API/Webhook using WEB-Component. And before we send we are adding amount in parameter of the url. So, the final url looks like this
Example : https://yourdomain.com/path-to-folder/generate-checksum.php?amount=55
On Success it return JSON response containing 6 key value pairs.
containing, MERCHANT ID (mid), Order ID (oid), Client ID (cid), Amount & checksum.
Now 1st i parse JSON response using ‘JSON text decode’ block of Web-Component & store it in a global var named ‘server_respopnse’. So that we can use these details to intitiate the payment as shown in Screenshot-2.
Here is the blocks you can see how i have used server-response data to initiate payment.
Right after you click on PAY NOW button it’ll open the paytm payment window on your app. As you can see in Screenshot -3. And once the payment is done it fires the ‘Transaction Response‘ event block of Paytm Component. From there you can check the status of the Payment. Yoy can check screenshot -4 for this.
Click here to get AIA file from Niotron community
Hope you like this explanation, If you have any query related to this coponent or in server setup, feel free to ask in comments below.