如何在旧版React Native类组件项目中使用@stripe/stripe-react-native

由于@stripe/stripe-react-native核心API基于React Hooks设计，类组件无法直接调用，我们可以通过高阶组件(HOC)或Render Props两种方式封装Hooks逻辑，让类组件能正常使用SDK功能。

前置步骤：初始化StripeProvider #

不管用哪种方式，都需要在项目根组件外层包裹StripeProvider，配置你的Stripe publishable key：

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

export default function App() {
  return (
    <StripeProvider
      publishableKey="your_publishable_key_here"
      merchantIdentifier="merchant.com.yourdomain" // 仅iOS需要
    >
      {/* 你的根导航/组件 */}
    </StripeProvider>
  );
}

方法一：用高阶组件(HOC)封装 #

创建一个HOC，将Stripe Hooks的能力注入到类组件的props中：

1. 编写HOC文件 withStripe.js #

import React from 'react';
import { useStripe, usePaymentSheet } from '@stripe/stripe-react-native';

const withStripe = (WrappedComponent) => {
  return function WithStripe(props) {
    const stripe = useStripe();
    const { initPaymentSheet, presentPaymentSheet } = usePaymentSheet();

    // 封装需要的Stripe方法，这里以PaymentSheet为例
    const initPaymentSheetWrapper = async (paymentIntentClientSecret) => {
      const { error } = await initPaymentSheet({
        paymentIntentClientSecret,
        merchantDisplayName: 'Your Merchant Name',
      });
      if (!error) {
        return { success: true };
      }
      return { success: false, error };
    };

    const presentPaymentSheetWrapper = async () => {
      const { error } = await presentPaymentSheet();
      if (!error) {
        return { success: true };
      }
      return { success: false, error };
    };

    return (
      <WrappedComponent
        {...props}
        stripe={stripe}
        initPaymentSheet={initPaymentSheetWrapper}
        presentPaymentSheet={presentPaymentSheetWrapper}
      />
    );
  };
};

export default withStripe;

2. 在类组件中使用HOC #

import React, { Component } from 'react';
import { View, Button, Alert } from 'react-native';
import withStripe from './withStripe';

class PaymentScreen extends Component {
  async componentDidMount() {
    // 从你的后端获取paymentIntent client secret
    const clientSecret = await fetch('your_backend_api/payment-intent').then(res => res.json());
    const { success, error } = await this.props.initPaymentSheet(clientSecret);
    if (!success) {
      Alert.alert('初始化失败', error.message);
    }
  }

  handlePayPress = async () => {
    const { success, error } = await this.props.presentPaymentSheet();
    if (success) {
      Alert.alert('支付成功');
    } else {
      Alert.alert('支付失败', error.message);
    }
  };

  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Button title="发起支付" onPress={this.handlePayPress} />
      </View>
    );
  }
}

// 用HOC包裹类组件
export default withStripe(PaymentScreen);

方法二：用Render Props封装 #

如果不想用HOC，也可以用Render Props模式封装Stripe Hooks：

1. 编写Render Props组件 StripeRenderer.js #

import React from 'react';
import { useStripe, usePaymentSheet } from '@stripe/stripe-react-native';

const StripeRenderer = ({ children }) => {
  const stripe = useStripe();
  const { initPaymentSheet, presentPaymentSheet } = usePaymentSheet();

  return children({
    stripe,
    initPaymentSheet,
    presentPaymentSheet,
  });
};

export default StripeRenderer;

2. 在类组件中使用Render Props #

import React, { Component } from 'react';
import { View, Button, Alert } from 'react-native';
import StripeRenderer from './StripeRenderer';

class PaymentScreen extends Component {
  state = {
    clientSecret: null,
  };

  async componentDidMount() {
    const clientSecret = await fetch('your_backend_api/payment-intent').then(res => res.json());
    this.setState({ clientSecret });
  }

  handlePayPress = async (initPaymentSheet, presentPaymentSheet) => {
    const { clientSecret } = this.state;
    const { error: initError } = await initPaymentSheet({
      paymentIntentClientSecret: clientSecret,
      merchantDisplayName: 'Your Merchant Name',
    });
    if (initError) {
      Alert.alert('初始化失败', initError.message);
      return;
    }

    const { error: presentError } = await presentPaymentSheet();
    if (!presentError) {
      Alert.alert('支付成功');
    } else {
      Alert.alert('支付失败', presentError.message);
    }
  };

  render() {
    return (
      <StripeRenderer>
        {({ initPaymentSheet, presentPaymentSheet }) => (
          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Button
              title="发起支付"
              onPress={() => this.handlePayPress(initPaymentSheet, presentPaymentSheet)}
            />
          </View>
        )}
      </StripeRenderer>
    );
  }
}

export default PaymentScreen;

其他注意事项 #

• 上述示例以PaymentSheet为例，如果你需要使用其他Stripe功能（如CardField、createPaymentMethod等），只需在HOC或Render Props组件中封装对应的Hooks或方法即可。
• 确保后端正确生成Payment Intent并返回client secret，这是Stripe支付流程的核心。

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