Flutter集成PayGoal支付：WebView提交Form Data问题求助

核心问题分析 #

你当前代码的主要问题是请求格式不匹配：

• 你设置了Content-Type: application/x-www-form-urlencoded，但请求体用了jsonEncode(map)，这会把数据转成JSON格式，和接口要求的Form Data（键值对URL编码）不兼容，导致PayGoal接口无法正确解析参数，进而WebView渲染的页面异常。
• 用Dio请求后加载HTML到WebView，会丢失请求后的会话上下文（比如Cookie），导致页面无法正常交互。

修复方案 #

1. 修正WebView的POST请求格式 #

直接让WebView发起符合Form Data格式的POST请求，确保参数编码和Content-Type一致：

WebView(
  javascriptMode: JavascriptMode.unrestricted,
  debuggingEnabled: false,
  onWebResourceError: (error) {
    debugPrint(error.domain);
    print(error);
  },
  zoomEnabled: true,
  backgroundColor: Colors.transparent,
  gestureNavigationEnabled: true,
  onWebViewCreated: (controller) {
    // 将参数map转换为URL编码的Form Data字符串
    String formData = Uri(queryParameters: map).query;
    controller.loadRequest(
      WebViewRequest(
        uri: Uri.parse("https://uat.paygoal.in/order/v1/payment"),
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        method: WebViewRequestMethod.post,
        body: Uint8List.fromList(utf8.encode(formData)),
      ),
    );
  },
)

2. 避免用Dio预请求HTML #

如果之前用Dio获取HTML再加载到WebView，会丢失接口返回的会话Cookie，导致支付页面无法正常交互。直接让WebView发起POST请求，WebView会自动维护会话上下文，保证页面交互正常。

额外检查点 #

• 确认map中的所有键值对都符合PayGoal接口的参数要求，比如参数名、数据类型（字符串/数字）是否正确。
• 确保WebView的javascriptMode保持JavascriptMode.unrestricted，支付页面依赖JS支持完成交互。
• 检查应用网络权限，确保可以正常访问PayGoal的UAT环境地址。

内容的提问来源于stack exchange，提问作者Zaid