Razorpay Flutter Web Integration: Flutter Example

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.

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.2

Note 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 listeners

Setup 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:
• PaymentSuccessResponse for EVENT_PAYMENT_SUCCESS
• PaymentFailureResponse for EVENT_PAYMENT_FAILURE
• ExternalWalletResponse for EVENT_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

• Type: String
• Description: The order ID if the payment was for an order, null otherwise.

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.2

Ensure 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.