Flutter开发中如何移除Razer Merchant Service页面顶部的页眉

解决方案 #

方案1：使用SDK内置配置参数（优先推荐） #

你当前调用的molpay官方Flutter SDK原生支持隐藏顶部页眉，属于官方提供的合法配置能力，不会影响支付流程和后续SDK升级，只需要在你传入的paymentDetails字典中新增mp_hide_header参数，赋值为true即可生效。
修改后的支付配置代码参考如下：

Padding(
  padding: EdgeInsets.only(top: 5.0, right: 12.0, left: 12.0),
  child: ElevatedButton(
    style: ElevatedButton.styleFrom(
      minimumSize: Size(double.infinity, 50),
      primary: Colors.amberAccent,
      shadowColor: Colors.yellowAccent,
    ),
    onPressed: () async {
      var paymentDetails = {
        'mp_app_name': '',   
        'mp_username': '',
        'mp_password': '',
        'mp_merchant_ID': '',
        'mp_verification_key': '',
        'mp_amount' : '',
        'mp_order_ID': '',   
        'mp_currency': '',
        'mp_country': '',
        'mp_bill_name': '', // 注意原代码此处漏了闭合引号，需要补上
        'mp_bill_email': '',
        'mp_bill_mobile': '',
        'mp_bill_description' : 'Payment',
        'mp_sandbox' : false,
        'mp_dev_mode' : false,
        'mp_hide_header': true, // 新增该行即可隐藏顶部页眉
      };
      String result = await molpay.startMolpay(paymentDetails);
      print("Result" + result);
    },
    child: Text("Continue", style: TextStyle(
      color: Colors.white,
      fontSize: 16,
    ),
  ),
),

方案2：自定义WebView封装（适配旧版本SDK） #

如果你使用的SDK版本较老，不支持上述配置参数，可以自行用flutter_inappwebview组件加载Razer支付链接，页面加载完成后注入JS代码隐藏顶部页眉对应的DOM元素，这种方式自由度更高，可以按需调整支付页的其他样式。

注意：修改完成后建议先在沙箱环境测试完整支付流程，确认页眉隐藏后支付回调、表单提交等功能都正常运行，避免影响线上交易。

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