如何在Expo(React Native)中不安装@stripe/stripe-react-native实现isApplePaySupported？

核心逻辑说明 #

Stripe的isApplePaySupported本质是调用了iOS原生的PassKit框架API做判断，我们可以直接复刻这个逻辑，不需要依赖Stripe包。判断分两步：

1. 设备硬件/系统是否支持Apple Pay
2. 是否配置了支持的支付网络（如Visa、MasterCard等）

方法1：纯原生桥接实现（无额外npm包） #

通过Expo Config插件添加自定义原生模块，无需eject项目。

1. 创建Expo Config插件 #

在项目根目录新建plugins/apple-pay-check.ts，用来自动添加原生代码：

import { withDangerousMod } from '@expo/config-plugins';
import fs from 'fs';
import path from 'path';

export default function withApplePayCheck(config) {
  return withDangerousMod(config, [
    'ios',
    async (config) => {
      // 写入Swift模块文件
      const swiftPath = path.join(config.modRequest.platformProjectRoot, 'ApplePayCheck.swift');
      const swiftCode = `
import Foundation
import PassKit
import ExpoModulesCore

public class ApplePayCheckModule: Module {
  public func definition() -> ModuleDefinition {
    Name("ApplePayCheck")
    
    Function("isApplePaySupported") { (networks: [String]?) -> Bool in
      // 第一步：判断设备是否支持Apple Pay基础功能
      guard PKPaymentAuthorizationViewController.canMakePayments() else {
        return false
      }
      
      // 第二步：判断是否有指定的支持网络（无指定则直接返回true）
      guard let targetNetworks = networks, !targetNetworks.isEmpty else {
        return true
      }
      
      // 将字符串转为PKPaymentNetwork枚举
      let pkNetworks = targetNetworks.compactMap { network in
        switch network.lowercased() {
        case "visa": return PKPaymentNetwork.visa
        case "mastercard": return PKPaymentNetwork.masterCard
        case "amex": return PKPaymentNetwork.amex
        case "discover": return PKPaymentNetwork.discover
        case "interac": return PKPaymentNetwork.interac
        default: return nil
        }
      }
      
      return PKPaymentAuthorizationViewController.canMakePayments(usingNetworks: pkNetworks)
    }
  }
}
      `;
      fs.writeFileSync(swiftPath, swiftCode);

      // 添加桥接文件（若不存在）
      const bridgingPath = path.join(config.modRequest.platformProjectRoot, 'ApplePayCheck-Bridging-Header.h');
      if (!fs.existsSync(bridgingPath)) {
        fs.writeFileSync(bridgingPath, '#import <ExpoModulesCore/ExpoModulesCore-Swift.h>');
      }

      return config;
    },
  ]);
}

2. 配置Expo项目 #

在app.json的expo.plugins数组中加入自定义插件：

{
  "expo": {
    "plugins": ["./plugins/apple-pay-check.ts"]
  }
}

3. JS端调用 #

直接通过NativeModules调用原生方法：

import { NativeModules } from 'react-native';

const { ApplePayCheck } = NativeModules;

// 示例：判断是否支持Visa和MasterCard
const checkApplePaySupport = () => {
  const isSupported = ApplePayCheck.isApplePaySupported(['visa', 'mastercard']);
  console.log('Apple Pay支持状态:', isSupported);
  return isSupported;
};

方法2：使用Expo官方轻量包（可选） #

如果可以接受安装体积极小的官方包，expo-apple-pay直接提供了验证方法：

import * as ApplePay from 'expo-apple-pay';

const checkSupport = async () => {
  const isSupported = await ApplePay.isAvailableAsync(['visa', 'mastercard']);
  console.log(isSupported);
};

关于Stripe方法找不到实现的原因 #

React Native的原生模块采用JS-原生桥接模式：JS端只有方法声明，具体逻辑写在iOS的Swift/ObjC或Android的Java/Kotlin代码中。你看到的NativeStripeSdk.tsx只是桥接层的声明，实际实现在Stripe包的ios/android目录下的原生代码里。

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