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

Question

我集成了 RazorPay Custom Checkout，我在其中创建了良好 UX 的自定义设计。

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

调用 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: 'gaurav.kumar@example.com',
          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 是独立的。弹出窗口正确打开

Answer 1

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

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

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

How to open the popup window in the same inappwebview Flutter?

webview

flutter

razorpay

flutter-inappwebview