Flutter

Razorpay-Subscription feature in Flutter within 16 hours

120
Saved hours
$3600
Saved money
iconicon
Usecase-img

Almost everything nowadays is executed digitally, even the payments we make to others and the items we purchase from merchants. To make payments possible we need to integrate various payment gateways into our apps.

The commerce industry is growing, and having a secure digital payment gateway setup is essential for e-commerce companies to keep up. Customers appreciate having a choice, and as a seller, you can provide your customers with the choice and versatility to pay as they wish, whether by card or UPI. But how can you get the most out of your payment gateway app?

You can now manage payments for your company from the comfort of your smartphone. Accepting and tracking payments, collecting settlements, gaining comprehensive insights or reports, or retrieving information on successful/failed transactions is no longer a time-consuming activity, no matter how busy you are.

The Challenge

The current app of Razorpay subscription feature is not there, and they have just launched their payment link feature in the app at the end of July 2022.

When creating a Flutter app, the below-mentioned points are to be considered without fail by every Flutter developer, and DhiWise helps them achieve these easily and much more.

  • Clean code
  • Attractive UI UX
  • Accurate live information
  • Seamless Navigations
  • Subscription module

For Integrating the subscription payment go to:
https://razorpay.com/docs/payments/subscriptions/workflow/

The Solution

Razorpay provides an API, and by integrating that API in DhiWise, it took 1 hour to configure navigation, API integration, saving data in preference, and so on till generating the code.

Please note: To get a detailed idea about the integration, you should first visit the RazorPay website which has a detailed guide for the gateway setup. You should also know the basics of Flutter development and Dart language.

DhiWise is a programming platform where developers can convert their designs into developer-friendly code for mobile and web apps. DhiWise automates the application development lifecycle and instantly generates readable, modular, and reusable code. DhiWise helped to create the whole app in lesser time and effort by giving the source code of a full-fledged application.

Image

Steps taken to achieve this using DhiWise:

  • Figma was designed following DhiWise guidelines, with maximum validation
  • Imported a Postman collection of Razorpay API, subscription, and payment link module
  • Set up navigation, API integration, and Response handling
  • Build the app and download the code

Building app within an hour using DhiWise

1. Identifying and upgrading components

As Figma was designed in line with the best standards, code accuracy was over 95%.

Certain incorrectly detected components can be simply updated via the platform. Consequently, the time-consuming feedback loop between engineers and designers was eliminated.

2. Seamless Navigations

Because the designer was clever enough to include the prototype in Figma, DhiWise immediately fetched it, and navigations were managed.

The back button in the App bar was detected automatically, and back navigation was added.

There was a necessity to migrate arguments from one screen to another. It was also extremely feasible to achieve this with DhiWise. It was essential to send the transaction's id from the List screen's API response to the payment detail page in an instance.

3. Extracting a Widget

As the application had both AppBar and BottomBar, the other part of the screens was extracted to be replaced, resulting in the reusability of the AppBar and BottomBar.

4. API Integration

To access the Razorpay API data, all APIs were incorporated into the application utilizing DhiWise's API integration feature.DhiWise helped integrate the API's request with params, headers, and the request body, as well as the API's response binding to the view, saving it in Preference, and managing the status code.

Within 16 hours, 10 displays with live data were built using this combination of features.

In the Subscription module, fetching all the plans and creating the subscription link does require 2-3 hours of coding as need to use shared preference.

A common perspective

Developers tend to resist seeing or touching someone else’s code but, people at DhiWise, are pretty serious about the developer experience you get while building any of the apps. It is understood how code quality is the superior thing in development.

That’s why you get full authority over the source code of the application you build.

And for the source code, you do not have to rely on DhiWise once you build your application. DhiWise prefers the community-accepted libraries and packages inside the generated Flutter mobile application which fits just right! Take GetX as an example.

Also, the application follows MVC architecture which makes it easier for you to customize it and add other features to your application seamlessly.