Payment Gateway

4 mins

4 mins

Sahaj Rana

Published on May 5, 2025

Razorpay Payment Gateway Integration in Flutter (with Blup)

How to Integrate Razorpay Payment Gateway with Flutter

Introduction to Razorpay and Flutter Integration

As the mobile app market grows exponentially, enabling seamless digital payments has become one of the most important features of any app. Users expect to complete purchases, subscriptions, and donations without friction, and developers must meet those expectations. A single failed transaction or clunky payment experience can result in lost revenue and negative reviews. This is especially true in markets like India, where UPI, wallets, and debit card payments are widespread.

Integrating a payment gateway like Razorpay into your Flutter app means you can offer your users fast, reliable, and secure payment options with minimal effort. Razorpay supports everything from credit/debit cards to UPI, net banking, and wallets like Paytm. Combined with Flutter’s cross-platform development capabilities, this makes for an ideal tech stack for developers building apps for the Indian market. This step-by-step guide will show you how to set up Razorpay in your Flutter project, whether you're using full code or Blup’s low-code interface.

Why Choose Razorpay for Flutter Apps?

Razorpay is India’s leading developer-first payment gateway, offering modern APIs, extensive documentation, and excellent performance. It supports over 100 payment modes, including UPI, cards, net banking, wallets, EMI, and buy-now-pay-later solutions. Razorpay also provides secure fraud detection mechanisms and PCI DSS Level 1 compliance.

Flutter developers benefit from a well-maintained SDK—razorpay_flutter—that works natively on both Android and iOS. You can create and manage Razorpay Orders, listen to payment callbacks, handle external wallets, and use prefill options with ease. Whether you're creating a small MVP or scaling to a large production app, Razorpay grows with you.

Its test environment allows you to simulate real transactions without affecting your billing, making development and QA simple and safe. Razorpay also integrates with backend stacks like Node.js, Firebase, Django, and more. And if you're building apps using Blup’s low-code interface, Razorpay can still be used via custom code modules.

Setting Permissions and Preparing Dependencies

Before we start coding, make sure your local environment is ready. You’ll need:

  • Flutter SDK (2.5 or later recommended)

  • Android Studio or VS Code

  • A Flutter project (you can start fresh or use Blup)

  • A Razorpay test account

  • Emulator or physical device for testing

In addition to that, add internet permissions to your Android app by editing your AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET" />

Without this, the SDK cannot communicate with Razorpay’s servers, and payments will fail silently. You can also enable multiDex and ensure Proguard rules exclude Razorpay if using code obfuscation.

Before we start coding, make sure your local environment is ready. You’ll need:

  • Flutter SDK (2.5 or later recommended)

  • Android Studio or VS Code

  • A Flutter project (you can start fresh or use Blup)

  • A Razorpay test account

  • Emulator or physical device for testing

In addition to that, add internet permissions to your Android app by editing your AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET" />

Without this, the SDK cannot communicate with Razorpay’s servers, and payments will fail silently. You can also enable multiDex and ensure Proguard rules exclude Razorpay if using code obfuscation.

Before we start coding, make sure your local environment is ready. You’ll need:

  • Flutter SDK (2.5 or later recommended)

  • Android Studio or VS Code

  • A Flutter project (you can start fresh or use Blup)

  • A Razorpay test account

  • Emulator or physical device for testing

In addition to that, add internet permissions to your Android app by editing your AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET" />

Without this, the SDK cannot communicate with Razorpay’s servers, and payments will fail silently. You can also enable multiDex and ensure Proguard rules exclude Razorpay if using code obfuscation.

Before we start coding, make sure your local environment is ready. You’ll need:

  • Flutter SDK (2.5 or later recommended)

  • Android Studio or VS Code

  • A Flutter project (you can start fresh or use Blup)

  • A Razorpay test account

  • Emulator or physical device for testing

In addition to that, add internet permissions to your Android app by editing your AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET" />

Without this, the SDK cannot communicate with Razorpay’s servers, and payments will fail silently. You can also enable multiDex and ensure Proguard rules exclude Razorpay if using code obfuscation.

Installing Razorpay Flutter Plugin

In pubspec.yaml, add:

Then run:

Common Mistakes:
  • Plugin not found? Use the latest compatible version.
  • Dependency not working? Clear the cache using flutter pub cache repair.
For Blup users, install via Advanced Code Editor.
Setting Permissions and Preparing Dependencies
For Android:
  • Open AndroidManifest.xml and add:
<uses-permission android:name="android.permission.INTERNET" />
  • Update minSdkVersion in build.gradle to 19 or higher.
For iOS:
  • Add in Info.plist:
<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>
This ensures the app can access Razorpay’s servers and payment interface across all platforms.
Get Packages
Run flutter packages get in the root directory of your app.
Minimum Version Requirement: For Android, ensure that your app's minimum API level 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 bitcode for your project.
In pubspec.yaml, add:


Then run:
Common Mistakes:
  • Plugin not found? Use the latest compatible version.
  • Dependency not working? Clear the cache using flutter pub cache repair.
For Blup users, install via Advanced Code Editor.
Setting Permissions and Preparing Dependencies
For Android:
  • Open AndroidManifest.xml and add:
<uses-permission android:name="android.permission.INTERNET" />
  • Update minSdkVersion in build.gradle to 19 or higher.
For iOS:
  • Add in Info.plist:
<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>
This ensures the app can access Razorpay’s servers and payment interface across all platforms.
Get Packages
Run flutter packages get in the root directory of your app.
Minimum Version Requirement: For Android, ensure that your app's minimum API level 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 bitcode for your project.
In pubspec.yaml, add:


Then run:
Common Mistakes:
  • Plugin not found? Use the latest compatible version.
  • Dependency not working? Clear the cache using flutter pub cache repair.
For Blup users, install via Advanced Code Editor.
Setting Permissions and Preparing Dependencies
For Android:
  • Open AndroidManifest.xml and add:
<uses-permission android:name="android.permission.INTERNET" />
  • Update minSdkVersion in build.gradle to 19 or higher.
For iOS:
  • Add in Info.plist:
<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>
This ensures the app can access Razorpay’s servers and payment interface across all platforms.
Get Packages
Run flutter packages get in the root directory of your app.
Minimum Version Requirement: For Android, ensure that your app's minimum API level 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 bitcode for your project.
In pubspec.yaml, add:


Then run:
Common Mistakes:
  • Plugin not found? Use the latest compatible version.
  • Dependency not working? Clear the cache using flutter pub cache repair.
For Blup users, install via Advanced Code Editor.
Setting Permissions and Preparing Dependencies
For Android:
  • Open AndroidManifest.xml and add:
<uses-permission android:name="android.permission.INTERNET" />
  • Update minSdkVersion in build.gradle to 19 or higher.
For iOS:
  • Add in Info.plist:
<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>
This ensures the app can access Razorpay’s servers and payment interface across all platforms.
Get Packages
Run flutter packages get in the root directory of your app.
Minimum Version Requirement: For Android, ensure that your app's minimum API level 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 bitcode for your project.
Initializing Razorpay in Your App
Import the package at the top of your Dart file:
Then, create a Razorpay instance inside your widget’s state:


This sets up the basic instance needed to launch and handle Razorpay payments in your Flutter app.
Import the package at the top of your Dart file:
Then, create a Razorpay instance inside your widget’s state:


This sets up the basic instance needed to launch and handle Razorpay payments in your Flutter app.
Import the package at the top of your Dart file:
Then, create a Razorpay instance inside your widget’s state:


This sets up the basic instance needed to launch and handle Razorpay payments in your Flutter app.
Import the package at the top of your Dart file:
Then, create a Razorpay instance inside your widget’s state:


This sets up the basic instance needed to launch and handle Razorpay payments in your Flutter app.
Attaching Event Listeners
Attaching Event Listeners to Handle Payment Flow
You must define handlers to track payment success, failure, and wallet selections:
_razorpay.on(Razorpay.EVENT_PAYMENT_SUCCESS, _handlePaymentSuccess);
_razorpay.on(Razorpay.EVENT_PAYMENT_ERROR, _handlePaymentError);
_razorpay.on(Razorpay.EVENT_EXTERNAL_WALLET, _handleExternalWallet);
Define these callback functions and clean up on widget disposal:
@override
void dispose() {
  _razorpay.clear();
  super.dispose();
}
This ensures memory safety and complete event tracking.
Creating a Razorpay Order on the Server
Before starting a transaction, create an order on your backend server using Razorpay’s REST API:
POST https://api.razorpay.com/v1/orders
Body example:
{
  "amount": 50000,
  "currency": "INR",
  "receipt": "receipt#1",
  "payment_capture": 1
}
You’ll get an order_id which is required in your app’s checkout process.
Adding Razorpay Checkout Options in Flutter
Prepare your payment config with details like API key, amount, and the order_id:
var options = {
  'key': 'rzp_test_YourApiKey',
  'amount': 50000,
  'currency': 'INR',
  'name': 'Blup App',
  'description': 'Payment for Order #123',
  'order_id': 'order_9A33XWu170gUtm',
  'prefill': {
    'contact': '9876543210',
    'email': 'example@blup.in'
  },
  'external': {
    'wallets': ['paytm']
  }
};
This configuration feeds Razorpay’s UI with dynamic data.
Opening the Razorpay Checkout Interface
Now, invoke Razorpay’s payment window using:
void openCheckout() {
  try {
    _razorpay.open(options);
  } catch (e) {
    debugPrint('Error: $e');
  }
}
Bind this to a CTA button:
ElevatedButton(
  onPressed: openCheckout,
  child: Text("Pay ₹500"),
)
Verifying Payment
Verifying Payment Signature and Storing Data
Once payment is completed, Razorpay returns:


Your backend should compute and match this signature using HMAC SHA256 encryption to confirm that the payment was authentic.
Testing Your Integration
Razorpay provides a test key that you can use to simulate transactions. Use the following sample data:
  • Card: 4111 1111 1111 1111 | Exp: Any future date | CVV: 123
  • UPI: success@razorpay
  • Wallets: Simulated Paytm or Freecharge options
Test all failure scenarios, like network drop, back-button press, incorrect OTP, etc., and ensure your app handles them gracefully. Run tests on both Android and iOS to confirm behavior.
Verifying Payment Signature and Storing Data
Once payment is completed, Razorpay returns:


Your backend should compute and match this signature using HMAC SHA256 encryption to confirm that the payment was authentic.
Testing Your Integration
Razorpay provides a test key that you can use to simulate transactions. Use the following sample data:
  • Card: 4111 1111 1111 1111 | Exp: Any future date | CVV: 123
  • UPI: success@razorpay
  • Wallets: Simulated Paytm or Freecharge options
Test all failure scenarios, like network drop, back-button press, incorrect OTP, etc., and ensure your app handles them gracefully. Run tests on both Android and iOS to confirm behavior.
Verifying Payment Signature and Storing Data
Once payment is completed, Razorpay returns:


Your backend should compute and match this signature using HMAC SHA256 encryption to confirm that the payment was authentic.
Testing Your Integration
Razorpay provides a test key that you can use to simulate transactions. Use the following sample data:
  • Card: 4111 1111 1111 1111 | Exp: Any future date | CVV: 123
  • UPI: success@razorpay
  • Wallets: Simulated Paytm or Freecharge options
Test all failure scenarios, like network drop, back-button press, incorrect OTP, etc., and ensure your app handles them gracefully. Run tests on both Android and iOS to confirm behavior.
Verifying Payment Signature and Storing Data
Once payment is completed, Razorpay returns:


Your backend should compute and match this signature using HMAC SHA256 encryption to confirm that the payment was authentic.
Testing Your Integration
Razorpay provides a test key that you can use to simulate transactions. Use the following sample data:
  • Card: 4111 1111 1111 1111 | Exp: Any future date | CVV: 123
  • UPI: success@razorpay
  • Wallets: Simulated Paytm or Freecharge options
Test all failure scenarios, like network drop, back-button press, incorrect OTP, etc., and ensure your app handles them gracefully. Run tests on both Android and iOS to confirm behavior.
Final Checklist Before Going Live
Pro Tips:
  • Do not store API keys in your frontend code
  • Use Razorpay Orders API to generate dynamic order IDs
  • Set a timeout or loading screen during the payment flow
Using Razorpay with Blup:
  • Add a custom code block and paste openCheckout()
  • Bind input fields (email, amount, phone) to dynamic UI
  • Use State Manager to reflect payment status and errors
🙋‍♂️ FAQs (20 Developer Questions)
  1. Is Razorpay free to test? Yes, the sandbox mode is free.
  2. Does it work on both Android & iOS? Yes.
  3. What’s the minimum SDK version? Android: 19+, iOS: iOS 10+
  4. What is Razorpay’s currency format? Amount is in paise (₹100 = 10000).
  5. Do I need a backend for the order ID? Yes, for verified payments.
  6. What is a payment signature? A hash used to validate transactions.
  7. Can I integrate with Firebase? Yes.
  8. Is it compatible with Blup? 100% via Custom Code Blocks.
  9. Can I store user payment data? You can store IDs, but not sensitive data.
  10. Can I integrate subscriptions? Yes, via Razorpay’s subscriptions API.
  11. Does it support EMI & wallets? Yes.
  12. Can I test failed transactions? Yes, Razorpay simulates failures.
  13. Is server-side required? For secure apps, yes.
  14. Does Razorpay send a webhook? Yes, optional for live event tracking.
  15. What if payment is incomplete? Capture error and notify user.
  16. Can I open the checkout twice? Yes, with new order_id.
  17. How do I refund a payment? Use the Razorpay dashboard or APIs.
  18. Can I use biometric login post-payment? Yes, independently.
  19. Does Razorpay support custom branding? Limited via their SDK.
  20. Where can I get support? Visit razorpay.com/support
Blup + Razorpay = fast, secure, and scalable app payments in Flutter.
Now you're fully equipped to accept payments in any app you're building, with clear guidance, tested flows, and room to scale. Happy building! 🚀

Table of content
-
Introduction to Razorpay and Flutter Integration
-
Why Choose Razorpay for Flutter Apps?
-
Setting Permissions and Preparing Dependencies
-
Installing Razorpay Flutter Plugin
-
Initializing Razorpay in Your App
-
Attaching Event Listeners
-
Creating a Razorpay Order on the Server
-
Adding Razorpay Checkout Options in Flutter
-
Verifying Payment
-
Final Checklist Before Going Live
Top Blogs
Sahaj Rana
Sahaj Rana
Razorpay Payment Gateway Integration in Flutter (with Blup)
Razorpay Payment Gateway Integration in Flutter (with Blup)
How to Integrate Razorpay Payment Gateway with Flutter 
How to Integrate Razorpay Payment Gateway with Flutter 
Join Blup community
Join Blup community
Follow us on 
Follow us on