React Native Stripe initPaymentSheet返回paymentOption undefined

• 第一优先级修复：接口参数取值错误
  你当前直接从axios返回的根响应对象解构clientSecret/ephemeralKey/customer，但axios会把接口返回的业务数据放在response.data字段下，根对象上只有请求状态、请求头、配置这类字段，所以你传给initPaymentSheet的三个核心参数全是undefined，初始化根本没拿到有效支付配置，自然返回异常。
  对应代码修改：

  const fetchPaymentSheetParams = async () => {
    try{
      const response = await axios.post(`${API_URL}/checkout`,submitedData, {
        headers: {
          'Content-Type': 'application/json',
          "Authorization" : `Bearer ${token}`
        },
      });
      // 从data字段解构后端返回的支付参数
      const { clientSecret, ephemeralKey, customer } = response.data;
      return { clientSecret, ephemeralKey, customer };
    }catch(error){
      console.log('拉取支付参数失败: ', error)
      return {}
    }
  };
  

• 纠正逻辑误区：init阶段本就不存在paymentOption值
  你设置了customFlow: false走Stripe默认支付流程，这个模式下initPaymentSheet只负责把支付配置预加载到SDK里，paymentOption是用户后续弹出支付面板、选中具体支付方式之后才会生成的值，初始化环节用户还没做任何交互，这个字段本来就是undefined，不需要在init阶段等待这个字段返回。
  如果你确实需要拿到用户选中的支付方式做自定义UI展示，需要把customFlow设为true接管完整流程，通过onPaymentOptionSelected回调拿值，普通默认流程下你只需要判断init接口有没有返回error即可。
• 修复阻塞流程的状态bug
  你当前的loading状态逻辑完全写反，且缺失核心方法实现：
  1. loading初始值为false，按钮写了disabled={!loading}，意味着页面加载完按钮永远是置灰状态
  2. 初始化完成后你没有更新loading状态，也没有实现openPaymentSheet方法，就算初始化成功也无法唤起支付面板
     对应修复代码：

  // 实现唤起支付面板方法
  const openPaymentSheet = async () => {
    // 点击按钮时置为加载中，禁止重复点击
    setLoading(false);
    const { error } = await presentPaymentSheet();
    if (error) {
      // 这里写用户取消、支付失败的业务逻辑
      console.log('支付流程异常: ', error?.message);
    } else {
      // 这里写支付成功逻辑：更新订单状态、跳转成功页等
      Alert.alert('支付成功');
    }
    // 流程结束恢复按钮可点击状态
    setLoading(true);
  };
  
  const initializePaymentSheet = async () => {
    const { clientSecret, ephemeralKey, customer } = await fetchPaymentSheetParams();
    // 参数不全直接终止初始化
    if (!clientSecret || !ephemeralKey || !customer) {
      setLoading(false);
      return;
    }
  
    const { error } = await initPaymentSheet({
      customerId: customer,
      customerEphemeralKeySecret: ephemeralKey,
      paymentIntentClientSecret: clientSecret,
      allowsDelayedPaymentMethods: true,
      customFlow: false,
      merchantDisplayName: 'Example',
      testEnv: true,
      merchantCountryCode: "US"
    });
    
    if (error) {
      console.log('支付面板初始化失败: ', error?.message);
      setLoading(false);
    } else {
      // 初始化成功，按钮变为可点击状态
      setLoading(true);
    }
  };
  

• 最后做个后端返回校验：确认你后端返回的ephemeralKey是接口返回的完整secret字符串，不是ephemeral key对象的ID字段，Stripe SDK要求传入的是完整的ephemeral key secret值，传ID也会导致初始化异常。

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