Stripe集成异常：Apple Pay/Google Pay支付成功后表单未关闭超时

交易已成功完成（Stripe后台及PaymentIntent日志均正常），但Apple Pay/Google Pay支付表单无响应最终超时：iPhone端显示“Payment Not Completed”，安卓端超时时间更长。前端代码弹窗提示交易成功，但支付表单未收到完成信号。

核心原因 #

你遗漏了Stripe Payment Request API中必须的ev.complete()调用——这个方法用来通知Apple Pay/Google Pay支付表单交易已完成（成功或失败），如果不调用，支付表单会一直等待确认信号，最终超时。

修改后的代码 #

function initializePaymentButton(businessId, basePrice) {
    const stripe = Stripe('pk_test_XXXXXXXXXXXXXXXXXXXXXXXX');
    const elements = stripe.elements();

    const paymentRequest = stripe.paymentRequest({
        country: 'US',
        currency: 'usd',
        total: {
            label: 'Total',
            amount: Math.round(basePrice * 100), 
        },
        requestPayerName: true,
        requestPayerEmail: true,
        supportedNetworks: ['visa', 'mastercard', 'amex', 'discover']
    });

    paymentRequest.canMakePayment().then(function(result) {
        if (result) {
            const paymentButton = elements.create('paymentRequestButton', {
                paymentRequest: paymentRequest,
            });
            paymentButton.mount(`#pay-button-container-${businessId}`);

            paymentRequest.on('paymentmethod', async (ev) => {
                const createPaymentIntent = httpsCallable(functions, 'createPaymentIntent');
                const response = await createPaymentIntent({ businessId });

                if (response.data.clientSecret) {
                    const { error, paymentIntent } = await stripe.confirmCardPayment(response.data.clientSecret, {
                        payment_method: ev.paymentMethod.id,
                    });

                    if (error) {
                        // 通知支付表单交易失败
                        ev.complete('fail');
                        alert(`Payment failed: ${error.message}`);
                    } else {
                        // 通知支付表单交易成功
                        ev.complete('success');
                        alert(`Payment successful: PaymentIntent ID: ${paymentIntent.id}`);
                    }
                } else {
                    ev.complete('fail');
                    alert("Failed to create PaymentIntent.");
                }
            });
        } else {
            alert('Google/Apple Pay is not available');
        }
    }).catch((error) => {
        alert('Error checking payment availability: ' + error.message);
    });
}

关键修改点 #

• 在所有交易结果分支（成功、失败、创建PaymentIntent失败）中添加ev.complete()调用：
  • 成功时传入'success'，告知支付表单关闭并显示成功状态
  • 失败时传入'fail'，告知支付表单交易失败，允许用户重试
• 保留你已添加的supportedNetworks配置

额外检查项 #

1. 确认stripe.confirmCardPayment返回的paymentIntent.status为succeeded后再调用ev.complete('success')，避免异步状态同步问题
2. 替换alert()这类阻塞UI的提示方式，改用非阻塞组件，避免干扰支付表单状态更新
3. 确认网站使用HTTPS（localhost开发环境除外），Apple Pay/Google Pay对此有强制要求

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