Introducing the Razorpay Flutter plugin, simplifying integration of Android and iOS SDKs into your Flutter projects. With seamless documentation and easy-to-follow setup, streamline your payment processes effortlessly. Explore the plugin’s features, troubleshooting tips, and API documentation for a hassle-free payment experience.
Table of Contents
Getting Started
This Flutter plugin serves as a wrapper around our Android and iOS SDKs, providing seamless integration.
Documentation Links
- Android SDK: Razorpay Android Documentation
- iOS SDK: Razorpay iOS Documentation
- Web: No setup required; the package supports web out of the box.
For a comprehensive understanding of Razorpay’s payment flow and steps involved, check out our documentation.
Prerequisites
Before you proceed, make sure you:
- Understand the Razorpay Payment Flow.
- Sign up for a Razorpay Account and generate the API Keys from the Razorpay Dashboard. For testing, use the Test keys to simulate a sandbox environment. No actual monetary transactions occur with Test keys. Switch to Live keys once your application is thoroughly tested and ready to go live.
| Topic | Description |
|---|---|
| Getting Started | This Flutter plugin acts as a bridge for integrating Android and iOS SDKs seamlessly. |
| Documentation Links | Provides links to the Android and iOS documentation for Razorpay, along with a note on web support. |
| Prerequisites | Lists prerequisites such as understanding Razorpay’s payment flow and obtaining API keys from the Razorpay Dashboard. |
| Installation | Guides users through installing the plugin from Pub and setting up dependencies. |
| Usage | Demonstrates how to import the package, create a Razorpay instance, and attach event listeners for payment events. |
| Setup Options | Explains the setup options for configuring Razorpay, including details about payment amount, description, etc. |
| Open Checkout | Shows how to initiate the payment process using Razorpay’s open method. |
| Troubleshooting | Provides solutions for common issues encountered during setup, including enabling bitcode and resolving build failures. |
| API | Describes methods available in the Razorpay class for opening checkout, attaching event listeners, and clearing events. |
| Error Codes | Lists error codes exposed by the Razorpay class and explains their meanings. |
| Event Names | Details the event names exposed by the Razorpay class and their significance. |
| PaymentSuccessResponse | Explains the fields available in the PaymentSuccessResponse object returned after a successful payment. |
| PaymentFailureResponse | Describes the fields present in the PaymentFailureResponse object returned if a payment fails. |
| ExternalWalletResponse | Specifies the field available in the ExternalWalletResponse object when an external wallet is selected. |
Installation
You can find this plugin on Pub. Add the following to the dependencies in your app’s pubspec.yaml:
razorpay_web: ^1.3.2Note for Android:
Ensure that the minimum API level for your app is 19 or higher.
Note for iOS:
Ensure that the minimum deployment target for your app is iOS 10.0 or higher. Also, enable bitcode for your project.
Run flutter packages get in the root directory of your app.
Usage
Sample code for integration can be found in example/lib/main.dart.
Import Package
import 'package:razorpay_web/razorpay_web.dart';Create Razorpay Instance
_razorpay = Razorpay();Attach Event Listeners
The plugin uses event-based communication and emits events when payment fails or succeeds.
_razorpay.on(Razorpay.EVENT_PAYMENT_SUCCESS, _handlePaymentSuccess);
_razorpay.on(Razorpay.EVENT_PAYMENT_ERROR, _handlePaymentError);
_razorpay.on(Razorpay.EVENT_EXTERNAL_WALLET, _handleExternalWallet);The handlers should be defined as follows:
void _handlePaymentSuccess(PaymentSuccessResponse response) {
// Do something when payment succeeds
}
void _handlePaymentError(PaymentFailureResponse response) {
// Do something when payment fails
}
void _handleExternalWallet(ExternalWalletResponse response) {
// Do something when an external wallet was selected
}To clear event listeners, use the clear method on the Razorpay instance:
_razorpay.clear(); // Removes all listenersSetup Options
var options = {
'key': '<YOUR_KEY_HERE>',
'amount': 100,
'name': 'Acme Corp.',
'description': 'Fine T-Shirt',
'prefill': {
'contact': '8888888888',
'email': 'test@razorpay.com'
}
};For a detailed list of options, refer to our documentation.
Join Our Whatsapp Group
Join Telegram group
Open Checkout
_razorpay.open(options);Troubleshooting
Enabling Bitcode
To enable bitcode, modify ios/Podfile:
config.build_settings['ENABLE_BITCODE'] = 'YES'
config.build_settings['SWIFT_VERSION'] = '5.0'iOS Build Failure: ‘razorpay_flutter-Swift.h’ File Not Found
Add use_frameworks! in ios/Podfile.
Gradle Build Failure: Error – minSdkVersion 16 cannot be smaller than version 19
Ensure your Android minimum SDK version is set to at least 19 in android/app/build.gradle.
Errors Related to Class ‘Razorpay’
Ensure you’re not redeclaring the Razorpay class.
Type Mismatch Errors in Payment Event Callbacks
Ensure the callbacks match the expected signatures described in our documentation.
API
Razorpay
open(Map<String, dynamic> options)
Opens Razorpay Checkout.
The options map requires a key property and accepts other optional properties. For a complete list of options, refer to the Checkout documentation.
on(String eventName, Function listener)
Registers event listeners for payment events.
eventName: The name of the event.listener: The function to be called. The listener should accept a single argument of the following type:PaymentSuccessResponseforEVENT_PAYMENT_SUCCESSPaymentFailureResponseforEVENT_PAYMENT_FAILUREExternalWalletResponseforEVENT_EXTERNAL_WALLET
clear()
Clears all event listeners.
Error Codes
Error codes are exposed as integers by the Razorpay class. They are available as the code field of the PaymentFailureResponse instance passed to the callback.
Event Names
Event names are exposed as strings by the Razorpay class.
EVENT_PAYMENT_SUCCESS: The payment was successful.EVENT_PAYMENT_ERROR: The payment was not successful.EVENT_EXTERNAL_WALLET: An external wallet was selected.
PaymentSuccessResponse
Field Name: paymentId
- Type: String
- Description: The ID for the payment.
Field Name: orderId
Field Name: signature
- Type: String
- Description: The signature to be used for payment verification. (Only valid for orders, null otherwise)
PaymentFailureResponse
Field Name: code
- Type: int
- Description: The error code.
Field Name: message
- Type: String
- Description: The error message.
ExternalWalletResponse
Field Name: walletName
- Type: String
- Description: The name of the external wallet selected.
Join Our Whatsapp Group
Join Telegram group
FAQs
What is the purpose of this Flutter plugin?
This Flutter plugin acts as a wrapper around Razorpay’s Android and iOS SDKs, facilitating seamless integration into Flutter apps.
Where can I find documentation for Razorpay’s SDKs?
You can access documentation for Razorpay’s Android SDK here and for the iOS SDK here. For web support, no setup is required as the package supports web out of the box.
What are the prerequisites before using this plugin?
Before proceeding with integration, ensure you understand Razorpay’s payment flow. Additionally, sign up for a Razorpay Account and generate API Keys from the Razorpay Dashboard. For testing purposes, use Test keys to simulate a sandbox environment. Only switch to Live keys once your application is thoroughly tested and ready to go live.
How do I install the Razorpay Flutter plugin?
You can find the plugin on Pub. Simply add the following dependency to your app’s pubspec.yaml file:
razorpay_web: ^1.3.2Ensure your Android app has a minimum API level of 19 or higher, and for iOS, a minimum deployment target of iOS 10.0 or higher is required. Don’t forget to enable bitcode for your iOS project.
Where can I find sample code for usage?
Sample code for integration can be found in example/lib/main.dart within the plugin package.
How can I handle payment events?
To handle payment events, attach event listeners using the on method of the Razorpay instance. Event names include EVENT_PAYMENT_SUCCESS, EVENT_PAYMENT_ERROR, and EVENT_EXTERNAL_WALLET. Define handlers for these events to perform actions based on the event type.
What troubleshooting steps can I take?
For iOS build failures related to missing files like ‘razorpay_flutter-Swift.h’, ensure use_frameworks! is added in the ios/Podfile. For Gradle build failures, ensure the Android minimum SDK version is set to at least 19 in android/app/build.gradle. Additionally, ensure there are no redeclarations of the Razorpay class.
How can I access error codes and event names?
Error codes and event names are exposed by the Razorpay class. Error codes are available as integers in the PaymentFailureResponse, while event names are strings. Refer to the documentation for more details.
What fields are available in the PaymentSuccessResponse, PaymentFailureResponse, and ExternalWalletResponse?
The PaymentSuccessResponse contains fields such as paymentId, orderId, and signature. PaymentFailureResponse includes code and message fields, while ExternalWalletResponse contains the walletName field. These responses provide detailed information about the payment status and any errors encountered.