It’s very clear from the title of this topic that I’m going to show you How to Integrate Razorpay Payment Gateway in your app. There is no extension or any server file is required to host and use to make payments. We are going to use Razorpay Payment Link API to generate payment links and receive payments within the app.
The method is very simple and easy. In this, we are going to use
- Web Component: For make an API request to generating payment links
- WebView Component: To process the payment (for user interaction)
Why should I use this method?
Here are few important points which help you in finding the answer
- You don’t need any extension.
- No need for a hosting server to host any file.
- Simple and easy to integrate and use
- Safe & Secure
- You can also use an external browser instead of Webview.
- It’s 100% Free to use
let’s get started…
Get your KEY ID & KEY SECRET
Get your KEY ID & KEY SECRET from Razorpay Dashboard >Settings > API Keys. Click on generate/Regenerate Key button and get credentials from the popup.
Open your project (builder.niotron.com or you can use this method on any AI2 builder). Please note that the Amount textbox input type is set to Number.
Create 3 Global variables
On Pay Now button click. We have to generate an
Authorization token. All Razorpay APIs are authenticated using
Basic Auth. It expects an
Authorization header for each request in the
Basic base64token format. Here,
base64token is a base64 encoded string of
YOUR_KEY_ID:YOUR_KEY_SECRET. Also, we need to provide
Content-type along with
Authorization in the header.
The amount to be paid using the Payment Link is an integer value. Must be in the smallest unit of the currency. For example, if you want to receive a payment of ₹299.95, you must enter the value 29995, or if ₹10, you must enter the value 1000.
In this example/demo, I’m just sending the required params to the API request for generating a payment link. Also, I am using
callback_url as after the payment is completed/failed/canceled Razorpay will redirect the user to this URL along with the response in query parameters.
Which we’ll use later to check the payment status.
After making the API request on
https://api.razorpay.com/v1/payment_links we’ll get a response in JSON format. We simply have to get the
short_url from it and load this URL in the webview.
Here I’m also using the clock component to keep checking if Razorpay has redirected the user to the
callback_url to display the status of the payment done by the user. Also, I’m storing the payment link id in the plink variable we created earlier for further processing.
A procedure is used to convert URL parameters to JSON. ( Extra blocks are used just to expand and explain clearly. You are free to construct and make it short )
Now, if the user clicks on the cancel payment button we can cancel the generated payment link. By making another API request on
Demo AIA: Test01.aia (8.6 KB)
If you like this guide then do hit button and if you have any queries or suggestions feel free to comment below.