Integrating Razorpay in Flutter with Bloc State Management

Razorpay is a popular payment gateway in India that allows developers to integrate payment options into their apps easily. In this blog, we will learn how to integrate Razorpay in a Flutter app and manage the payment state using Bloc state management.

Prerequisites:

• A basic knowledge of Flutter and Dart programming

• A basic understanding of Bloc state management

• A Razorpay account and API Key

Step 1: Create a new Flutter project

To create a new Flutter project, open Android Studio or Visual Studio Code and go to the ‘File’ menu and select ‘New Flutter Project’. Select the ‘Flutter Application’ option and give a name to your project.

Step 2: Add the Razorpay Package

To add the Razorpay package, go to the ‘pubspec.yaml’ file in your Flutter project and add the following dependency:

dependencies:

flutter:

sdk: flutter

razorpay_flutter: ^1.2.2

Step 3: Create a Bloc for Payment State Management

In this step, we will create a Bloc for payment state management. To do this, we will create a new directory called ‘bloc’ and inside that directory, we will create a new file called ‘payment_bloc.dart’. This file will contain the Bloc class and events.

import 'dart:async';

class PaymentBloc {

final _stateController = StreamController<PaymentState>();

Stream<PaymentState> get state => _stateController.stream;

void dispose() {

_stateController.close();

}

void updateState(PaymentState state) {

_stateController.sink.add(state);

}

void addOrder(Order order) {

_orderController.sink.add(order);

}

}

enum PaymentState {

IDLE,

LOADING,

SUCCESS,

ERROR,

}

class Order {

final int amount;

final String orderId;

Order({this.amount, this.orderId});

}

final paymentBloc = PaymentBloc();

In the above code, we have created a Bloc class called ‘PaymentBloc’. This class has a StreamController called ‘_stateController’. This StreamController is responsible for managing the payment state. We have defined an enumeration called ‘PaymentState’ that contains all the possible payment states. We also have a class called ‘Order’ that contains the details of an order.

Step 4: Integrate Razorpay in the Flutter app

In this step, we will integrate Razorpay in the Flutter app. To do this, we will create a new screen called ‘PaymentScreen’ and inside this screen, we will add the Razorpay widget.

import 'package:flutter/material.dart';

import 'package:razorpay_flutter/razorpay_flutter.dart';

import 'package:myapp/bloc/payment_bloc.dart';

class PaymentScreen extends StatefulWidget {

@override

_PaymentScreenState createState()

=> _PaymentScreenState();

}

class _PaymentScreenState extends State<PaymentScreen> {

Razorpay _razorpay;

@override

void initState() {

super.initState();

_razorpay = Razorpay();

_razorpay.on(Razorpay.EVENT_PAYMENT_SUCCESS, _handlePaymentSuccess);

_razorpay.on(Razorpay.EVENT_PAYMENT_ERROR, _handlePaymentError);

}

@override

void dispose() {

super.dispose();

_razorpay.clear();

}

void openCheckout() {

var options = { 'key': 'your_razorpay_key',

'amount': paymentBloc.state.amount,

'order_id': paymentBloc.state.orderId,

'name': 'My App',

'description': 'Payment for Order',

'prefill': {'contact': '', 'email': ''},

'external': { 'wallets': ['paytm'] }

};

_razorpay.open(options);

}

void _handlePaymentSuccess(PaymentSuccessResponse response) { paymentBloc.updateState(PaymentState.SUCCESS);

}

void _handlePaymentError(PaymentFailureResponse response) { paymentBloc.updateState(PaymentState.ERROR);

}

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text('Payment Screen'),

),

body: StreamBuilder(

stream: paymentBloc.state,

initialData: PaymentState.IDLE,

builder: (context, snapshot) {

return Container(

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: [

Text( 'Payment State: ${snapshot.data.toString().split('.').last}',

style: TextStyle(fontSize: 20), ),

SizedBox(height: 20),

RaisedButton( onPressed: () { paymentBloc.updateState(PaymentState.LOADING);

openCheckout();

},

child: Text('Pay Now'),

),

],

),

);

},

),

);

}

}

In the above code, we have created a StatefulWidget called ‘PaymentScreen’. In the ‘initState’ method, we have initialized the Razorpay object and added event listeners for payment success and payment error. The ‘openCheckout’ method opens the Razorpay checkout and takes the payment. We have also created two event listeners, ‘_handlePaymentSuccess’ and ‘_handlePaymentError’, which update the payment state based on the payment response. The ‘build’ method contains a StreamBuilder that listens to the payment state and displays the payment state in the UI.

Step 5: Add Navigation to the Payment Screen

To add navigation to the payment screen, we will add a new screen called ‘HomeScreen’

and navigate to it from the main screen. In the ‘HomeScreen’, we will add a button to navigate to the ‘PaymentScreen’.

class HomeScreen extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text('Home Screen'),

),

body: Center(

child: RaisedButton(

onPressed: () {

Navigator.push(

context,

MaterialPageRoute(builder: (context) => PaymentScreen()),

);

},

child: Text('Go to Payment Screen'),

),

),

);

}

}

In the above code, we have created a StatelessWidget called ‘HomeScreen’. The ‘build’ method contains a button that navigates to the ‘PaymentScreen’ when it is pressed.

Step 6: Update the Main Method

Finally, we will update the main method to show the ‘HomeScreen’ as the initial screen.

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Razor Pay with Bloc',

home: HomeScreen(),

);

}

}

In the above code, we have created a StatelessWidget called ‘MyApp’. The ‘build’ method returns a MaterialApp that shows the ‘HomeScreen’ as the initial screen.

And that’s it! With these simple steps, we have successfully integrated Razorpay in flutter with Bloc state management. You can now run your app and make a payment through Razorpay.

Conclusion

In this tutorial, we have learned how to integrate Razorpay in flutter with Bloc state management. Bloc state management is a powerful and flexible approach to manage the state of your flutter app. By using Bloc, you can separate the business logic from the UI logic and make your code more maintainable. Razorpay is a payment gateway that makes it easy to accept payments in India. By integrating Razorpay with Bloc, you can manage the payment state in a clean and organized manner.

I hope you have found this tutorial helpful. If you have any questions, please leave a comment below. Happy coding!