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: '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 - Initialization of RazorPay is working correctly. And we running the Webview on the browser stand alone. The popup is opening correclty

Answer 1

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);