How to get the payment gateway response in WebView using flutter

Question

payment gateway form loaded in webview using flutter. when I click the pay button I am not able to get the response success or failure. if it's a successful move to the home screen.

For a native mobile app get a response by using addJavascriptInterface.For flutter where do implement the addJavascriptInterface callback?

Can anyone please help me out? I am stuck for the last 2 days.

  WebView(              
        initialUrl:widget.webpageurl,
          javascriptMode: JavascriptMode.unrestricted,
        javascriptChannels: Set.from([
          JavascriptChannel(
              name: 'ReceiveIframeResponse',
              onMessageReceived: (JavascriptMessage message) {
                print('ReceiveIframeResponse${message.message}');
                var jsonData = jsonDecode(message.message);
                print('jsonData $jsonData');
                if(jsonData['status'] == 'CANCELLED'){
                  // Your code
                }else if(jsonData['status'] == 'SUCCESS'){
                  // Your code
                }
              })
        ]),
          onWebViewCreated: (WebViewController webViewController) {
            _controller.complete(webViewController);
          },
          onProgress: (int progress) {
            print("WebView is loading (progress : $progress%)");

          },
          onPageFinished: (finish) {
            setState(() {
              isLoading = false;
            });

            print("WebView is onPageFinished $finish");


          },

        onPageStarted: (data){
          print("WebView is onPageStarted $data");
        },

      ),

Answer 1

You can use javascript interface callback like this,

WebView(
      initialUrl: widget.webpageurl,
      javascriptMode: JavascriptMode.unrestricted,
      javascriptChannels: Set.from([
        JavascriptChannel(
            name: 'messageHandler',
            onMessageReceived: (JavascriptMessage message) {
              print(message.message);
              var jsonData = jsonDecode(message.message);
              if(jsonData['status'] == 'CANCELLED'){
                // Your code
              }else if(jsonData['status'] == 'SUCCESS'){
                // Your code
              }
            })
      ]),
      onWebViewCreated: (WebViewController webViewController) {
        
      },
    );

You can use this script in your HTMl like this which contain callback function,

<script type="text/javascript">  
    function myCallback(status) {
    var statusData = JSON.stringify(status);
        console.log(statusData)
        messageHandler.postMessage(statusData);
    }
</script>