Integrate RazorPay in Flutter using SDK

In this blog, we will learn how to integrate payment method using SDK in flutter i.e., “Integrate RazorPay in Flutter using SDK”.

In E-commercial Applications, we need to integrate online payment methods as per the user’s requirements.

there are two methods to integrate payment methods in your flutter application:-
a)Using Web view
b)Using SDK

Here, we will integrate RazorPay using SDK.So without wasting time, Let’s start the stepwise implementation of integrating RazorPay in flutter using SDK.

Check out more about our Flutter app development.

1.Add the Dependency

First of all, you need to add the following flutter Razorpay SDK dependency in your flutter project. I am also adding the flutter toast dependency because I will show the toast message on the success or failure of payment.

you can do whatever you want on success or failure of payment.

dev_dependencies:
  flutter_test:
    sdk: flutter

  razorpay_flutter: ^1.2.7
  fluttertoast: ^8.0.8

dev_dependencies:

flutter_test:

sdk: flutter

razorpay_flutter: ^1.2.7

fluttertoast: ^8.0.8

2.Import the package

Add the following code for importing the packages.

import 'package:razorpay_flutter/razorpay_flutter.dart';
import 'package:fluttertoast/fluttertoast.dart';

1 2	import 'package:razorpay_flutter/razorpay_flutter.dart'; import 'package:fluttertoast/fluttertoast.dart';

3.Code Implementation

I am creating a dummy project in which I am adding a button. With the click of a button, I am navigating on Razorpay SDK and after success or failure of payment, I am showing the toast message.

Add the following code to your project. In the block of code, I am calling 3 methods in my initState.
these methods will handle the success/failure of payments.

  @override
  void initState() {
    super.initState();
    _razorPay = Razorpay();
    _razorPay?.on(Razorpay.EVENT_PAYMENT_SUCCESS, _handlePaymentSuccess);
    _razorPay?.on(Razorpay.EVENT_PAYMENT_ERROR, _handlePaymentError);
    _razorPay?.on(Razorpay.EVENT_EXTERNAL_WALLET, _handleExternalWallet);
  }

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

@override

void initState() {

super.initState();

_razorPay = Razorpay();

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

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

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

}

@override

void dispose() {

super.dispose();

_razorPay?.clear();

}

Now let’s creating the above called methods.

 void _handlePaymentSuccess(PaymentSuccessResponse response) {
    Fluttertoast.showToast(
        msg: "SUCCESS: " + response.paymentId!, toastLength: Toast.LENGTH_SHORT);
  }

  void _handlePaymentError(PaymentFailureResponse response) {
    Fluttertoast.showToast(
        msg: "ERROR: " + response.code.toString() + " - " + response.message!,
        toastLength: Toast.LENGTH_SHORT);
  }

  void _handleExternalWallet(ExternalWalletResponse response) {
    Fluttertoast.showToast(
        msg: "EXTERNAL_WALLET: " + response.walletName!, toastLength: Toast.LENGTH_SHORT);
  }

void _handlePaymentSuccess(PaymentSuccessResponse response) {

Fluttertoast.showToast(

msg: "SUCCESS: " + response.paymentId!, toastLength: Toast.LENGTH_SHORT);

}

void _handlePaymentError(PaymentFailureResponse response) {

Fluttertoast.showToast(

msg: "ERROR: " + response.code.toString() + " - " + response.message!,

toastLength: Toast.LENGTH_SHORT);

}

void _handleExternalWallet(ExternalWalletResponse response) {

Fluttertoast.showToast(

msg: "EXTERNAL_WALLET: " + response.walletName!, toastLength: Toast.LENGTH_SHORT);

}

Now let’s create the last method open the checkout method and call it at the click of button.

  void openCheckout() async {
    var options = {
      'key': 'rzp_test_1DP5mmOlF5G5ag',
      'amount': 2000,
      'name': 'Acme Corp.',
      'description': 'Fine T-Shirt',
      'prefill': {'contact': '8888888888', 'email': 'test@razorpay.com'},
      'external': {
        'wallets': ['paytm','phonepe','tez']
      },
  };

///calling the above method on button click.

     body: Center(
            child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  RaisedButton(onPressed: openCheckout, child: const Text('Open'))
                ])),

void openCheckout() async {

var options = {

'key': 'rzp_test_1DP5mmOlF5G5ag',

'amount': 2000,

'name': 'Acme Corp.',

'description': 'Fine T-Shirt',

'prefill': {'contact': '8888888888', 'email': '[email protected]'},

'external': {

'wallets': ['paytm','phonepe','tez']

};

///calling the above method on button click.

body: Center(

child: Row(

mainAxisAlignment: MainAxisAlignment.center,

children: <Widget>[

RaisedButton(onPressed: openCheckout, child: const Text('Open'))

])),

I am using all the dummy data in the openCheckout method.

4.Check the Output

Now the code implementation has been completed and it’s time to check the implementation.

Refer to the attached video for the output.

Output when the payment is successful.you can see message is coming after successful payment.

Output when the payment is fail.

Congratulations!!!! you have learned how to integrate razorpay payment method in flutter using SDK.

For more details and methods you can refer to the official doc of flutter here.

For more interesting blogs check out here – https://mobikul.com/blog/

Hope this blog helped you with a better understanding that integrate razorpay payment method in flutter using SDK.

Thanks for reading.😇

Vandana Sharma 27 April 2023

. . .

Integrate RazorPay in Flutter using SDK

1.Add the Dependency

2.Import the package

3.Code Implementation

4.Check the Output

Leave a Comment Cancel Reply

Message Sent!