"flutter_razorpay_web" is a Flutter plugin designed to facilitate smooth integration of Razorpay's payment gateway services specifically for web-based Flutter applications.
Add this to dependencies in your app's pubspec.yaml
flutter_razorpay_web: ^latestRun flutter packages get in the root directory of your app.
Include checkout.js in index.html file inside your web folder
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>For e.g,-
<body>
<script>
window.addEventListener('load', function(ev) {
// Download main.dart.js
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
},
onEntrypointLoaded: function(engineInitializer) {
engineInitializer.initializeEngine().then(function(appRunner) {
appRunner.runApp();
});
}
});
});
</script>
<!-- razorpay checkout lib -->
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
</body>Sample code to integrate
import 'package:flutter_razorpay_web/flutter_razorpay_web.dart';create instance
late RazorpayWeb _razorpayWeb;The handle events as per razorpay response
void _onSuccess(RpaySuccessResponse response) {
// todo: your logic
}
void _onCancel(RpayCancelResponse response) {
// todo: your logic
}
void _onFailed(RpayFailedResponse response) {
// todo: your logic
}Configure methods
@override
void initState() {
super.initState();
_razorpayWeb = RazorpayWeb(
onSuccess: _onSuccess,
onCancel: _onCancel,
onFailed: _onFailed,
);
}Clear/close
@override
void dispose() {
_razorpayWeb.clear();
super.dispose();
}Now open razopay payment gateway
void getOrderId() {
/// todo: generate order id as per razorpay official documentation.
/// ref: https://razorpay.com/docs/payments/server-integration/nodejs/payment-gateway/build-integration/#13-create-an-order-in-server
/// generate order id on your backend otherwise you may face CORS-policy issue in web.
/// after generation of order id, then call _makePayment
_makePayment(
amount: '100',
orderId: 'order_DaZlswtdcn9UNV',
keyId: 'test_Lxtrdfhfvdhja',
);
}
void _makePayment({
required String amount,
required String orderId,
required String keyId,
}) {
/// create payment options
/// you can modify as per your requirements.
/// Ref: https://razorpay.com/docs/payments/server-integration/nodejs/payment-gateway/build-integration/#code-to-add-pay-button
final Map<String, dynamic> options = {
"key": keyId,
"amount": amount,
"currency": "INR",
"order_id": orderId,
"timeout": "240",
"name": "Your Organization Name",
"description": "your description",
"prefill": {"contact": "+910000000000"},
"readonly": {"contact": true, "email": true},
"send_sms_hash": true,
"remember_customer": false,
"retry": {"enabled": false},
"hidden": {"contact": false, "email": false}
};
/// config razorpay payment methods.
/// This is a "optional" step if you want
/// to customize your payment methods then use this step "options["config"]",
/// otherwise you can skip this step .
/// You can also modify as per your requirements.
/// Ref: https://razorpay.com/docs/api/payments/payment-links/customise-payment-methods/
options["config"] = {
"display": {
"blocks": {
"utib": {
"name": "Pay using Axis Bank",
"instruments": [
{
"method": "card",
"issuers": ["UTIB"]
},
{
"method": "netbanking",
"banks": ["UTIB"]
}
]
},
"other": {
"name": "Other Payment modes",
"instruments": [
{"method": "card"},
{"method": "netbanking"},
{"method": "wallet"}
]
}
},
"hide": [
{
"method": "upi",
},
{"method": "emi"}
],
"sequence": ["block.utib", "block.other"],
"preferences": {"show_default_blocks": false}
}
};
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent