React Native+EXPO iOS端Tap To Pay调用discoverReaders崩溃求助

问题背景 #

使用React Native + Expo在iOS端搭建Tap To Pay功能，每次调用discoverReaders方法时应用直接崩溃。相关代码及依赖如下：

组件代码 #

const DiscoverScreen = () => {
    const [readers, setReaders] = useState([]);

    const { discoverReaders } = useStripeTerminal({
        onUpdateDiscoveredReaders: (newReaders) => {
            setReaders(newReaders);
        },
    });

    useEffect(() => {
        const { error } = discoverReaders({
            discoveryMethod: 'internet',
            simulated: true,
        });

        if (error) {
            console.error('Error discovering readers:', error);
        }
    }, [discoverReaders]);

    return <View />;
};

export default DiscoverScreen;

依赖配置 #

"dependencies": {
    "@stripe/stripe-terminal-react-native": "^0.0.1-beta.13",
    "expo": "^49.0.21"
}

常见原因及解决方案 #

1. 错误的异步函数调用方式 #

discoverReaders是异步函数，直接同步解构error会导致逻辑错误，甚至触发崩溃。需改用async/await处理异步流程：

useEffect(() => {
  const discoverReadersHandler = async () => {
    try {
      await discoverReaders({
        discoveryMethod: 'internet',
        simulated: true,
      });
    } catch (error) {
      console.error('Error discovering readers:', error);
    }
  };

  discoverReadersHandler();
}, [discoverReaders]);

2. 使用过旧的Beta版本SDK #

@stripe/stripe-terminal-react-native的0.0.1-beta.13是早期测试版本，存在大量稳定性问题，且与Expo 49的兼容性不足。建议升级至较新的稳定版：
修改package.json依赖：

"@stripe/stripe-terminal-react-native": "^0.1.12"

执行依赖更新：

npm install
# 或 yarn install

3. 缺失iOS权限配置 #

即使使用internet发现模式，Stripe Terminal仍可能需要蓝牙权限用于 fallback 场景。在app.json中添加权限声明：

{
  "expo": {
    "ios": {
      "infoPlist": {
        "NSBluetoothAlwaysUsageDescription": "需要蓝牙权限以连接支付读卡器",
        "NSBluetoothPeripheralUsageDescription": "需要蓝牙权限以连接支付读卡器"
      }
    }
  }
}

4. 未正确初始化Stripe Terminal #

确保在App根组件中完成Stripe Terminal的初始化，包含有效的连接Token获取逻辑：

import { StripeTerminalProvider } from '@stripe/stripe-terminal-react-native';

export default function App() {
  return (
    <StripeTerminalProvider
      logLevel="verbose"
      initTerminal={{
        fetchConnectionToken: async () => {
          // 从你的后端接口获取Stripe连接Token
          const res = await fetch('YOUR_BACKEND_CONNECTION_TOKEN_ENDPOINT');
          const data = await res.json();
          return data.connection_token;
        },
      }}
    >
      <DiscoverScreen />
    </StripeTerminalProvider>
  );
}

5. 开启详细日志排查 #

将logLevel设置为verbose后，可在Xcode控制台查看更详细的SDK运行日志，精准定位崩溃的具体原因。

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