React Native中Stripe调用confirm_payment出现Unexpected Error的解决方法

问题核心分析 #

你遇到的通用错误，主要是代码中对Stripe Payment Sheet的流程逻辑理解有误，存在以下几个关键问题：

1. CustomFlow模式误用：设置customFlow: true意味着需要完全手动处理支付确认，但你同时依赖了默认流程的自动确认，导致逻辑冲突。
2. 参数冗余传递：presentPaymentSheet重复传入了初始化时已经提供的clientSecret、customerId等参数，引发异常。
3. 确认时机错误：在presentPaymentSheet成功后手动调用confirmPaymentSheetPayment，而默认流程下该操作会自动完成，重复调用导致报错。

具体修复步骤 #

1. 移除customFlow: true配置
   若不需要自定义支付流程（比如手动收集卡号），保持默认流程即可，Stripe会自动处理支付确认。
2. 精简presentPaymentSheet调用
   初始化Payment Sheet时已经传入所有必要参数，present时无需重复传递，直接调用无参的presentPaymentSheet()即可。
3. 调整支付成功逻辑
   移除手动调用confirmPaymentSheetPayment的代码，presentPaymentSheet成功回调即代表支付已确认，直接处理后续业务逻辑即可。

修正后的代码示例 #

const { initPaymentSheet, presentPaymentSheet } = useStripe();

useEffect(() => {
    initStripe({ publishableKey: "pk_test_51JUm2TSHumMvEDNY3mFcrddvlTqUIzxoHqyIuCT2x8ExzZcbcTLB9kAZWY1eT9ZJnIeBSHtxtkNCq5QjcDf2e2ge00knO9Qx1R" })
}, [])

async function booknow(item) {
    if (item.sm_booking_type == 1) {
        navigation.navigate('DriverServicesScreen', { user_data: user_data_1, item: item })
    } else {
        const additional_data = await AsyncStorage.getItem('additional_data');
        var num = JSON.parse(additional_data);
        var dataOk = new FormData();
        dataOk.append('amount', item.sm_price * 100);
        await axios(API_URL, {
            method: 'POST',
            headers: { Accept: 'application/x-www-form-urlencoded', 'Content-type': 'multipart/form-data', timeout: 180000 },
            data: dataOk,
        }).then((result) => {
            if (result['data'].code == 200) {
                paymentInitializeFunction(result['data'].client_secret, result['data'].ephemeralKey, result['data'].customer)
                console.log("🚀 ~ API result", JSON.stringify(result['data']))
            } else {
                console.log("🚀 ~ booknow result:", result)
            }
        }).catch((err) => {
            console.log("🚀 ~ API err", err)
        })
    }
}

const paymentInitializeFunction = async (client_secret, ephemeralKey, customer) => {
    try {
        // 初始化Payment Sheet
        const { error: initError } = await initPaymentSheet({
            merchantDisplayName: "Example, Inc.",
            customerId: customer,
            customerEphemeralKeySecret: ephemeralKey,
            paymentIntentClientSecret: client_secret,
            style: 'automatic',
            defaultBillingDetails: {
                name: 'Jane Doe',
                email: 'foo@bar.com',
                phone: '555-555-555',
            }
        });

        if (initError) {
            console.log("🚀 ~ initPaymentSheet error:", initError);
            Error_Alert('初始化支付失败，请重试');
            return;
        }

        // 展示Payment Sheet
        const { error: presentError } = await presentPaymentSheet();
        
        if (presentError) {
            if (presentError.code === 'Canceled') {
                Error_Alert('支付已取消');
            } else {
                console.log("🚀 ~ presentPaymentSheet error:", presentError);
                Error_Alert('支付失败，请重试');
            }
        } else {
            // 支付成功，处理后续业务逻辑
            Alert.alert('Success', '支付确认成功！');
            // 这里可以添加订单创建、页面跳转等逻辑
        }
    } catch (err) {
        console.log("🚀 ~ paymentInitializeFunction err:", err);
        Error_Alert('支付流程出错，请稍后重试');
    }
}

额外排查点 #

• 验证后端返回的client_secret、ephemeralKey是否有效：确保后端正确创建了PaymentIntent（金额、货币设置正确）和EphemeralKey（关联正确的Customer）。
• 更新Stripe SDK到最新版本：旧版本可能存在已知的Payment Sheet bug。
• 使用Stripe测试卡号：测试时使用4242 4242 4242 4242（任意过期日期、CVC），避免真实卡的风控或网络问题。

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