Hey! Folks 👨🏻‍💻 today we’ll integrate the RazorPay Payment Gateway in Flutter.

Before we get started I urge you to go and check out our Flutter App Development Company.

Let’s start the party.

Create a fresh project to integrate the Razorpay Payment Gateway in Flutter.

Prerequisites

Create a Razorpay Account.
Generate API Keys from the Razorpay Dashboard. Once you are done with the integration, you can generate Live Mode API Keys and replace them in the integration.
Know more about Razorpay Payment Flow.

Step 1.

Add Razorpay_flutter in pubspec.yaml file.

// SDK Version
environment:
  sdk: ">=2.17.6 <3.0.0"

dependencies:
  razorpay_flutter: ^1.3.4

// SDK Version

environment:

sdk: ">=2.17.6 <3.0.0"

dependencies:

razorpay_flutter: ^1.3.4

Step 2.

If you are using Proguard for your builds, you need to add the following lines to the Proguard files:

-keepattributes *Annotation*
-dontwarn com.razorpay.**
-keep class com.razorpay.** {*;}
-optimizations !method/inlining/
-keepclasseswithmembers class * {
  public void onPayment*(...);
}

-keepattributes *Annotation*

-dontwarn com.razorpay.**

-keep class com.razorpay.** {*;}

-optimizations !method/inlining/

-keepclasseswithmembers class * {

public void onPayment*(...);

}

Note: If there is no proguard file in Android app level then create a new file in

the directory – android/app/proguard-rules.pro

Step 3.

Now run the command in the terminal – flutter pub get

Minimum Version Requirement

For Android, ensure that the minimum API level for your app is 19 or higher.
For iOS, ensure that the minimum deployment target for your app is iOS 10.0 or higher. Also, don’t forget to enable bit code for your project.

Step 4.

Create a Razorpay instance.

_razorpay = Razorpay();

1	_razorpay = Razorpay();

Attach event listener to listen to the changes at payment gateway sdk.

_razorpay.on(Razorpay.EVENT_PAYMENT_SUCCESS, _handlePaymentSuccess);
_razorpay.on(Razorpay.EVENT_PAYMENT_ERROR, _handlePaymentError);
_razorpay.on(Razorpay.EVENT_EXTERNAL_WALLET, _handleExternalWallet);

_razorpay.on(Razorpay.EVENT_PAYMENT_SUCCESS, _handlePaymentSuccess);

_razorpay.on(Razorpay.EVENT_PAYMENT_ERROR, _handlePaymentError);

_razorpay.on(Razorpay.EVENT_EXTERNAL_WALLET, _handleExternalWallet);

Creates handler for listeners.

void _handlePaymentSuccess(PaymentSuccessResponse response) {
  // Do something when payment succeeds
}

void _handlePaymentError(PaymentFailureResponse response) {
  // Do something when payment fails
}

void _handleExternalWallet(ExternalWalletResponse response) {
  // Do something when an external wallet is selected
}

void _handlePaymentSuccess(PaymentSuccessResponse response) {

// Do something when payment succeeds

}

void _handlePaymentError(PaymentFailureResponse response) {

// Do something when payment fails

}

void _handleExternalWallet(ExternalWalletResponse response) {

// Do something when an external wallet is selected

}

Add this line after the payment gets successful and in dispose method.

_razorpay.clear(); // Removes all listeners

1	_razorpay.clear(); // Removes all listeners

razorpayOrderId you need to generate this orderId for payment.

you can generate test orderId in postman.

After the successful request, you’ll get this response.

{

      "id": "order_LjC8bnevx4rcVy",
      "entity": "order",
      "amount": 160700,
      "amount_paid": 0,
      "amount_due": 160700,
      "currency": "INR",
      "receipt": "497",
      "status": "created",
      "offer_id": "",
      "attempts": 0,
      "created_at": 1682681270,
      "notes": {
        "source": "",
        "merchant_order_id": 497
      }
    }

{

"id": "order_LjC8bnevx4rcVy",

"entity": "order",

"amount": 160700,

"amount_paid": 0,

"amount_due": 160700,

"currency": "INR",

"receipt": "497",

"status": "created",

"offer_id": "",

"attempts": 0,

"created_at": 1682681270,

"notes": {

"source": "",

"merchant_order_id": 497

}

Check the full Code for the Razorpay Payment gateway.

main.dart file

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Razarpay Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home:  const PaymentRazorPayScreen()
    );
  }
}

void main() {

runApp(const MyApp());

}

class MyApp extends StatelessWidget {

const MyApp({Key? key}) : super(key: key);

// This widget is the root of your application.

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Flutter Razarpay Demo',

theme: ThemeData(

primarySwatch: Colors.blue,

home: const PaymentRazorPayScreen()

);

}

razorpay_payment_screen.dart

class RazorpayPaymentScreen extends StatefulWidget {
  const RazorpayPaymentScreen({Key? key}) : super(key: key);

  @override
  State<RazorpayPaymentScreen> createState() => _RazorpayPaymentScreenState();
}

class _RazorpayPaymentScreenState extends State<RazorpayPaymentScreen> {
  Razorpay? _razorpay;

  @override
  void initState() {
    super.initState();
    try {
      _razorpay = Razorpay();
      _razorpay?.on(Razorpay.EVENT_PAYMENT_SUCCESS, _handlePaymentSuccess);
      _razorpay?.on(Razorpay.EVENT_PAYMENT_ERROR, _handlePaymentError);
      _razorpay?.on(Razorpay.EVENT_EXTERNAL_WALLET, _handleExternalWallet);
    } catch (e) {
      debugPrint(e.toString());
    }
  }

  @override
  void dispose() {
    super.dispose();
    _razorpay?.clear();
  }

  void openCheckout() async {
    var options = {
      'key': "your_test_key",
      'amount': (1 * 100),
      'order_id': "orderData",
      'name': "user_name",
      'description': 'Payment',
      'timeout': 300,
      'prefill': {'contact': "add_phone_no_here", 'email': "add_email_here"},
      // Add this line to add the orderId in razorpay dashboard
      "notes": {"order_id": 1234}
    };
    try {
      _razorpay?.open(options);
    } catch (e) {
      debugPrint(e.toString());
    }
  }

  void _handlePaymentSuccess(PaymentSuccessResponse response) {
    try {
      print(
          "RazorPayResponseData: OrderId: ${response.orderId}, PaymentId: ${response.paymentId}, Signature: ${response.signature}");
    } catch (e) {
      print("RazorPayResponseError: $e");
    }
  }

  void _handlePaymentError(PaymentFailureResponse response) {
    try {
      print("_handlePaymentError ${response.message}");
    } catch (e) {
      print("_handlePaymentError: $e");
    }
  }

  void _handleExternalWallet(ExternalWalletResponse response) {
    try {
      print("WalletResponse ${response.walletName}");
    } catch (e) {
      print("WalletResponseError: $e");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Razorpay Demo App"),
      ),
      body: Center(
        child: TextButton(
          onPressed: openCheckout,
          child: const Text("Pay"),
        ),
      ),
    );
  }
}

class RazorpayPaymentScreen extends StatefulWidget {

const RazorpayPaymentScreen({Key? key}) : super(key: key);

@override

State<RazorpayPaymentScreen> createState() => _RazorpayPaymentScreenState();

}

class _RazorpayPaymentScreenState extends State<RazorpayPaymentScreen> {

Razorpay? _razorpay;

@override

void initState() {

super.initState();

try {

_razorpay = Razorpay();

_razorpay?.on(Razorpay.EVENT_PAYMENT_SUCCESS, _handlePaymentSuccess);

_razorpay?.on(Razorpay.EVENT_PAYMENT_ERROR, _handlePaymentError);

_razorpay?.on(Razorpay.EVENT_EXTERNAL_WALLET, _handleExternalWallet);

} catch (e) {

debugPrint(e.toString());

}

@override

void dispose() {

super.dispose();

_razorpay?.clear();

}

void openCheckout() async {

var options = {

'key': "your_test_key",

'amount': (1 * 100),

'order_id': "orderData",

'name': "user_name",

'description': 'Payment',

'timeout': 300,

'prefill': {'contact': "add_phone_no_here", 'email': "add_email_here"},

// Add this line to add the orderId in razorpay dashboard

"notes": {"order_id": 1234}

};

try {

_razorpay?.open(options);

} catch (e) {

debugPrint(e.toString());

}

void _handlePaymentSuccess(PaymentSuccessResponse response) {

try {

print(

"RazorPayResponseData: OrderId: ${response.orderId}, PaymentId: ${response.paymentId}, Signature: ${response.signature}");

} catch (e) {

print("RazorPayResponseError: $e");

}

void _handlePaymentError(PaymentFailureResponse response) {

try {

print("_handlePaymentError ${response.message}");

} catch (e) {

print("_handlePaymentError: $e");

}

void _handleExternalWallet(ExternalWalletResponse response) {

try {

print("WalletResponse ${response.walletName}");

} catch (e) {

print("WalletResponseError: $e");

}

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: const Text("Razorpay Demo App"),

body: Center(

child: TextButton(

onPressed: openCheckout,

child: const Text("Pay"),

);

}

After the payment gets successful you can check the Razorpay dashboard.

NOTE: There is some issue in Razorpay SDK.

If you’re getting this issue “type ‘String’ is not a subtype of type ‘Map<dynamic, dynamic>?’ in type cast”

You need to add some code in their SDK.

in razorpay_flutter.dart file replace this code with existing code in PaymentFailureResponse function.

Before-

static PaymentFailureResponse fromMap(Map<dynamic, dynamic> map) {
    var code = map["code"] as int?; 
    var message = map["message"] as String?;
    var responseBody = map["responseBody"] as Map<dynamic, dynamic>?;
    return new PaymentFailureResponse(code, message, responseBody);
  }

static PaymentFailureResponse fromMap(Map<dynamic, dynamic> map) {

var code = map["code"] as int?;

var message = map["message"] as String?;

var responseBody = map["responseBody"] as Map<dynamic, dynamic>?;

return new PaymentFailureResponse(code, message, responseBody);

}

After- Line no – 140

class PaymentFailureResponse {
  int? code;
  String? message;
  Map<dynamic, dynamic>? error;

  PaymentFailureResponse(this.code, this.message, this.error);

  static PaymentFailureResponse fromMap(Map<dynamic, dynamic> map) {
    var code = map["code"] as int?;
    var message = map["message"] as String?;
    Map<dynamic?, dynamic?> responseBodyMap;

    if (map["responseBody"] is Map) {
      responseBodyMap = map["responseBody"];
    } else {
      responseBodyMap = json.decode(map["responseBody"]);
    }

    var responseBody = responseBodyMap as Map<dynamic, dynamic>?;
    return new PaymentFailureResponse(code, message, responseBody);
  }
}

class PaymentFailureResponse {

int? code;

String? message;

Map<dynamic, dynamic>? error;

PaymentFailureResponse(this.code, this.message, this.error);

static PaymentFailureResponse fromMap(Map<dynamic, dynamic> map) {

var code = map["code"] as int?;

var message = map["message"] as String?;

Map<dynamic?, dynamic?> responseBodyMap;

if (map["responseBody"] is Map) {

responseBodyMap = map["responseBody"];

} else {

responseBodyMap = json.decode(map["responseBody"]);

}

var responseBody = responseBodyMap as Map<dynamic, dynamic>?;

return new PaymentFailureResponse(code, message, responseBody);

}

That’s all for this Article 🎊 .

Conclusion

Razorpay Payment Gateway in Flutter in this blog we’ve learned how to integrate the razorpay into Flutter app.

Visit the link for Razorpay’s official documents.

Thanks for reading this blog. You can also check other blogs from here for more knowledge.

flutter razorpay_in_flutter

Parveen Baghel 28 April 2023

. . .

Razorpay Payment Gateway in Flutter

Prerequisites

Step 1.

Step 2.

Step 3.

Step 4.

Conclusion

Leave a Comment Cancel Reply

Message Sent!