如何在Stripe SetupIntent组件中显示Apple Pay选项

首先修复代码中的异步逻辑错误，这是导致支付方式无法正常加载的核心问题之一：

代码修正 #

你的createSetupIntent是异步函数，直接赋值会得到Promise而非实际的client secret，导致Payment Element初始化失败。修改方式如下：

<script>
async function createSetupIntent(customerId) {
    let setupIntentSecret = "";
    try {
        const setupIntent = await stripe.setupIntents.create({
            customer: customerId,
            automatic_payment_methods: {
                enabled: true,
                allow_redirects: 'always'
            },
        });
        setupIntentSecret = setupIntent.client_secret;
    } catch(error) {
        throw error;
    }
    return setupIntentSecret;
}

// 使用async/await包裹初始化逻辑
(async () => {
    try {
        const setupIntentSecret = await createSetupIntent(custId);
        const appearance = {
            theme: 'stripe',
        };
        const options = {
            clientSecret: setupIntentSecret,
            appearance,
        };
        const elements = stripe.elements(options);
        const paymentElement = elements.create("payment");
        paymentElement.mount("#payment-element");
    } catch (error) {
        console.error('初始化失败:', error);
    }
})();
</script>

其他排查要点 #

• 设备与浏览器兼容性：Apple Pay仅支持Safari（macOS 10.14+/iOS 12+）、Chrome for macOS，且设备需绑定至少一张Apple Pay卡片。非兼容环境下不会显示该选项。
• Stripe后台配置核对：
  • 确认Apple Pay支付方式已在Stripe Dashboard中启用；
  • 再次检查域名验证记录，确保域名（含www/非www）完全匹配，无拼写错误。
• HTTPS环境要求：生产环境必须使用HTTPS；本地开发可使用localhost（Stripe允许该域名测试），自定义本地域名需配置有效SSL证书。
• Stripe.js版本：确保使用最新版Stripe.js脚本，旧版本可能存在兼容性问题：

  <script src="https://js.stripe.com/v3/"></script>
  

• 货币与区域匹配：Apple Pay仅支持特定货币（如USD、EUR等），确认你的SetupIntent使用的货币在支持列表内。
• 支付元素初始化时机：必须在获取到有效的client secret后再初始化Payment Element，无效密钥会导致支付方式加载异常。

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