使用@stripe/stripe-react-native实现Apple Pay时出现钩子调用错误

问题描述 #

使用@stripe/stripe-react-native实现Apple Pay功能时，触发钩子调用错误，功能无法正常运行。

错误代码 #

import { StripeProvider, useApplePay} from '@stripe/stripe-react-native';
const { presentApplePay, confirmApplePayPayment } = useApplePay();

export default class App (){
    handlePayPress = async () => {
          
        const {error, paymentMethod} = await presentApplePay({
          cartItems: [
            {
              label: 'payment label',
              amount: '50', // amount as string
              type: 'final',
            },
          ],
          country: 'US', // enter any country code supported by stripe,
          currency: 'USD', // enter any currency supported by stripe,
        });
        if (error) {
          Alert.alert(error.code, error.message);
        } else {
          const {error: confirmApplePayError} = await confirmApplePayPayment(
            clientSecret,
          );
          confirmApplePayPayment(clientSecret);
          if (confirmApplePayError) {
            Alert.alert(confirmApplePayError.code, confirmApplePayError.message);
          } else {
            Alert.alert('Success', 'The payment was confirmed successfully!');
          }
        }
      };
...
...
}

错误截图 #

问题根源 #

在类组件中调用了React钩子useApplePay，而React钩子的规则明确要求：钩子只能在函数组件或自定义钩子内部调用，不能在类组件、类的方法或普通函数中使用。

解决方案 #

将类组件转换为函数组件，或者创建自定义钩子封装Apple Pay逻辑后在类组件的子函数组件中使用。以下是转换为函数组件的示例：

import { StripeProvider, useApplePay } from '@stripe/stripe-react-native';
import { Alert, Button } from 'react-native';

export default function App() {
  const { presentApplePay, confirmApplePayPayment } = useApplePay();

  const handlePayPress = async () => {
    const { error, paymentMethod } = await presentApplePay({
      cartItems: [
        {
          label: 'payment label',
          amount: '50',
          type: 'final',
        },
      ],
      country: 'US',
      currency: 'USD',
    });

    if (error) {
      Alert.alert(error.code, error.message);
      return;
    }

    // 移除原代码中重复调用confirmApplePayPayment的冗余逻辑
    const { error: confirmApplePayError } = await confirmApplePayPayment(clientSecret);
    if (confirmApplePayError) {
      Alert.alert(confirmApplePayError.code, confirmApplePayError.message);
    } else {
      Alert.alert('Success', 'The payment was confirmed successfully!');
    }
  };

  return (
    <StripeProvider publishableKey="your-stripe-publishable-key">
      {/* 替换为你的UI元素，触发支付的按钮 */}
      <Button title="Pay with Apple Pay" onPress={handlePayPress} />
    </StripeProvider>
  );
}

注意事项 #

• 确保StripeProvider包裹使用Apple Pay的组件，并传入正确的publishableKey
• clientSecret需从你的后端服务正确获取，用于确认支付意图
• 避免重复调用支付确认接口，减少不必要的请求

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