React Native实现Google Pay Passes深跳指定卡券及安装状态检测咨询

前置依赖配置 #

首先针对安卓11及以上系统，需要在android/app/src/main/AndroidManifest.xml中添加应用查询声明，否则无法正常检测Google Pay安装状态：

<queries>
    <package android:name="com.google.android.apps.walletnfcrel" />
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="https" android:host="pay.google.com" />
    </intent>
</queries>

如果你的项目还没有引入Linking相关依赖，直接使用React Native自带的Linking模块即可，不需要额外安装第三方包。 #

功能1：安装检测与卡券校验 #

1.1 检测Google Pay是否安装 #

直接用React Native自带的Linking模块即可实现，代码示例：

import { Linking } from 'react-native';

const checkGooglePayInstalled = async () => {
  const isInstalled = await Linking.canOpenURL('googlepay://');
  return isInstalled;
}

也可以选择第三方包react-native-app-info直接通过包名com.google.android.apps.walletnfcrel查询安装状态，逻辑一致。

1.2 校验目标卡券是否已添加 #

该功能无法纯前端实现，需要配合后端对接Google Pay Passes REST API完成：

• 你需要先在Google Pay Passes后台创建卡券类和卡券实例，拿到对应的issuerId、classId、objectId
• 后端通过Google账号OAuth授权后，调用Google Pay Passes的查询接口，传入用户标识和卡券ID即可获取卡券的添加状态，前端只需调用后端封装好的校验接口即可

功能2：Deep Link跳转至指定卡券 #

Google Pay官方提供了统一的卡券跳转链接规则，直接调用Linking.openURL即可唤起Google Pay并定位到对应卡券：

const jumpToGooglePayCard = async (issuerId, classId, objectId) => {
  const cardUrl = `https://pay.google.com/gp/v/loyalty/view/${issuerId}.${classId}/${objectId}`;
  const canOpen = await Linking.canOpenURL(cardUrl);
  if (canOpen) {
    await Linking.openURL(cardUrl);
  } else {
    // 处理未安装Google Pay的逻辑
  }
}

如果是原生Scheme跳转，可以用wallet://loyalty/${objectId}格式，效果和HTTPS链接一致。 #

注意事项 #

• 国内大部分安卓设备默认没有GMS服务，无法使用Google Pay，建议先增加GMS服务可用性检测逻辑
• 卡券ID参数大小写敏感，必须和Google Pay Passes后台配置的参数完全一致
• 跳转前必须先做canOpenURL检测，避免出现系统无响应的异常

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