React Native实现Push Provisioning：向Apple/Google Wallet添加借记卡

一、Apple Wallet（iOS）实现 #

1. 安装依赖库 #

使用react-native-passkit-wallet处理PassKit相关操作：

npm install react-native-passkit-wallet --save
# 或使用yarn
yarn add react-native-passkit-wallet

2. iOS项目配置 #

• 打开Xcode，进入项目Capabilities标签，开启Wallet权限。
• 在Info.plist中添加钱包使用权限描述：

<key>NSWalletUsageDescription</key>
<string>需要访问Apple Wallet以添加您的借记卡</string>

3. 代码实现 #

导入库后，将你已有的借记卡信息映射到Pass对象，调用添加方法：

import PassKitWallet from 'react-native-passkit-wallet';

// 构建借记卡Pass数据（替换为你的实际卡片信息）
const debitCardPass = {
  passTypeIdentifier: 'pass.com.yourdomain.debitcard', // Apple开发者后台配置的Pass类型ID
  serialNumber: 'YOUR_CARD_SERIAL',
  teamIdentifier: 'YOUR_APPLE_TEAM_ID',
  organizationName: '你的机构名称',
  labelColor: 'rgb(0,0,0)',
  foregroundColor: 'rgb(0,0,0)',
  backgroundColor: 'rgb(255,255,255)',
  cardholderName: '持卡人姓名',
  primaryAccountNumber: '借记卡完整卡号',
  primaryAccountSuffix: '卡号后四位',
  expirationDate: '202812', // 有效期格式：YYYYMM
  paymentNetwork: 'VISA' // 支付网络，如VISA、MasterCard等
};

// 添加至Apple Wallet
const addToAppleWallet = async () => {
  try {
    const canAdd = await PassKitWallet.canAddPasses();
    if (canAdd) {
      await PassKitWallet.addPass(debitCardPass);
      console.log("借记卡已添加至Apple Wallet");
    } else {
      console.log("当前设备不支持Apple Wallet");
    }
  } catch (error) {
    console.error("添加失败:", error);
  }
};

注意：passTypeIdentifier和teamIdentifier需要提前在Apple开发者中心配置Pass类型并生成签名证书。

二、Google Wallet（Android）实现 #

1. 安装依赖库 #

使用react-native-google-wallet集成Google Wallet功能：

npm install react-native-google-wallet --save
# 或使用yarn
yarn add react-native-google-wallet

2. Android项目配置 #

• 将Google开发者后台下载的google-services.json放入android/app目录。
• 在android/build.gradle中添加Google服务插件：

buildscript {
  dependencies {
    classpath 'com.google.gms:google-services:4.3.15'
  }
}

• 在android/app/build.gradle末尾添加：

apply plugin: 'com.google.gms.google-services'

• 在AndroidManifest.xml中添加权限：

<uses-permission android:name="com.google.android.gms.permission.WALLET"/>

3. 代码实现 #

导入库后，构建借记卡信息对象，调用保存方法：

import GoogleWallet from 'react-native-google-wallet';

// 构建借记卡数据（替换为你的实际卡片信息）
const debitCardDetails = {
  cardNetwork: 'VISA',
  cardLastFourDigits: '1234',
  cardHolderName: '持卡人姓名',
  expirationMonth: '12',
  expirationYear: '2028',
  billingAddress: {
    name: '持卡人姓名',
    address1: '街道地址',
    city: '城市',
    state: '省份',
    countryCode: 'CN',
    postalCode: '邮政编码'
  }
};

// 添加至Google Wallet
const addToGoogleWallet = async () => {
  try {
    const isAvailable = await GoogleWallet.isWalletAvailable();
    if (isAvailable) {
      await GoogleWallet.savePaymentCard(debitCardDetails);
      console.log("借记卡已添加至Google Wallet");
    } else {
      console.log("当前设备不支持Google Wallet");
    }
  } catch (error) {
    console.error("添加失败:", error);
  }
};

注意：需在Google Cloud Console启用Google Wallet API，并配置OAuth 2.0客户端ID，确保应用拥有相关权限。

三、跨平台统一调用 #

封装方法自动适配平台：

import { Platform } from 'react-native';

export const addCardToWallet = async (cardInfo) => {
  if (Platform.OS === 'ios') {
    await addToAppleWallet();
  } else if (Platform.OS === 'android') {
    await addToGoogleWallet();
  }
};

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