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

Question

I've integrated the RazorPay Custom Checkout, where I have created a custom design for the good UX.

I'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.

Flutter code to invoke 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}, "*");
                ''');
            },
          ),
        ),
      ),
    );
  }

Code to invoke the createPayment(): This function is called on the webapp when user clicks a button.

    async makePayment() {
      try {
        const data = {
          callback_url: '<Callback URL>',
          redirect: true,
          amount: 50000,
          email: '[email protected]',
          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 - Initialization of RazorPay is working correctly. And we running the Webview on the browser stand alone. The popup is opening correclty

Solution

If you don't want to open the redirection URL in a separate window. In Razorpay's global configuration you have to pass redirect: true instead of passing it in the data object passed in createPayment() method;

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