{"id":1717,"date":"2021-08-18T11:15:29","date_gmt":"2021-08-18T11:15:29","guid":{"rendered":"https:\/\/citrusleaf.in\/blog\/?p=1717"},"modified":"2021-08-19T12:55:19","modified_gmt":"2021-08-19T12:55:19","slug":"integrating-razorpay-in-your-flutter-application","status":"publish","type":"post","link":"https:\/\/citrusleaf.in\/blog\/integrating-razorpay-in-your-flutter-application\/","title":{"rendered":"Integrating RazorPay in Your Flutter App : An Ultimate Guide [2021]"},"content":{"rendered":"\n<p>Razorpay is one the fastest growing payment gateway platforms and is easily integrated into Flutter. It allows users to simply accept, process and disburse payments with ease. Specific flutter plugin makes it easy to use within all flutter applications. This acts as a wrapper around the native Android and iOS SDKs.<\/p>\n\n\n\n<p>Razorpay is mainly used in India and the majority of its clients include small businesses having 1M-10M dollars revenue. It has a market share of  1.79%. Few companies currently using it are Spicejet, BookMyShow, Nykaa,  Urbanclap, Zoho, Zomato, Goibibo and many more.\u00a0 <br><br>Razorpay provides products for every payment need. Be it the payment button, payment links, cash-out, subscriptions, auto-pay UPI, it has a solution for all. It comes with easy activation and economic pricing.<\/p>\n\n\n\n<p>Recently, we integrated Razorpay for one of our clients &#8211; <a href=\"https:\/\/citrusleaf.in\/case-studies\/flutter-taxi-booking-app-development\">CabbyLal &#8211; A Taxi Booking App<\/a>. Using Razorpay made the process of payment integration in <a href=\"https:\/\/citrusleaf.in\/flutter-app-development\">flutter application development<\/a> simple, quick and easily testable.<\/p>\n\n\n\n<p>Here is the step by step guide for integrating Razorpay in flutter:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Setting up and generating the API key<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>Create a <a href=\"https:\/\/dashboard.razorpay.com\/#\/access\/signin\">Razorpay account<\/a> and log in to the dashboard.  <\/li><li>Select the mode (<strong>Test<\/strong> &#8211; for testing purpose or <strong>Live &#8211; <\/strong>for production environments) for which you want to generate the API key.<\/li><li>Navigate to <strong>Settings<\/strong> \u2192 <strong>API Keys<\/strong> \u2192 <strong>Generate Key<\/strong> to get the key for the chosen mode. <\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Installation and importing package <\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li> <a href=\"https:\/\/pub.dev\/packages\/razorpay_flutter\">Install Flutter Razorpay<\/a> package<\/li><li>Add the below code to dependencies in your app&#8217;s pubspec.yaml<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>razorpay_flutter: 1.1.0 <\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Run &#8211; flutter packages get within the root directory of your app.<\/li><li>Import package by adding the below code<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>import 'package:razorpay_flutter\/razorpay_flutter.dart';<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Creating an instance and handling events <\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li> Use the below code to make a Razorpay instance. <\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>_razorpay = Razorpay();<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Events and handlers <\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>The Razorpay flutter plugin uses event-based communication and emits events when payments fail or succeed. The event names are exposed via the constants from the Razorpay class<\/li><\/ul>\n\n\n\n<table class=\"wp-block-table aligncenter\"><tbody><tr><td> EVENT_PAYMENT_SUCCESS  <\/td><td> The payment was successful <\/td><\/tr><tr><td> EVENT_PAYMENT_ERROR  <\/td><td> The payment was not successful <\/td><\/tr><tr><td> EVENT_EXTERNAL_WALLET  <\/td><td> The external wallet was selected for payment <\/td><\/tr><\/tbody><\/table>\n\n\n\n<p><\/p>\n\n\n\n<p>Use the on(String event, Function handler) method on the Razorpay instance to connect event listeners.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>void initState() {\n    super.initState();\n    _razorpay = Razorpay();\n    _razorpay.on(Razorpay.EVENT_PAYMENT_SUCCESS, _handlePaymentSuccess);\n    _razorpay.on(Razorpay.EVENT_PAYMENT_ERROR, _handlePaymentError);\n    _razorpay.on(Razorpay.EVENT_EXTERNAL_WALLET, _handleExternalWallet);\n }<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Define the handlers in the class to handle different responses <\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>Future&lt;void> _handlePaymentSuccess(PaymentSuccessResponse response) async {\n    UiUtils.showToast(\"SUCCESS: \", false);\n    String paymentId = response.paymentId;\n    PaymentViewModel paymentViewModel = Provider.of(context, listen: false);\n\n    PaymentModel paymentModel = await paymentViewModel.confirmPayment(\n        bookingId, paymentMode, paymentId);\n\n    if (paymentModel != null) {\n      if (paymentModel.success == 1) {\n        UiUtils.showToast(paymentModel.message, false);\n        Navigator.pushNamedAndRemoveUntil(\n            context, \"\/bookingvisit\", (route) => false);\n      } else {\n        UiUtils.showToast(paymentModel.message, true);\n      }\n    }\n  }\n\n  void _handlePaymentError(PaymentFailureResponse response) {\n    Fluttertoast.showToast(\n        msg: \"ERROR: \" + response.code.toString() + \" - \" + response.message,\n        timeInSecForIos: 4);\n    print(response.toString());\n  }\n\n  void _handleExternalWallet(ExternalWalletResponse response) {\n    Fluttertoast.showToast(\n        msg: \"EXTERNAL_WALLET: \" + response.walletName, timeInSecForIos: 4);\n    print(response.toString());\n  }\n<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>To clear event listeners, use the clear method on the Razorpay instance.<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>_razorpay.clear(); \/\/ Removes all listeners<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Checkout option settings<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>Fill the details along with key as shown in the below code:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>void openCheckout(double totalAmount) async {\n    var options = {\n      'key': UiUtils.paymentKey,\n      'amount': totalAmount * 100,\n      'name': _name,\n      'description': _description,\n      'prefill': {'contact': \u20189999999999\u2019, 'email':\u2019test@gmail.com\u2019},\n      'external': {\n        'wallets': ['paytm']\n      }\n    };\n\n    try {\n      _razorpay.open(options);\n    } catch (e) {\n      debugPrint(e);\n    }\n  }<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Payment Success Response:<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Payment Id<\/strong>: Data Type &#8211; string : The ID for the payment.<\/li><li><strong>Order Id<\/strong>:&nbsp; Data Type &#8211; string : order ID if the payment was for an order, otherwise null.<\/li><li><strong>Signature<\/strong>: Data Type &#8211; string : The signature to be used for payment verification. Only valid for orders, otherwise null. <\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Payment Failure Response:<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>&nbsp;Code<\/strong>: integer The error code.<\/li><li><strong>Message: <\/strong>string The error message. <\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">External Wallet Response:<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Wallet Name<\/strong>: Data type &#8211; string&nbsp;: The name of the external wallet selected.<\/li><\/ul>\n\n\n\n<p>Here are the final sample screenshots of the Razorpay payment gateway integration in flutter application. <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"790\" height=\"444\" src=\"https:\/\/i0.wp.com\/citrusleaf.in\/blog\/wp-content\/uploads\/2021\/08\/razorpay-paymentgateway-screenshots.png?resize=790%2C444&#038;ssl=1\" alt=\"\" class=\"wp-image-1720\" srcset=\"https:\/\/i0.wp.com\/citrusleaf.in\/blog\/wp-content\/uploads\/2021\/08\/razorpay-paymentgateway-screenshots.png?resize=1024%2C576&amp;ssl=1 1024w, https:\/\/i0.wp.com\/citrusleaf.in\/blog\/wp-content\/uploads\/2021\/08\/razorpay-paymentgateway-screenshots.png?resize=300%2C169&amp;ssl=1 300w, https:\/\/i0.wp.com\/citrusleaf.in\/blog\/wp-content\/uploads\/2021\/08\/razorpay-paymentgateway-screenshots.png?resize=768%2C432&amp;ssl=1 768w, https:\/\/i0.wp.com\/citrusleaf.in\/blog\/wp-content\/uploads\/2021\/08\/razorpay-paymentgateway-screenshots.png?w=1920&amp;ssl=1 1920w, https:\/\/i0.wp.com\/citrusleaf.in\/blog\/wp-content\/uploads\/2021\/08\/razorpay-paymentgateway-screenshots.png?w=1580&amp;ssl=1 1580w\" sizes=\"auto, (max-width: 790px) 100vw, 790px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Razorpay is one the fastest growing payment gateway platforms and is easily integrated into Flutter. It allows users to simply accept, process and disburse payments with ease. Specific flutter plugin makes it easy to use&hellip; <\/p>\n","protected":false},"author":2,"featured_media":1721,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[7,10],"tags":[52,260,261,259,262],"class_list":["post-1717","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-development","tag-flutter-app-develoment","tag-flutter-ecommerce","tag-flutter-mobile-app-development","tag-razorpay-flutter","tag-razorpay-international-payments"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/citrusleaf.in\/blog\/wp-content\/uploads\/2021\/08\/Integrating-RazorPay-in-Your-Flutter-An-Ultimate-Guide-20212.png?fit=1200%2C628&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/pei5Vv-rH","_links":{"self":[{"href":"https:\/\/citrusleaf.in\/blog\/wp-json\/wp\/v2\/posts\/1717","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/citrusleaf.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/citrusleaf.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/citrusleaf.in\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/citrusleaf.in\/blog\/wp-json\/wp\/v2\/comments?post=1717"}],"version-history":[{"count":6,"href":"https:\/\/citrusleaf.in\/blog\/wp-json\/wp\/v2\/posts\/1717\/revisions"}],"predecessor-version":[{"id":1725,"href":"https:\/\/citrusleaf.in\/blog\/wp-json\/wp\/v2\/posts\/1717\/revisions\/1725"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/citrusleaf.in\/blog\/wp-json\/wp\/v2\/media\/1721"}],"wp:attachment":[{"href":"https:\/\/citrusleaf.in\/blog\/wp-json\/wp\/v2\/media?parent=1717"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/citrusleaf.in\/blog\/wp-json\/wp\/v2\/categories?post=1717"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/citrusleaf.in\/blog\/wp-json\/wp\/v2\/tags?post=1717"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}