Integrate Razorpay Payment Gateway Without Using Any Extension Or Server File

:wave: Hello everyone

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 :grinning_face_with_smiling_eyes:

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.




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.




Blocks Part

:one: Create 3 Global variables

  • plink_id
  • YOUR_KEY_ID
  • YOUR_KEY_SECRET

:two: 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.

:three: 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 https://example-callback-url.com/ as 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.

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=paid&razorpay_signature=b0ea302006d9c3da504510c9be482a647d5196b265f5a82aeb272888dcbee70e

Which we’ll use later to check the payment status.

:four: 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 id and 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 )



:five: Now, if the user clicks on the cancel payment button we can cancel the generated payment link. By making another API request on https://api.razorpay.com/v1/payment_links/{plink}/cancel




Demo AIA: Test01.aia (8.6 KB)

If you like this guide then do hit :heart: button and if you have any queries or suggestions feel free to comment below.

8 Likes

Woah!! Another amazin guide… I’ll go try it soon… :grinning:

Fantastic guide thanks so much …

Op bolte sir @tanishraj u r piro :grin::heart_eyes::heart_eyes::fire::fire:

1 Like

It’s so amazing

Another fabulous guide by our professional @tanishraj
Thanks Sir for all This
i personally have learnt very much new things from your guides