迁移至@stripe/stripe-react-native后如何创建Stripe Token及获取卡片国家

一、创建Stripe Token的实现方法 #

@stripe/stripe-react-native 不再默认推荐使用Token（Stripe官方建议优先使用PaymentMethod），但如果业务需要生成Token，可通过createToken方法实现。由于你使用类组件，需通过withStripe高阶组件注入Stripe实例：

1. 根组件配置StripeProvider #

确保应用根组件已用StripeProvider包裹，传入你的Stripe发布密钥：

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

export default function App() {
  return (
    <StripeProvider
      publishableKey="你的Stripe发布密钥"
    >
      <CheckoutSignin />
    </StripeProvider>
  );
}

2. 类组件中实现Token创建 #

用withStripe包装你的CheckoutSignin组件，调用createToken生成卡片Token：

import { CardField, withStripe } from '@stripe/stripe-react-native';
import { Component } from 'react';
import { Alert, Button } from 'react-native';

class CheckoutSignin extends Component {
  state = {
    TotalAmount: null,
    cardDetails: null, // 存储实时输入的卡片信息
  };

  componentDidMount() {
    const { TotalAmount } = this.props.route.params;
    this.setState({ TotalAmount });
  }

  handleCreateToken = async () => {
    const { stripe } = this.props;
    if (!stripe || !this.state.cardDetails) {
      Alert.alert('错误', '请先输入完整卡片信息');
      return;
    }

    try {
      const { token, error } = await stripe.createToken({
        type: 'Card',
        card: this.state.cardDetails,
      });

      if (error) {
        console.log('Token创建失败:', error);
        Alert.alert('错误', error.message);
      } else {
        console.log('Token创建成功:', token);
        // 此处可使用token.id进行后续业务处理
      }
    } catch (err) {
      console.log('请求异常:', err);
      Alert.alert('错误', 'Token创建失败，请重试');
    }
  };

  render() {
    return (
      <>
        <CardField
          postalCodeEnabled={false}
          placeholder={{
            number: '**** **** **** ****',
            expiry: 'MM/YY',
            cvc: 'CVC',
          }}
          onChange={(cardDetails) => {
            this.setState({ cardDetails });
          }}
        />
        <Button title="创建Token" onPress={this.handleCreateToken} />
      </>
    );
  }
}

// 注入Stripe实例
export default withStripe(CheckoutSignin);

二、获取卡片所属国家名称 #

卡片国家信息可通过两种方式获取：

• 方式1：CardField实时回调
  在CardField的onChange事件中，返回的cardDetails对象包含country字段（ISO 3166-1 alpha-2格式，如"US"、"AU"）：

<CardField
  onChange={(cardDetails) => {
    console.log('卡片国家:', cardDetails.country);
    this.setState({ cardDetails });
  }}
/>

• 方式2：Token返回结果
  Token创建成功后，token.card.country同样包含卡片国家信息：

const { token } = await stripe.createToken({...});
console.log('卡片国家:', token.card.country);

注意事项 #

1. 若无需兼容旧业务，建议优先使用Stripe官方推荐的PaymentMethod + Payment Intent流程（即你代码中confirmPayment的方式），Token方式已逐渐被官方弱化。
2. 确保Stripe发布密钥配置正确，后端创建Payment Intent时使用了对应密钥。

内容的提问来源于stack exchange，提问作者Muhammad Saqib Noor