flutterdartpayment-gatewayflutter-razorpay

Flutter: razorpay payment gateway with custom checkout screen


I have integrated a payment gateway in my flutter app using razorpay. Is it possible to make a custom UI for the checkout page of razorpay?

For the payment process i currently use razorpay.open(options). This opens the default razorpay UI.

My current code:

void _openCheckout() {
  var amount = (double.tryParse(_amountController.text) ?? 0) * 100; // converting to paise
  if (amount <= 0) {
    // Show error message
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('Please enter a valid amount')),
    );
    return;
  }

  var options = {
    'key': 'rzp_live_ILgsfZCZoFIKMb',
    'amount': amount.toInt(),
    'name': 'Testing App',
    'description': 'Payment for your order',
    'prefill': {
      'contact': '8888888888',
      'email': 'test@razorpay.com'
    },
    'external': {
      'wallets': ['gpay', 'phonepe']
    }
  };

  try {
    _razorpay.open(options);
  } catch (e) {
    debugPrint('Error: e');
  }
}

Solution

  • There is an official package for that: razorpay_flutter_customui: ^1.3.3. Though the documentation is insufficient, you can check the GitHub repo and examples.