Flutter Web 应用程序 razorpay 支付网关支付页面出现 404 错误

Question

我正在尝试在我的 flutter web 应用程序中实现 razorpay 支付网关。在 android 和 Ios 中工作正常，并且在本地主机支付网关中工作正常。但我正在服务器中部署，然后收到 404 页面未找到错误。

这是我的代码

class AcademyWebpayment extends StatefulWidget {
  final String? name;
  final String? keyrzor;
  final int? price;
  final String? orderId;
  final String? email;
  final String? mobileNo;
  final int? subscriptionId;

  AcademyWebpayment({
    this.name,
    this.price,
    this.keyrzor,
    this.orderId,
    this.email,
    this.mobileNo,
    this.subscriptionId,
  });

  @override
  _AcademyWebpaymentState createState() => _AcademyWebpaymentState();
}

class _AcademyWebpaymentState extends State<AcademyWebpayment> {
  bool _isLoading = false;

  @override
  Widget build(BuildContext context) {
    ui.platformViewRegistry.registerViewFactory("rzp-html",(int viewId) {
      IFrameElement element=IFrameElement();
      window.onMessage.forEach((messageEvent) async {
        final dynamic messageData = messageEvent.data;
        final String event = messageData['event'];
        // print('Event Received in callback: ${messageEvent.data}');
        if(event=='MODAL_CLOSED'){
          print('PAYMENT unsuccessfull!!!!!!!${messageEvent.data}');
          Navigator.pop(context);
          Fluttertoast.showToast(
            msg: "Payment Failed!",
            toastLength: Toast.LENGTH_SHORT, // Toast.LENGTH_LONG for a longer duration
            gravity: ToastGravity.BOTTOM, // ToastGravity.TOP for top gravity
            backgroundColor: Colors.black54,
            textColor: Colors.white,
            fontSize: 16.0,
          );
        }
        else if (event == 'PAYMENT_SUCCESS'){
          setState(() {
            _isLoading = true; // Show circular progress indicator
          });
          print('PAYMENT SUCCESSFULL!!!!!!!${messageEvent.data}');
          // Parse the payment response data
          final dynamic paymentResponse = messageData['response'];
          final String paymentId = paymentResponse['razorpay_payment_id'];
          final String orderId = paymentResponse['razorpay_order_id'];
          final String signature = paymentResponse['razorpay_signature'];
          print('PAYMENT SUCCESSFULL!!!!!!!$paymentId');

          SharedPreferences prefs = await SharedPreferences.getInstance();
          int? userId = prefs.getInt('userId');

          final Map<String, dynamic> requestBody = {
            "status": "paid",
            "user_id": userId,
            "order_id": orderId,
            "payment_id": paymentId,
            "subscription_id": widget.subscriptionId,
          };

          try {
            Dio dio = Dio();
            final response = await dio.put(
              "https://api.replsports.com/api/academySubscription/payment",
              data: requestBody,
            );

            if (response.statusCode == 200) {
              setState(() {
                _isLoading = false; // Hide circular progress indicator
              });
              final data = response.data;
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => BottomNavigation(),
                ),
              );

              Fluttertoast.showToast(
                msg: "Paid Successfully",
                toastLength: Toast.LENGTH_SHORT, // Toast.LENGTH_LONG for a longer duration
                gravity: ToastGravity.BOTTOM, // ToastGravity.TOP for top gravity
                backgroundColor: Colors.black54,
                textColor: Colors.white,
                fontSize: 16.0,
              );
            } else {
              setState(() {
                _isLoading = false; // Hide circular progress indicator
              });
              print('Payment Failed: ${response.statusCode}');
            }
          } catch (e) {
            setState(() {
              _isLoading = false; // Hide circular progress indicator
            });
            print('Error in create booking: $e');
          }
        }
      });
      element.requestFullscreen();
      element.src='assets/payments.html?name=${widget.name}&price=${widget.price}&keyrzor=${widget.keyrzor}&orderId=${widget.orderId}&email=${widget.email}&mobileNo=${widget.mobileNo}';
      element.style.border = 'none';

      return element;
    });
    return Stack(
      children: [
        Container(
          child: const HtmlElementView(viewType: 'rzp-html'),
        ),
        if (_isLoading)
          Container(
            color: Colors.black.withOpacity(0.5),
            child: const Center(
              child: CircularProgressIndicator(),
            ),
          ),
      ],
    );
  }

}

这是我的 html 代码

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width">
<head><title>REPL Sports</title></head>
<body>
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
   const queryString = window.location.search;
   console.log(queryString);
   const urlParams = new URLSearchParams(queryString);
   const name = urlParams.get('name')
   const price = urlParams.get('price')
   const keyrzor = urlParams.get('keyrzor')
   const orderId = urlParams.get('orderId')
   const email = urlParams.get('email')
   const mobileNo = urlParams.get('mobileNo')

      options = {
          "key": keyrzor,
          "amount": price,
          "currency": "INR",
          "name":name,
          "description": "Sports",
          "order_id" : orderId,
          "handler": function (response){
              window.parent.postMessage({ event: "PAYMENT_SUCCESS", response: response }, "*");
          },
          "prefill": {
             "name": name,
             "email":email,
             "contact":"+91-",
           },
           "notes": {
             "address": "Autofy"
          },
          "theme": {
             "color": "#DF0145"
          },
          "modal": {
            "ondismiss": function(){
                window.parent.postMessage({ event: "MODAL_CLOSED" }, "*");
            }
          }
       };
       var rzp1 = new Razorpay(options);
       window.onload = function(e){  //1
          rzp1.open();
          e.preventDefault();
       }
     </script>
</body>
</html>

请给我解决方案如何将 razorpay flutter web 集成到实时服务器中。

Answer 1

我也面临着同样的问题。问题是，当我运行 flutter build web 时，它在资产文件夹内创建了资产文件夹。

所以当我更换这个时： element.src='资产/付款.html？"

有了这个： element.src='assets/assets/ payments.html?"（注意-对于本地主机，您将需要再次更改它）

所以效果很好。这可能不是最好的解决方案，但它解决了问题。