Niotron Guide · October 9, 2021 0

How to Integrate Razorpay Payment Gateway In Your App Made On Ai2 Builders – Using Payments API

Payment gateway integration is always a challenge for a developer. Mostly the App developers making apps on Niotron, Kodular, or any other AI2 builders. There are a few extensions available and also some server-based integration too. But today we’ll learn how to set up Razorpay Payment gateway integration by using payment links API and builder default components of Niotron builder.

Please note that we are going to perform the testing in Sandbox mode

Get Razorpay Credentials

Visit the Razorpay dashboard and log in/register to your account. Here we can get our Key ID and Key Secret which we use to create API requests for generating a payment link from Dashboard >Settings > API Keys. For more info visit the Razorpay docs page.

Razorpay Integration Guide - Niotron - Image1

Designer Part

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.

Razorpay Integration Guide - Niotron - Image2

Blocks Part

Here first we have to create three global variables.

  • plink_id
  • YOUR_KEY_ID
  • YOUR_KEY_SECRET
Razorpay Integration Guide - Niotron - Image3

Now On Pay now button click. We have to generate an auth token. Please note that all Razorpay APIs are authenticated using basic auth. For more info on this, you can visit the Razorpay API Reference docs.

 Also, we need to provide Content-type along with Authorization in the header.

Razorpay Integration Guide - Niotron - Image4

Create Payment Link

We have the option to create basic or customized Payment Links. To generate a payment link we have to make a POST request on Razorpay payment API URL along with the payment info like

  • Amount – It 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.
  • Currency – A three-letter ISO code for the currency in which you want to accept the payment. For example, INR.
  • Callback/Redirect URL – Once customers completes the payment, they are redirected to the specified URL.
  • Callback Method – Default value is set to get

We are going to make this POST request when the user clicks on the button.

Razorpay Integration Guide - Niotron - Image5

In response to this API request, we’ll get the payment link/URL (short_url) along with a plink_id (id). Click here to view the JSON response we received in response.

Razorpay Integration Guide - Niotron - Image6

Now here we’ll store the value of id in the plink_id global variable for further use and load the short_url in Web Viewer. Also, we are using a Clock component to keep track of URL change so that, when the user completes the payment Razorpay will redirect the user to our given redirect/callback URL.

Razorpay Integration Guide - Niotron - Image7

Example Of Redirect URL

https://example-callback-url.com/?razorpay_payment_id=pay_Fc8mUeDrEKf08Y&razorpay_payment_link_id=plink_Fc8lXILABzQL7M&razorpay_payment_link_reference_id=TSsd1989&razorpay_payment_link_status=partially_paid&razorpay_signature=b0ea302006d9c3da504510c9be482a647d5196b265f5a82aeb272888dcbee70e

Once the user is redirected to callback/redirect URL. We can see it contains few parameters. So we’ll check the value of parameter payment_link_status. If the value is paid it means the payment is done successfully. So now we can display the status of the payment.

Additional Procedures

We should make a simple procedure to convert/parse parameters from URL and return them as JSON. Please note that this is not compulsory you can skip this and work with any alternative method.

Razorpay Integration Guide - Niotron - Image8

Payment Cancel Button

As we are using Web viewer to load our payment/short_url for processing the payment. We need to provide a Cancel button so if the user wants to cancel it he/she can do it easily. For that, we’ll add a cancel button at the bottom of the web viewer arrangement. Now when a user clicks on this button we have to cancel the payment by making another API request to ensure safety.

Razorpay Integration Guide - Niotron - Image9

In this request, we don’t have to pass anything in the body of the POST request.

Razorpay Integration Guide - Niotron - Image10

Now once we get the response, We simply have to display the status of the payment as Payment Cancelled.

Congratulations! we have successfully integrated the Razorpay payment gateway into our app.

I am providing the demo AIA file so you can have a look and give it a try. If you have any queries or suggestions feel free to write them in the comments below.

Important Links

Other Payment Gateways Integration Gude

//chooxaur.com/4/4573958