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');
}
}
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.