如何在React Native 0.70中实现支付？旧版本依赖库已失效

一、使用维护活跃的第三方信用卡输入/支付库 #

由于react-native-credit-card-input和react-native-credit-card-input-plus已停止维护，无法适配RN 0.70，推荐以下替代库：

• @stripe/stripe-react-native：Stripe官方维护的SDK，提供开箱即用的卡片输入组件CardField，支持完整支付流程（卡片验证、token化、支付确认），兼容性强，完全适配RN 0.70+。
• react-native-payment-card：轻量级的信用卡输入组件，专注于卡片信息的格式化与验证，可配合支付API使用。
• @card-io/react-native-card-io：支持卡片扫描功能，减少手动输入成本，适配RN新版本。

二、自定义信用卡输入组件 #

若需完全自定义UI，可基于RN原生TextInput实现：

1. 拆分输入字段：卡号、有效期（MM/YY）、CVV、邮政编码（可选）。
2. 添加格式与验证逻辑：
   • 卡号自动按4位分组格式化
   • 有效期验证格式与过期时间
   • CVV验证长度（3或4位，根据卡种）
3. 集成支付服务商API：将卡片信息转为支付token（如Stripe的createPaymentMethod），避免直接处理敏感信息。

示例代码（卡号格式化）：

const formatCardNumber = (inputText) => {
  const cleanedText = inputText.replace(/\s/g, '');
  return cleanedText.replace(/(\d{4})(?=\d)/g, '$1 ').trim();
};

三、使用支付服务商官方SDK #

直接接入Stripe、PayPal等服务商的官方RN SDK，是最安全合规的方案：

• 无需手动处理卡片敏感信息，SDK自动完成加密与token化
• 内置支付流程错误处理，减少开发成本
• 符合PCI合规要求，避免合规风险

以Stripe SDK为例，核心代码片段：

import { CardField, useStripe } from '@stripe/stripe-react-native';
import { Button } from 'react-native';

const PaymentScreen = () => {
  const { confirmPayment } = useStripe();

  const handlePayment = async () => {
    // 从后端获取支付Intent的clientSecret（必须后端生成）
    const clientSecret = await fetch('/api/create-payment-intent').then(res => res.json());
    const { error } = await confirmPayment(clientSecret, {
      paymentMethodType: 'Card',
    });

    if (error) {
      console.error('支付失败:', error.message);
    } else {
      console.log('支付成功');
      // 处理成功逻辑
    }
  };

  return (
    <>
      <CardField
        postalCodeEnabled={true}
        placeholder={{ number: '4242 4242 4242 4242' }}
        cardStyle={{ backgroundColor: '#fff', textColor: '#000' }}
        style={{ width: '100%', height: 50, marginVertical: 20 }}
      />
      <Button title="确认支付" onPress={handlePayment} />
    </>
  );
};

注意事项 #

• 永远不要在客户端存储或传输原始信用卡信息，必须通过支付服务商SDK转为token后再与后端交互。
• 确保后端正确对接支付服务商API，处理支付Intent、订单确认等核心逻辑。

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