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

[yashwp]

'm opening this customized web app in the inappwebview a Flutter plugin. The web app is opening correctly, but as soon as Razorpay's SDK function createPayment(data) runs it opens a window popup. This popup is now not visible inside the webview.

 @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}, "*");
                ''');
            },
          ),
        ),
      ),
    );
  }

PS - Initialization of RazorPay is working correctly. And we running the Webview on the browser stand alone. The popup is opening correctly.

More details can be found here - https://stackoverflow.com/questions/69423930/how-to-open-the-popup-window-in-the-same-inappwebview-flutter

[github-actions[bot]]

👋 @yashwp

NOTE: This comment is auto-generated.

Are you sure you have already searched for the same problem?

Some people open new issues but they didn't search for something similar or for the same issue. Please, search for it using the GitHub issue search box or on the official inappwebview.dev website, or, also, using Google, StackOverflow, etc. before posting a new one. You may already find an answer to your problem!

If this is really a new issue, then thank you for raising it. I will investigate it and get back to you as soon as possible. Please, make sure you have given me as much context as possible! Also, if you didn't already, post a code example that can replicate this issue.

In the meantime, you can already search for some possible solutions online! Because this plugin uses native WebView, you can search online for the same issue adding android WebView [MY ERROR HERE] or ios WKWebView [MY ERROR HERE] keywords.

Following these steps can save you, me, and other people a lot of time, thanks!

[abdulahath]

have anybody found the solution? I have the same issue. When i click the "pay" button nothing happens on android. On ios it goes to a blank white page. I am using flutter_inappwebview: ^6.0.0-beta.22 & javaScriptCanOpenWindowsAutomatically: true, supportMultipleWindows: true

[vitdan]

I have the same problem with a payment gateway that user "Google PAY". Google Pay button needs to open a popup window that apparently does't work.

[akhandpratap14]

any update

[mkelleherUSSA]

@vitdan @akhandpratap14 Did either of you figure this out? Are we able to process google payments (gpay) through a Flutter app using this webview plugin?

[vitdan]

@mkelleherUSSA it seems that version 6.x.x supports popups:

But I haven't tested yet. Probably i'll have problems upgrading from release 5. Let me know if that works.

[mkelleherUSSA]

@vitdan Thank you. I'll check out that example. Example code can be found here, fyi for v6.x.x:

https://github.com/pichillilorenzo/flutter_inappwebview_examples/blob/main/popup_window/lib/main.dart

[mkelleherUSSA]

@vitdan So... I gave that code a try and it was still no good for me. I might have not implemented it properly, but when I tried it... it still didn't allow Gpay to work with the webview. For Android, I am just going to open a native browser with link to checkout and Gpay. When finished, I am going to call an App Link and open the app at the post-checkout screen. I tried. 🤷‍♂️

Thank you for your help and I hope someone else can find a better solution.

[vitdan]

@vitdan So... I gave that code a try and it was still no good for me. I might have not implemented it properly, but when I tried it... it still didn't allow Gpay to work with the webview. For Android, I am just going to open a native browser with link to checkout and Gpay. When finished, I am going to call an App Link and open the app at the post-checkout screen. I tried. 🤷‍♂️

Thank you for your help and I hope someone else can find a better solution.

That's exactly what we do now on our app! :-) Probably the only possible solution.

[pichillilorenzo]

it seems that version 6.x.x supports popups

Nope, this plugin supports popup almost from the start, for example here is a blog post of 3 years ago about it: https://inappwebview.dev/blog/inappwebview-the-real-power-of-webviews-in-flutter/#how-to-manage-popup-windows-opened-with-target_blank-or-windowopen

Using javaScriptCanOpenWindowsAutomatically: true and supportMultipleWindows: true without implementing the onCreateWindow event doesn't make any sense, as it would do nothing.

API Reference for more details:

• onCreateWindow: https://pub.dev/documentation/flutter_inappwebview/latest/flutter_inappwebview/PlatformWebViewCreationParams/onCreateWindow.html
• javaScriptCanOpenWindowsAutomatically: https://pub.dev/documentation/flutter_inappwebview/latest/flutter_inappwebview/InAppWebViewSettings/javaScriptCanOpenWindowsAutomatically.html
• supportMultipleWindows: https://pub.dev/documentation/flutter_inappwebview/latest/flutter_inappwebview/InAppWebViewSettings/supportMultipleWindows.html

To load the same URL inside the WebView, you can try to check if CreateWindowAction.request properties are not null. If they are null and you can't get the URL from it, then you can only create a new InAppWebView (a custom popup window or using a HeadlessInAppWebView and listen for onLoadStart or onLoadStop event and then dispose it) and get the request URL.

After you are able to get the URL, you can load it inside the current WebView.

By the way, I think that, probably, the best thing to do is to create a new InAppWebView instead of loading the popup URL in the current WebView. If you do that, you can break the logic of the calling WebView.

[richanshah]

I have inappwebivew and from the web view click I am trying to open one URL of my app with different data in external browser but it is not working in android 14, I have done all manifest setting as well.

@pichillilorenzo any idea about this?

InAppWebViewGroupOptions options = InAppWebViewGroupOptions(
    crossPlatform: InAppWebViewOptions(
        useShouldOverrideUrlLoading: true,
        javaScriptCanOpenWindowsAutomatically: true,
        mediaPlaybackRequiresUserGesture: false),
    android: AndroidInAppWebViewOptions(
        useHybridComposition: true, supportMultipleWindows: true),
  );

   Expanded(
              child: InAppWebView(
                initialOptions: controller.options,
                onWebViewCreated: (c) {
                  controller.webViewController = c;
                },
                onLoadStart: (c, uri) {
                  controller.handleLoadNewURL(uri.toString());
                },
                onCreateWindow: (c, createWindowAction) async {
                  controller.openUrl(createWindowAction.request.url.toString());
                  return true;
                },
                initialData: InAppWebViewInitialData(
                    data: controller.content.value,
                    mimeType: 'text/html',
                    encoding: 'utf-8',
                    baseUrl: Uri.parse(AppConstant.musicTogetherWebsite)),
                gestureRecognizers: <Factory<VerticalDragGestureRecognizer>>{
                  Factory<VerticalDragGestureRecognizer>(
                    () => VerticalDragGestureRecognizer(),
                  )
                }, // or null
              ),
            ),

[github-actions[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug and a minimal reproduction of the issue.