Integrating CashFree in Flutter with Provider State Management

 

Flutter is one of the most popular mobile app development frameworks used today, and integrating payment systems is a critical component of most mobile apps. CashFree is one of the leading payment gateways in India and is used by many developers and businesses for their payment transactions. In this article, we’ll show you how to integrate CashFree in Flutter with Provider state management and a code example.

Advertisement Starts

Advertisement Ends

What is CashFree?

CashFree is a payment gateway that allows businesses and individuals to accept and make payments online. It supports various payment methods, including credit/debit cards, net banking, UPI, and more. CashFree is a popular payment gateway in India, and many developers and businesses use it to integrate payment transactions into their apps.

What is Provider State Management?

State management is an essential part of any Flutter app, and it helps to manage the state of your app as the user interacts with it. Provider is a state management solution that makes it easy to manage state across your entire app. It allows you to create a centralized place to store and update your app’s state, making it easier to manage and update.

Integration of CashFree in Flutter with Provider State Management

To integrate CashFree in Flutter with Provider state management, we need to follow the steps below:

Add the CashFree dependency to your project:

dependencies:

  cashfree_pg: ^1.0.2

Import the CashFree package in your dart file:

import 'package:cashfree_pg/cashfree_pg.dart';

Create a model class to store the transaction details:

class Transaction {

  String orderId;

  double amount;

  String token;

  String customerEmail;

  String customerPhone;

 

  Transaction({

    required this.orderId,

    required this.amount,

    required this.token,

    required this.customerEmail,

    required this.customerPhone,

  });

}

Create a provider class to manage the state of the transaction:

class TransactionProvider extends ChangeNotifier {

  Transaction? _transaction;

 

  void setTransaction(Transaction transaction) {

    _transaction = transaction;

    notifyListeners();

  }

 

  Transaction? get transaction => _transaction;

}

Use the provider to set the transaction details:

final transactionProvider = Provider.of<TransactionProvider>(context, listen: false);

 

transactionProvider.setTransaction(Transaction(

  orderId: "CFTEST${DateTime.now().millisecondsSinceEpoch}",

  amount: 1,

  token: "your-test-token",

  customerEmail: "test@test.com",

  customerPhone: "1234567890",

));

Initiate the payment using the CashFree SDK:

final transactionProvider = Provider.of<TransactionProvider>(context, listen: false);

 

final cashfree = CashfreePG();

cashfree.doPayment(

  transactionProvider.transaction!.orderId,

  transactionProvider.transaction!.amount.toString(),

  transactionProvider.transaction!.customerEmail,

  transactionProvider.transaction!.customerPhone,

  transactionProvider.transaction!.token,

  (Map<dynamic, dynamic> response) {

    // Handle the payment response

  },

);

Handle the payment response:

final transactionProvider = Provider.of<TransactionProvider>(context, listen: false);

 

void handlePaymentResponse(Map<dynamic, dynamic> response) {

  if (response["txStatus"] == "SUCCESS") {

    // Payment successful

  } else {

    // Payment failed

  }

 

  // Clear the transaction details

  transactionProvider.setTransaction(null);

}

Complete Example

import 'package:cashfree_pg/cashfree_pg.dart';

import 'package:flutter/material.dart';

import 'package:provider/provider.dart';

 

void main() {

  runApp(MyApp());

}

 

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MultiProvider(

providers: [

ChangeNotifierProvider(create: (_) =>

TransactionProvider()),

],

child: MaterialApp(

title: 'CashFree Payment',

home: HomePage(),

),

);

}

}

class HomePage extends StatelessWidget {

@override

Widget build(BuildContext context) {

final transactionProvider = Provider.of<TransactionProvider>(context);

return Scaffold(

  appBar: AppBar(

    title: Text("CashFree Payment"),

  ),

  body: Center(

    child: ElevatedButton(

      onPressed: () {

        transactionProvider.setTransaction(Transaction(

          orderId: "CFTEST${DateTime.now().millisecondsSinceEpoch}",

          amount: 1,

          token: "your-test-token",

          customerEmail: "test@test.com",

          customerPhone: "1234567890",

        ));

 

        final cashfree = CashfreePG();

        cashfree.doPayment(

          transactionProvider.transaction!.orderId,

          transactionProvider.transaction!.amount.toString(),

          transactionProvider.transaction!.customerEmail,

          transactionProvider.transaction!.customerPhone,

          transactionProvider.transaction!.token,

          handlePaymentResponse,

        );

      },

      child: Text("Make Payment"),

    ),

  ),

);

}

void handlePaymentResponse(Map<dynamic, dynamic> response) {

final transactionProvider = Provider.of<TransactionProvider>(context, listen: false);

if (response["txStatus"] == "SUCCESS") {

  // Payment successful

} else {

  // Payment failed

}

 

// Clear the transaction details

transactionProvider.setTransaction(null);

} }

class Transaction {

String orderId;

double amount;

String token;

String customerEmail;

String customerPhone;

Transaction({

required this.orderId,

required this.amount,

required this.token,

required this.customerEmail,

required this.customerPhone,

});

}

class TransactionProvider extends ChangeNotifier {

Transaction? _transaction;

void setTransaction(Transaction transaction) {

_transaction = transaction; notifyListeners();

}

Transaction? get transaction => _transaction;

}

In the above example, we’ve created a provider called TransactionProvider to manage the transaction state. We then set the transaction details in the provider using setTransaction method. Once the transaction details are set, we initiate the payment using the CashFree SDK’s doPayment method. We handle the payment response using the handlePaymentResponse method, which updates the transaction state by setting it to null, clearing the transaction details.

Conclusion

Integrating payment gateways like CashFree in Flutter apps is an essential part of app development. With Provider state management, you can manage your app’s state more efficiently, making it easier to manage and update. In this article, we showed you how to integrate CashFree in Flutter with Provider state management, along with a code example. We hope this article helps you in your mobile app development journey.

Follow me on social Media: 

1. Follow me on Facebook: 

    https://www.facebook.com/profile.php?id=100089858752142

2. Follow me on LinkedIn:

    https://www.linkedin.com/in/mohammad-azeem-b37431161/

3. Follow me on Twitter:

    https://twitter.com/Mohamme49054008

4. medium profile: 

    https://medium.com/@azeemkalwar51

5. vocal media profile: 

    https://vocal.media/authors/mohammed-azeem

Thank you and Cheers !