如何在同一个inappwebview Flutter中打开弹窗？

Posted 2023-02-22

【中文标题】如何在同一个inappwebview Flutter中打开弹窗？

【英文标题】：How to open the popup window in the same inappwebview Flutter?

【发布时间】：2021-11-24 04:00:51

【问题描述】：

我已集成 RazorPay 自定义结帐，我已在其中为良好的用户体验创建了自定义设计。

我正在inappwebview 和 Flutter plugin 中打开这个定制的网络应用程序。 Web 应用程序可以正确打开，但一旦 Razorpay 的 SDK 函数 createPayment(data) 运行，它就会打开一个窗口弹出窗口。这个弹出窗口现在在 webview 中不可见。

调用 webview 的 Flutter 代码：

  @override
  Widget build(BuildContext context) 
    return WillPopScope(
      onWillPop: _handleBackPress,
      child: SafeArea(
        child: Scaffold(
          body: InAppWebView(
            initialUrlRequest: URLRequest(
              url: Uri.parse(Strings.checkoutUrl),
            ),
            initialOptions: InAppWebViewGroupOptions(
              crossPlatform: InAppWebViewOptions(
                clearCache: true,
                javascriptCanOpenWindowsAutomatically: true, // I thought this will help, but not working
                mediaPlaybackRequiresUserGesture: false,
              ),
              android: AndroidInAppWebViewOptions(useHybridComposition: true),
              ios: IOSInAppWebViewOptions(allowsInlineMediaPlayback: true),
            ),
            onWebViewCreated: (controller) async 
              _controller = controller;
              _controller.clearCache();
              _controller.addJavaScriptHandler(
                handlerName: 'PaymentHandle',
                callback: (data) 
                  // ... Will do somthing
                ,
              );
            ,
            onLoadStop: (_, __) async 
              await _controller.evaluateJavascript(source: '''
                  window.parent.postMessage($widget.paymentJsonData, "*");
                ''');
            ,
          ),
        ),
      ),
    );
  

调用createPayment()的代码：当用户点击一个按钮时，这个函数在webapp上被调用。

    async makePayment() 
      try 
        const data = 
          callback_url: '<Callback URL>',
          redirect: true,
          amount: 50000,
          email: '[e-mail]',
          contact: '9123456780',
          order_id: 'order_<order_hash>',
          method: 'upi',
          upi: 
            vpa: this.vpa, // Fetch from input field
            flow: 'collect,',
          ,
        ;

        window.rz.createPayment(data);
        window.rz.focus(); // Found in RazorPay's document to bring the window in focus. Not working on Webview
       catch (e) 
        console.error(e);
      
    ,

PS - RazorPay 的初始化工作正常。我们在浏览器上单独运行 Webview。弹出窗口正在正确打开

【参考方案1】：

如果您不想在单独的窗口中打开重定向 URL。在 Razorpay 的全局配置中，您必须传递 redirect: true 而不是在 data 对象中传递 createPayment() 方法；

 this.configOptions = 
    key: process.env.VUE_APP_API_KEY,
    redirect: true,
     ...
 ;
  // eslint-disable-next-line no-undef
  window.rz = new Razorpay(this.configOptions);