Flutter中如何添加卡片至Apple Wallet？能否调用iOS原生PKAddPaymentConfiguration按钮？

由于目前没有现成的Flutter库支持直接调用PKAddPaymentConfiguration相关的支付卡添加功能，你可以通过自定义Flutter插件的方式桥接iOS原生代码来实现，具体步骤如下：

1. 创建Flutter插件框架 #

首先生成一个插件项目，用于桥接原生代码：

flutter create --template=plugin add_payment_config_button

2. 实现iOS端原生逻辑 #

在插件的iOS目录下，修改Swift文件（如SwiftAddPaymentConfigButtonPlugin.swift），集成PassKit框架并实现支付卡添加流程：

import Flutter
import PassKit

public class SwiftAddPaymentConfigButtonPlugin: NSObject, FlutterPlugin, PKAddPaymentPassViewControllerDelegate {
    private var pendingResult: FlutterResult?

    public static func register(with registrar: FlutterPluginRegistrar) {
        let channel = FlutterMethodChannel(name: "add_payment_config_button", binaryMessenger: registrar.messenger())
        let instance = SwiftAddPaymentConfigButtonPlugin()
        registrar.addMethodCallDelegate(instance, channel: channel)
    }

    public func handle(_ call: FlutterMethodCall, result: @escaping FlutterResult) {
        pendingResult = result
        guard call.method == "showAddPaymentFlow" else {
            result(FlutterMethodNotImplemented)
            return
        }

        // 解析Flutter传递的配置数据
        guard let args = call.arguments as? [String: Any],
              let configData = args["configData"] as? Data else {
            result(FlutterError(code: "INVALID_PARAM", message: "配置数据格式错误", details: nil))
            return
        }

        do {
            // 初始化支付配置与添加控制器
            let config = try PKAddPaymentConfiguration(data: configData)
            let addVC = PKAddPaymentPassViewController(request: config)!
            addVC.delegate = self

            // 获取当前顶层控制器并弹出界面
            if let topVC = UIApplication.shared.connectedScenes
                .filter({$0.activationState == .foregroundActive})
                .compactMap({$0 as? UIWindowScene})
                .first?.windows
                .filter({$0.isKeyWindow}).first?.rootViewController {
                topVC.present(addVC, animated: true)
            } else {
                result(FlutterError(code: "NO_VC", message: "无法找到可弹出界面的控制器", details: nil))
            }
        } catch {
            result(FlutterError(code: "CONFIG_ERROR", message: error.localizedDescription, details: nil))
        }
    }

    // 处理支付卡添加结果
    public func addPaymentPassViewController(_ controller: PKAddPaymentPassViewController, didFinishAdding pass: PKPaymentPass?, error: Error?) {
        controller.dismiss(animated: true)
        if let error = error {
            pendingResult?(FlutterError(code: "ADD_FAILED", message: error.localizedDescription, details: nil))
        } else if let pass = pass {
            pendingResult?(["success": true, "passId": pass.passIdentifier])
        } else {
            pendingResult?(["success": false])
        }
        pendingResult = nil
    }
}

3. Flutter端调用封装 #

在Flutter侧创建一个可复用的按钮组件，调用原生方法触发支付卡添加流程：

import 'dart:typed_data';
import 'package:flutter/services.dart';
import 'package:flutter/material.dart';

class AddPaymentCardButton extends StatelessWidget {
  final Uint8List configData;
  final String buttonText;

  const AddPaymentCardButton({
    super.key,
    required this.configData,
    this.buttonText = "添加支付卡",
  });

  static const _channel = MethodChannel('add_payment_config_button');

  Future<void> _triggerAddFlow() async {
    try {
      final result = await _channel.invokeMethod(
        'showAddPaymentFlow',
        {'configData': configData},
      );
      // 处理成功回调，如提示用户添加完成
      print("添加结果: $result");
    } on PlatformException catch (e) {
      // 处理错误，如弹出错误提示
      print("添加失败: ${e.message}");
    }
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: _triggerAddFlow,
      child: Text(buttonText),
    );
  }
}

4. iOS项目配置 #

在插件的Info.plist或主项目的Info.plist中添加必要权限与配置：

<!-- 位置权限（部分支付卡添加流程需要） -->
<key>NSLocationWhenInUseUsageDescription</key>
<string>需要获取位置信息以完成支付卡验证</string>
<!-- 开启支付卡添加能力 -->
<key>PKAddPaymentPassCapability</key>
<true/>

同时需确保你的Apple开发者账号已开启支付卡添加权限，并配置了正确的Merchant ID与相关证书。

注意事项 #

• 测试必须使用真实iOS设备，模拟器不支持PassKit支付卡添加功能
• PKAddPaymentConfiguration的二进制数据通常由你的支付服务商提供，需确保数据格式正确
• 需处理不同场景下的错误回调，如用户取消添加、配置无效等情况

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