如何在React JS网站中实现将Brex发行的卡片添加到Apple Wallet功能

可以实现，不需要依赖原生端的React Native相关包，Web端走Apple PassKit的Web侧标准流程即可，具体操作如下：

核心实现逻辑 #

整个流程的核心是合法生成Apple Wallet认可的.pkpass格式凭证，前端仅做触发交互，核心逻辑由后端对接完成：

• 先由后端服务对接Brex开放平台接口，获取目标卡片的非敏感展示信息、以及Apple要求的卡片关联凭证，全程不向前端透漏完整卡号、安全码等敏感数据。
• 后端使用提前在Apple Developer平台申请的Pass Type ID、对应签名证书，按照PassKit规范生成带合法签名的.pkpass格式凭证文件。
• React前端触发打开.pkpass文件后，苹果设备的浏览器会自动识别该格式，唤起Apple Wallet的卡片添加引导流程。

React端具体实现步骤 #

1. 封装获取pkpass凭证的请求方法 #

注意要将响应类型设置为blob，避免文件解析异常：

const getCardPkPass = async (cardId) => {
  const response = await fetch(`/api/brex/cards/${cardId}/apple-pass`, {
    headers: {
      'Authorization': `Bearer ${localStorage.getItem('user_token')}`
    }
  });
  return response.blob();
};

2. 编写添加按钮的点击触发逻辑 #

拿到二进制凭证文件后生成临时链接，唤起浏览器识别流程：

const handleAddToWallet = async (cardId) => {
  try {
    const passBlob = await getCardPkPass(cardId);
    const tempUrl = window.URL.createObjectURL(passBlob);
    // 新开页面打开凭证，触发Apple Wallet唤起
    window.open(tempUrl, '_blank');
    // 1秒后释放临时链接资源，避免内存泄漏
    setTimeout(() => window.URL.revokeObjectURL(tempUrl), 1000);
  } catch (e) {
    console.error('获取卡片凭证失败：', e);
    alert('添加失败，请稍后重试');
  }
};

3. 页面中渲染添加按钮 #

可以配合Apple官方的标准添加按钮素材提升用户认知，同时可做设备判断仅在苹果设备下展示入口：

function AddToAppleWalletBtn({ cardId }) {
  // 判断是否为苹果设备
  const isAppleDevice = /Mac|iPhone|iPad|iPod/.test(navigator.userAgent) && !window.MSStream;

  if (!isAppleDevice) return null;

  return (
    <button onClick={() => handleAddToWallet(cardId)} style={{ border: 'none', padding: 0 }}>
      <img 
        src="/static/add-to-apple-wallet.png" 
        alt="添加到Apple Wallet" 
        style={{ height: 42 }}
      />
    </button>
  );
}

注意事项 #

• 所有敏感数据处理、pkpass签名逻辑必须放在后端完成，前端绝对不要接触卡片核心敏感信息，避免出现合规和安全风险。
• 生成的pkpass文件必须使用Apple认可的有效证书签名，否则会出现无法被Wallet识别的问题。
• 非苹果设备无法使用该功能，建议做设备判断隐藏对应入口，避免用户困惑。

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