Payments in Flutter with Razorpay Payment Gateway

Payments in Flutter with Razorpay Payment Gateway

Integrating In-App payments in Flutter can be done in less than 15 minutes with Razorpay which includes Card, Netbanking, UPI, and Wallet.

Integrating In-App payments in flutter can be done in less than 15 minutes with Razorpay which includes Card, Netbanking, UPI, and Wallet.

If you prefer videos here is Step by Step video on how to do the same.

Source Code

Install Flutter


Okay so let’s start.

Step 1: Create a Flutter Project or Use a preexisting project.

We will start by getting rid of all the comments in the main.dart and getting rid of MyHomePage() stateful widget

Step 2: Add Razorpay official plugin to pubspec.yaml.

razorpay_flutter: ^1.1.4

Step 3: Create a folder/package inside the lib for the homepage, I am naming it “views”

then create a file

Razorpay package needs two things

  • functions for various events (payment successful, Wallet, Error)
  • another function to open the payment gateway

we need to provide these

  • key
  • amount
  • name
  • description
  • prefill (like contact number and email)
  • external wallets

Step 4: Import material at home.dart and create a stateful widget called Home then create initState which is a function called when the screen loads.

@override
  void initState() {
    super.initState();

razorpay = new Razorpay();

razorpay.on(Razorpay.EVENT_PAYMENT_SUCCESS, handlerPaymentSuccess);
razorpay.on(Razorpay.EVENT_PAYMENT_ERROR, handlerErrorFailure);
razorpay.on(Razorpay.EVENT_EXTERNAL_WALLET, handlerExternalWallet);
}

Okay so now we need to create all these functions which we defined ( handlerPaymentSuccess, handlerErrorFailure, handlerExternalWallet)

Step 5: Create handler functions

void handlerPaymentSuccess(){
    print("Pament success");
    Toast.show("Pament success", context);
  }

void handlerErrorFailure(){
    print("Pament error");
    Toast.show("Pament error", context);
}

void handlerExternalWallet(){
    print("External Wallet");
    Toast.show("External Wallet", context);
}

Step 6: Now we will create a function to open the payment gateway and provide the required fields

void openCheckout(){
    var options = {
      "key" : "[YOUR_API_KEY]",
      "amount" : num.parse(textEditingController.text)*100,
      "name" : "Sample App",
      "description" : "Payment for the some random product",
      "prefill" : {
        "contact" : "2323232323",
        "email" : "[email protected]"
      },
      "external" : {
        "wallets" : ["paytm"]
      }
    };

try{
razorpay.open(options);
}catch(e){
print(e.toString());
}
}

for the amount I have converted the text which I get from the text field through TextEdittingController to num and multiplied with 100 because by default, it will be num divided by 100 for ( values like 4.56, …).

Step 7: Creating the user interface to make things easy to understand we are just going to have a text field and a button that’s all.

Here is the code that will be returned by the Widget build.

Scaffold(
  appBar: AppBar(
    title: Text("Razor Pay Tutorial"),
  ),
  body: Padding(
    padding: const EdgeInsets.all(30.0),
    child: Column(
      children: [
        TextField(
          controller: textEditingController,
          decoration: InputDecoration(
            hintText: "amount to pay"
          ),
        ),
        SizedBox(height: 12,),
        RaisedButton(
          color: Colors.blue,
          child: Text("Donate Now", style: TextStyle(
            color: Colors.white
          ),),
          onPressed: (){
            openCheckout();
          },
        )
      ],
    ),
  ),
);

over here onpressed I am calling the function which we created to open the payment gateway

flutter mobile-apps programming developer web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How long does it take to develop/build an app?

This article covers A-Z about the mobile and web app development process and answers your question on how long does it take to develop/build an app.

Hire Mobile App Developers in USA

AppClues Infotech is the best mobile app development company in New York that offers custom mobile app development & design services for Android and iOS.

Top Mobile App Developers & Leading App Development Companies in UK

Profusely examined top Mobile App Development companies in UK with ratings & reviews to help find the best Mobile App Development solution providers.

Top Mobile App Development Company in Texas

AppClues Infotech is the best mobile app development company in New York that offers custom mobile app development & design services for Android and iOS.

Top Mobile App Development Company in Pennsylvania

AppClues Infotech is the best mobile app development company in New York that offers custom mobile app development & design services for Android and iOS.