React Native集成Stripe Google Pay重复创建支付方法及免弹窗问题求助

核心问题分析 #

你当前的代码每次调用createGooglePayPaymentMethod都会向Stripe请求生成新的支付方法，即便用户选择同一张Google Pay卡片。要实现复用已保存的支付方法，需要：

• 首次支付后将有效的Payment Method ID存入Async Storage
• 后续支付优先读取已保存的ID，直接关联到Payment Intent，无需再次唤起Google Pay弹窗

解决方案步骤 #

1. 新增Async Storage读写工具函数 #

先封装简单的存储方法，用于保存和读取支付方法ID：

import AsyncStorage from '@react-native-async-storage/async-storage';

// 保存支付方法ID
const savePaymentMethodId = async (paymentMethodId) => {
  try {
    await AsyncStorage.setItem('saved_payment_method_id', paymentMethodId);
  } catch (e) {
    console.error('保存支付方法失败:', e);
  }
};

// 读取已保存的支付方法ID
const getSavedPaymentMethodId = async () => {
  try {
    return await AsyncStorage.getItem('saved_payment_method_id');
  } catch (e) {
    console.error('读取支付方法失败:', e);
    return null;
  }
};

2. 修改支付流程逻辑 #

调整pay函数，先检查是否有已保存的支付方法：

• 如果有，直接调用后端API关联该支付方法生成Payment Intent
• 如果没有，走原有的Google Pay流程创建新支付方法

同时修正你代码中的变量错误（pMethod应为paymentMethod）：

// 初始化Google Pay的逻辑保留，注意existingPaymentMethodRequired设为false（允许用户添加新卡）
useEffect(() => {
  const initGooglePaySetup = async () => {
    if (!(await isGooglePaySupported({ testEnv: envTest }))) {
      Alert.alert('Google Pay is not supported.');
      return;
    }
    const { error } = await initGooglePay({
      testEnv: envTest,
      merchantName: 'app',
      countryCode: props.datum.twoLetterCountryCode,
      billingAddressConfig: {
        format: 'FULL',
        isPhoneNumberRequired: false,
        isRequired: false,
      },
      existingPaymentMethodRequired: false,
      isEmailRequired: false,
    });
    if (error) {
      console.log(error.message);
      return;
    } else {
      console.log('Google Pay Init Sucessfully...!')
    }
  };
  initGooglePaySetup();
}, []);

// 新增：通过已保存的支付方法ID创建Payment Intent
const createPaymentWithSavedMethod = async (paymentMethodId) => {
  const paymentData = {
    ...props.datum,
    PaymentToken: paymentMethodId,
    // 其他必要字段保持不变
  };
  
  try {
    const r = await makePaymentAPI(paymentData);
    if (r.Status === 'Success') {
      return r.ClientSecret;
    } else {
      Alert.alert('支付失败', '创建支付意图失败');
      props.nav.navigate('HomeScreen');
      return null;
    }
  } catch (e) {
    Alert.alert('Payment Failed', e);
    props.nav.navigate('HomeScreen');
    return null;
  }
};

const createPaymentMethod = async () => {
  const { error, paymentMethod } = await createGooglePayPaymentMethod({
    amount: Number(total),
    currencyCode: props.datum.Currency,
  });
  console.log('Payment Method: ' + JSON.stringify(paymentMethod));

  if (error) {
    Alert.alert(error.code, error.message);
    props.nav.navigate('HomeScreen');
    return null;
  } else if (paymentMethod) {
    // 修正变量名错误：pMethod -> paymentMethod，同时注意Stripe返回字段为小写card
    props.datum.PType = 'googlepay-' + paymentMethod.card.brand;
    props.datum.Cardholder = paymentMethod.billingDetails.name || 'Card Name not available!';
    props.datum.CardNum = paymentMethod.card.last4;
    props.datum.CardExpireMonth = paymentMethod.card.expMonth;
    props.datum.CardExpireYear = paymentMethod.card.expYear;
    props.datum.PaymentToken = paymentMethod.id;
    props.datum.GoogleAppleToken = '';

    // 保存支付方法ID到Async Storage
    await savePaymentMethodId(paymentMethod.id);

    try {
      const r = await makePaymentAPI(props.datum);
      if (r.Status === 'Success') {
        return r.ClientSecret;
      } else {
        props.nav.navigate('HomeScreen');
        return null;
      }
    } catch (e) {
      Alert.alert('Payment Failed', e);
      props.nav.navigate('HomeScreen');
      return null;
    }
  }
};

const fetchPaymentIntentClientSecret = async () => {
  const savedPaymentMethodId = await getSavedPaymentMethodId();
  if (savedPaymentMethodId) {
    // 使用已保存的支付方法
    return await createPaymentWithSavedMethod(savedPaymentMethodId);
  } else {
    // 创建新的支付方法
    return await createPaymentMethod();
  }
};

const pay = async () => {
  const clientSecret = await fetchPaymentIntentClientSecret();
  if (!clientSecret) return;

  // 判断是否复用已保存的支付方法
  const savedPaymentMethodId = await getSavedPaymentMethodId();
  if (savedPaymentMethodId) {
    // 直接确认Payment Intent，不唤起Google Pay弹窗
    const { error } = await confirmPaymentIntent({
      clientSecret,
      paymentMethodId: savedPaymentMethodId,
    });
    if (error) {
      Alert.alert(error.code, error.message);
      props.nav.navigate('HomeScreen');
    } else {
      props.nav.navigate('Thankyou');
    }
  } else {
    // 新支付方法，唤起Google Pay弹窗
    const { error } = await presentGooglePay({
      clientSecret,
      forSetupIntent: false,
    });
    if (error?.stripeErrorCode) {
      Alert.alert(error.code, error.message);
      props.nav.navigate('HomeScreen');
    } else {
      props.nav.navigate('Thankyou');
    }
  }
};

3. 关键注意事项 #

• Stripe字段大小写：Stripe返回的支付方法对象中，卡片信息是card（小写），不是Card，原代码中的pMethod.Card会报错
• 后端API适配：确保你的makePaymentAPI接口支持接收已有的PaymentToken（支付方法ID），并将其关联到新的Payment Intent，而非每次创建新支付方法
• 支付失效处理：可以增加逻辑，当已保存的支付方法失效（如卡片过期）时，自动回退到创建新支付方法的流程

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