Integrate Instamojo 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 Instamojo 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 Instamojo Credentials

Visit the Instamojo and log in /register to your account. Here we can get our API key and Auth token which we use to create API requests for generating a payment link. For more info visit the Instamojo docs page.

API URLs

• Sandbox Mode: https://test.instamojo.com/api/1.1/
• Live Mode: https://www.instamojo.com/api/1.1/payment-requests/

Designer Part

Here we are going to take one web component to make API requests for generating payment link. And Web Viewer to process the payment. Please note that according to Instamojo payment request API user/buyer_name, email, phone, amount, and purpose are required. We must have to provide these details.

Blocks Part

First, we need to create few global variables. payment_id, X_Api_Key, and X_Auth_Token.

Now, On button click,

Please note that there is no need to modify the redirect_url.

Now from the response of API call. we’ll simply check if the status is true. If it’s false then there is something wrong with the API request that we have to check and try again.

If true, then we’ll get the Payment ID and the Long/Payment URL. Here we’ll store the payment id for further use and load the long/payment URL in the web viewer. Also, we’ll hide the vertical arrangement VA_StartPayment and show VA_Instamojo.

Here I have made a procedure to enable/disable the clock and also added a navigation option in the web viewer to move back to the previous page if needed using the back button.

Here we also have a button to close the web view and cancel the payment.

Congratulations! we have successfully integrated the Instamojo 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

• Download Demo AIA
• Visit Niotron Community Post
• Video Tutorial (Coming Soon)