Razorpay Integration In Flutter Web with Server-side logic

Hey folks, do you want to integrate Razorpay in your flutter app but came to know that official Razorpay package razorpay_flutter doesn’t support web

Hitesh Verma May 28, 2023 · 5 min. read

Hey folks, do you want to integrate Razorpay in your flutter app but came to know that official Razorpay package razorpay_flutter doesn’t support web platform! This article will help you then :-)

Photo by <a href="" target="_blank">rupixen</a> on <a href="" target="_blank">Unsplash</a>
Photo by rupixen on Unsplash

Step 1: Get Razorpay credentials.

Signup for the Razorpay account if you’ve not done it yet and generate API keys in test mode. After successful key generation, you’ll get your Key ID and Key Secret. Save them somewhere for later reference.

Step 2: Load Razorpay library for flutter web.

To use Razorpay in your flutter web, you’ve to load Razorpay’s web library first.
Go to the index.html file inside the web folder of your flutter project and add the below script before closing the body.

       <script src=""></script>

Step 3: Write custom checkout logic for the web.

If you were using Razorpay in android or ios, checkout would’ve been managed by the package itself. Since razorpay_flutter doesn’t support web, we have to write this logic ourselves.

Inside the web folder of your flutter project, create a new folder named js. Inside this new folder create a file named payment.js

Although, naming is not necessary to be the same, but to follow along it is advised to use the same names as above.

Inside the payment.js file write the following piece of code.

function checkout(optionsStr) {
  var options = JSON.parse(optionsStr);
  options.handler = function (response) {
  var rzp1 = new Razorpay(options);
  rzp1.on('payment.failed', function (response) {
        window.sessionStorage.setItem('razorpayStatus', 'FAILED');

checkout() function is receiving the checkout params as a parameter from the flutter side and passing it to the Razorpay web library we’ve imported in the previous step for opening the checkout popup and then writing the payment status in the sessionStorage of the browser.
Also, import this script in index.html file inside web folder of your flutter project.

<script src=""></script>
<script src="js/payment.js"></script>

Step 4: Write Server Code

In order to complete a payment process in Razorpay we have to perform certain tasks:
1. Create an order against the payment
2. Generate hash for the order
3. Start checkout
4. Verify signature hash from the checkout success with the generated hash.
I’ve used firebase cloud function for backend service and written server side code in NodeJS. But you can choice your own server side language the concept remains the same!


const admin = require('firebase-admin');
const Razorpay = require('razorpay');
const crypto = require('crypto');
class RazorPayController {
  constructor() {
      this._razorpay = new Razorpay({
        key_id: '<replace_with_your_Razorpay_Key_ID>',
        key_secret: '<replace_with_your_Razorpay_Key_Secret>'
  // to create order for the payment
  async createOrder(body) {
    const amount = body.amount; // amount in paisa
    if (!amount || isNaN(amount)) {
      throw new Error('Invalid amount');
    const options = { amount, currency: 'INR' };
    const order = await this._razorpay.orders.create(options);
    await admin.firestore()
        status: 'PENDING'
  // to verify payment signature
  async verifyPayment(body) {
    const orderId = body.orderId;
    const razorpayOrderId = body.razorpayOrderId;
    const razorpayPaymentId = body.paymentId;
    const razorpaySignature = body.signature;
    if (!orderId 
      || !razorpayOrderId 
      || !razorpayPaymentId 
      || !razorpaySignature
    ) {
      throw new Error('Invalid request');
    const snap = await admin.firestore()
      .where('orderId', '==', orderId)
    if ( === 0) {
      throw new Error('Invalid order Id');
    const sign = crypto.createHmac(
      status: sign === razorpaySignature ? 'COMPLETED' : 'FAILED'
    }, { merge: true });
    return sign === razorpaySignature;
module.exports = new RazorPayController();


const functions = require("firebase-functions");
const admin = require('firebase-admin');
const cors = require('cors');
const controller = require('./controllers/razorpay_controller');
const app = express();
app.use(cors({ origin: true }));
app.use(express.json());'/createOrder', async (req, res) => {
    const orderId = await controller.createOrder(req.body);
    res.status(200).send({ orderId });
  } catch(e){
    res.status(400).send({errorMessage: e.message});
});'/verifyPayment', async (req, res) => {
    const verified = await controller.verfiyPayment(req.body);
      res.status(200).send({message: 'Order has been verified!'});
    } else {
      res.send(400).send({message: 'Order not verified'});
  } catch (e){
    res.send(400).send({errorMessage: e.message});
exports.r = functions.region('asia-south1').https.onRequest(app);

Step 5: Write methods in flutter to call server side functions

Add dependencies to pubspec.yaml file of your flutter project.

  http: <latest_version>

Create a new folder named service inside lib folder of your flutter project. And create a file named api_service.dart inside this service folder and write following piece of code in the file.

import 'dart:convert';
import 'package:http/http.dart' as http;
class ApiService {
  /// to create order for initiating payment
  ///@param amount in paisa
  Future<String?> createOrder(int amount) async {
    try {
      final res = await _post(
        '<baseURL_of_your_server_hosting>/createOrder', {
        'amount': amount,
      if (res.statusCode == 200) {
        final data = jsonDecode(res.body);
        return data['orderId'];
    } catch (e) {
    return null;
/// verify the payment
  Future<bool> verifyPayment(Map<String, dynamic> body) async {
    try {
      final res = await _post(
      return res.statusCode == 200;
    } catch (e) {
    return false;
  /// send post request
  Future<http.Response> _post(
    String url, 
    Map<String, dynamic> body,
  ) async {
      headers: {'Content-Type': 'application/json'},
      body: jsonEncode(body),
    ).timeout(Duration(seconds: 10));

Step 6: Connecting dots

We have loaded the Razorpay web library, written the checkout function in JS, also written the server side code for creating order and verifying payment signature, and written flutter methods to call these server-side functions. Now all we have to do is to connect all the dots.
Inside the service folder, create another file named payment_service.dart and write the following piece of code in the file.

import 'dart:async';
import 'dart:convert';
import 'dart:js' as js;
import 'dart:html' as html;
import './api_service.dart';
class PaymentService {
  final _apiService = ApiService();
  final _timerDuration = const Duration(seconds: 1);
  Timer? _timer;
  Future<void> startPayment(
    int amount,
    String? name,
    String? email,
    VoidCallback onSuccess,
    VoidCallback onFailed,
  ) async {
    String? orderId = await _apiService.createOrder(amount);
    if (orderId == null){
    final options = {
      'key': '<replace_with_your_Razopay_Key_ID>',
      'amount': amount,                           // amount in paisa
      'name': '<replace_with_your_appname>',
      'order_id': orderId,
      'prefill': {'name': name, 'email': email}
    if (kIsWeb) {
      final data = await _checkout(options);
      if (data['razorpayStatus'] == 'SUCCESS') {
        bool verified = await _verifyOrder(
  /// starts checkout
  Future<Map<String, String>> _checkout(
    Map<String, dynamic> options
  ) async {
      Completer<Map<String, String>> completer = 
        Completer<Map<String, String>>();
      // calls js function defined in Step 3      
      js.context.callMethod('checkout', [jsonEncode(options)]);
      _timer = Timer.periodic(_timerDuration, (timer) {
          Map<String, String> data = Map.fromEntries(
          _timer = null;
    return completer.future;
  /// verify order signature
  Future<bool> _verifyOrder(
    String orderId,
    String razorpayOrderId, 
    String paymentId, 
    String signature,
  ) async {
    return _apiService.verifyOrder({
      'orderId': _orderId,
      'razorpayOrderId': razorpayOrderId,
      'paymentId': paymentId,
      'signature': signature,

The checkout() method of PaymentService is calling the checkout() function of the js we have defined in step 3. And then listening for write to occur in the sessionStorage of the browser.

Step 7: Start payment process.

To the start the payment process, now all you’ve to do is to call the startPayment() method of the PaymentService class, and pass the required arguments.

void toastMessage(bool success){
          content: Container(
            color: success?,
            padding: const EdgeInsets.all(10),
            child: Text(
              success ? 'Payment Successful' : 'Payment Failed',
  () => toastMessage(true), 
  () => toastMessage(false),

That’s it! You’ve successfully integrated the Razorpay payment gateway in your flutter web app. You can now replace the test API Keys with Live API Keys after testing your integration.

Thank you for reading this article. I hope it helped you :-)

Read next

Customized Calendar in Flutter

Hey, have you ever wanted a date-picker in your app but not in a dialog box? And you tried all the dart packages out there but cannot change their UIs

Hitesh Verma May 28, 2023 · 9 min read

Flutter: Custom Cupertino Date Picker

Hitesh Verma in TECH
May 28, 2023 · 6 min read

Flutter | Highlight searched text in results

Hitesh Verma in TECH
May 12, 2023 · 4 min read