Flutter集成Payfast支付点击按钮无法跳转WebView问题求解

点击支付无响应、不跳转WebView属于空值导致的静默失败，核心问题共5处：

• model对象从未初始化：_PayfastPaymentState和WebViewPageState中声明的PaymentViewModel? model仅定义未实例化，点击按钮时model?.payment()因空值直接跳过执行，不会触发任何逻辑也不抛错
• PaymentViewModel内部的api对象未初始化：即使model完成实例化，api?.payFastPayment()也会因api为空直接跳过请求
• 缺少支付成功后的路由跳转逻辑：请求拿到Payfast支付地址后仅给变量赋值，没有编写跳转到WebView页面的代码
• WebView传值逻辑错误：WebViewPage内部声明的model为空，没有接收上一个页面传递的支付URL，即使跳转成功也无法加载内容
• 请求方法错误：Payfast支付页是GET请求跳转，你当前使用PUT方法发请求，即使请求发出也会被网关直接拒绝

1. 在状态类初始化阶段实例化model和api对象，避免空指针
2. 修改支付方法逻辑，请求拿到支付URL后主动跳转WebView页，通过路由参数传递URL，不要依赖跨页面共享model实例
3. 修正API请求逻辑：Payfast支付不需要客户端发PUT请求，直接拼接好带参数的GET地址传给WebView加载即可；如果需要签名校验，签名逻辑必须放在自有服务端，不要在客户端暴露商户密钥
4. WebView页从路由参数中读取支付URL加载，不要使用自身未初始化的model对象取值
5. 补充表单非空校验、请求失败提示，不要静默吞掉错误

支付页State修正 #

class _PayfastPaymentState extends State<PayfastPayment> {
  GlobalKey<FormState> formstate = GlobalKey<FormState>();
  TextEditingController amountController = TextEditingController();
  TextEditingController itemNameController = TextEditingController();
  late PaymentViewModel model;
  var client = http.Client();

  @override
  void initState() {
    super.initState();
    // 初始化model和api实例
    model = PaymentViewModel()..api = API();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(centerTitle: true, title: const Text("Payment Page")),
      body: Form(
        key: formstate,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            TextFormField(
              controller: amountController,
              validator: (v) => v?.trim().isEmpty == true ? "请输入金额" : null,
              keyboardType: TextInputType.number,
              decoration: const InputDecoration(
                border: UnderlineInputBorder(),
                labelText: 'Amount',
              ),
            ),
            const SizedBox(height: 100),
            TextFormField(
              controller: itemNameController,
              validator: (v) => v?.trim().isEmpty == true ? "请输入商品名称" : null,
              decoration: const InputDecoration(
                border: UnderlineInputBorder(),
                labelText: 'Item Name',
              ),
            ),
            SizedBox(
              width: 220,
              height: 100,
              child: InkWell(
                onTap: () async {
                  // 先校验表单输入
                  if (formstate.currentState?.validate() != true) return;
                  final payUrl = await model.payment(
                      amountController.text.trim(), itemNameController.text.trim());
                  if (payUrl != null && mounted) {
                    // 跳转WebView页并传递支付地址
                    Navigator.pushNamed(context, "/webView", arguments: payUrl);
                  } else if (model.errorMessage != null && mounted) {
                    // 弹出错误提示
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(content: Text(model.errorMessage!))
                    );
                  }
                },
                child: Container(
                  alignment: Alignment.center,
                  color: Colors.blue,
                  child: const Center(
                      child: Text("Pay",
                          style: TextStyle(fontSize: 22, color: Colors.white))),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

PaymentViewModel修正 #

class PaymentViewModel {
  API? api;
  String? errorMessage;

  // 改为异步返回支付URL，方便后续跳转逻辑调用
  Future<String?> payment(String? amount, String? item_name) async {
    try {
      errorMessage = null;
      final createdPayment = await api?.payFastPayment(amount: amount, item_name: item_name);
      if (createdPayment == null) {
        errorMessage = "支付请求失败，请重试";
        return null;
      }
      return createdPayment;
    } catch (error) {
      errorMessage = '请求出错: ${error.toString()}';
      return null;
    }
  }
}

API类修正 #

class API {
  static String baseURL = 'sandbox.payfast.co.za';
  var client = http.Client();

  Future<String> payFastPayment({
    String? amount,
    String? item_name,
  }) async {
    final queryParameters = {
      'merchant_key': '46f0cd694581a',
      'merchant_id': '10000100',
      'amount': '$amount',
      'item_name': '$item_name',
      'return_url': 'http://localhost:8080/#/onSuccess',
      'cancel_url': 'http://localhost:8080/#/onCancel',
    };
    // 直接拼接GET请求地址，不需要发PUT请求
    Uri uri = Uri.https(baseURL, "/eng/process", queryParameters);
    return uri.toString();
  }
}

WebView页修正 #

class WebViewPage extends StatefulWidget {
  const WebViewPage({Key? key}) : super(key: key);

  @override
  WebViewPageState createState() => WebViewPageState();
}

class WebViewPageState extends State<WebViewPage> {
  late String payUrl;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    // 从路由参数获取支付地址
    payUrl = ModalRoute.of(context)?.settings.arguments as String;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("支付中"),
        ),
        body: Column(children: [
          Expanded(
              child: WebView(
            initialUrl: payUrl,
            javascriptMode: JavascriptMode.unrestricted,
            onPageFinished: _onUrlChange,
            debuggingEnabled: true,
          ))
        ]));
  }

  _onUrlChange(String url) {
    if (mounted) {
      if (url.contains("http://localhost:8080/#/onSuccess")) {
        Navigator.pushReplacementNamed(context, "/onSuccess");
      } else if (url.contains("http://localhost:8080/#/onCancel")) {
        Navigator.pushReplacementNamed(context, "/onCancel");
      }
    }
  }
}

• 不要在客户端直接拼接商户密钥参数，存在密钥泄露、支付参数被篡改的风险，正式环境必须把签名逻辑放在自有服务端，客户端仅传金额、商品名到自有服务端，拿到服务端返回的签名后支付地址再加载
• 提前在路由表中配置/webView、/onSuccess、/onCancel对应的页面，否则跳转时会报路由不存在错误
• 本地调试时localhost地址无法被模拟器/真机直接访问，Payfast回调无法跳转到本地成功/取消页，需要用内网穿透工具映射本地端口，或部署测试环境回调地址

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