I try to solve this problem by create a custom widget and using \"flutter_inappwebview\" (with help from ChatGPT).

// Automatic FlutterFlow imports\nimport '/backend/schema/structs/index.dart';\nimport '/flutter_flow/flutter_flow_theme.dart';\nimport '/flutter_flow/flutter_flow_util.dart';\nimport '/custom_code/widgets/index.dart'; // Imports other custom widgets\nimport '/flutter_flow/custom_functions.dart'; // Imports custom functions\nimport 'package:flutter/material.dart';\n// Begin custom widget code\n// DO NOT REMOVE OR MODIFY THE CODE ABOVE!\n\nimport 'package:flutter_inappwebview/flutter_inappwebview.dart'; \n\nclass CustomInAppWebView extends StatefulWidget {\n  const CustomInAppWebView({\n    Key? key,\n    this.width,\n    this.height,\n    this.webUrl,\n    this.callbackForClose,\n    this.callbackForNavigate,\n  }) : super(key: key);\n\n  final double? width;\n  final double? height;\n  final String? webUrl;\n  final VoidCallback? callbackForClose;\n  final VoidCallback? callbackForNavigate;\n\n  @override\n  State<CustomInAppWebView> createState() => _CustomInAppWebViewState();\n}\n\nclass _CustomInAppWebViewState extends State<CustomInAppWebView> {\n  InAppWebViewController? webView;\n\n  @override\n  Widget build(BuildContext context) {\n    return SizedBox(\n      width: widget.width ??\n          double.infinity, // fall back to full width if width is null\n      height: widget.height ??\n          double.infinity, // fall back to full height if height is null\n      child: InAppWebView(\n        initialUrlRequest: URLRequest(\n            url: Uri.parse(widget.webUrl ??\n                \"about:blank\")), // fall back to about:blank so browser doesn't error\n        onWebViewCreated: (InAppWebViewController controller) {\n          webView = controller;\n        },\n        onLoadStop: (InAppWebViewController controller, Uri? url) async {\n          if (webView != null) {\n            webView!.addJavaScriptHandler(\n                handlerName: 'handler',\n                callback: (args) {\n                  String command = args[0][\"command\"];\n                  switch (command) {\n                    case \"close\":\n                      if (widget.callbackForClose != null) {\n                        widget.callbackForClose!();\n                      }\n                      break;\n                    case \"navigate\":\n                      if (widget.callbackForNavigate != null) {\n                        widget.callbackForNavigate!();\n                      }\n                      break;\n                    default:\n                      break;\n                  }\n                });\n          }\n        },\n      ),\n    );\n  }\n}

Then from the Website, it can communicate with this custom widget by send the HTML5 Post Message like this:

window.flutter_inappwebview.callHandler('handler', {\"command\": \"navigate\"});
window.flutter_inappwebview.callHandler('handler', {\"command\": \"close\"});

Hope this can help someone.

Payment Gateway Integration in Webview