Flutter开发：如何按Apple规范添加Apple Pay按钮

嘿，这个问题问得太实用了！在Flutter里加Apple Pay按钮完全不用从零开始撸样式、守规范，社区已经有现成的方案，比Swift里的原生对象还要省心～

核心结论：不用从零造轮子 #

和Swift里的PKPaymentButton类似，Flutter生态里有成熟的插件可以直接用，而且会自动严格遵循Apple的设计规范（比如按钮的尺寸、配色、文案样式），避免踩审核的坑。

最推荐的实现方式：使用pay插件 #

这个插件由官方团队参与维护，同时支持Apple Pay和Google Pay，配置简单、代码量少，是目前最省心的方案。

步骤1：添加依赖 #

在你的pubspec.yaml里加入最新版本的依赖：

dependencies:
  pay: ^最新版本号 # 记得替换成pub上的最新版本

步骤2：配置Apple Pay商户信息 #

先在Apple Developer后台完成商户ID注册、开启Apple Pay服务，然后创建一个JSON配置文件（比如assets/payment_configuration_apple.json）：

{
  "provider": "apple_pay",
  "data": {
    "merchantIdentifier": "你的商户ID",
    "displayName": "你的应用名称",
    "merchantCapabilities": ["3DS", "debit", "credit"],
    "supportedNetworks": ["visa", "mastercard", "amex"],
    "countryCode": "CN", // 替换成你的国家代码
    "currencyCode": "CNY" // 替换成你的货币代码
  }
}

步骤3：实现Apple Pay按钮 #

直接用插件提供的PayButton组件，几行代码就能搞定：

import 'package:pay/pay.dart';

class ApplePayDemo extends StatelessWidget {
  // 加载配置文件
  final PaymentConfiguration _applePayConfig =
      PaymentConfiguration.fromAsset('assets/payment_configuration_apple.json');

  // 定义支付项
  final PaymentItem _orderItem = PaymentItem(
    label: "我的商品",
    amount: "19.99",
    status: PaymentItemStatus.final_price,
  );

  // 处理支付结果
  void _handlePaymentResult(paymentResult) {
    // 这里可以对接你的后端，验证支付状态、更新订单等
    print("支付结果：$paymentResult");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: PayButton(
          paymentConfiguration: _applePayConfig,
          paymentItems: [_orderItem],
          onPaymentResult: _handlePaymentResult,
          width: 280,
          height: 50,
          style: PayButtonStyle.black, // 可选样式：black/white/whiteOutline
          type: PayButtonType.buy, // 可选文案：buy/donate/plain等
        ),
      ),
    );
  }
}

如果你想自定义（不推荐） #

要是你有特殊定制需求，也可以通过Platform Channel调用iOS原生的PKPaymentButton，但这样需要额外写Swift代码，还要自己维护Apple的样式规范，性价比很低，除非必要否则不建议这么做。

注意事项 #

• 必须用真实的iOS设备测试，模拟器不支持Apple Pay
• 确保应用的Bundle ID和Apple Developer后台的商户ID关联
• 支付逻辑的后端验证不能少，避免伪造支付请求

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