Stripe PaymentElement无法显示Google Pay按钮的问题求助

我在网站上实现了Stripe PaymentElement，测试模式下卡片、CashApp、Klarna和Afterpay等其他支付方式均可正常使用，但无论如何操作，支付表单始终无法显示Google Pay按钮，仅显示1 link按钮。

已执行的操作 #

• 已在Stripe控制台中启用Google Pay和Link；
• 使用Chrome浏览器进行测试；
• 已在Chrome浏览器中添加Stripe测试卡；
• 使用ngrok提供HTTPS环境；
• 已在Google Pay钱包中添加Visa卡；

查阅相关讨论并验证方案后，执行console.log("Payment request supported:", result);得到如下结果：

{
    "applePay": false,
    "googlePay": false,
    "link": true
}

前端代码 #

useEffect(() => {
  if (stripe) {
    console.log("Stripe initialized:", stripe);
    console.log("Total amount:", total);
    const pr = stripe.paymentRequest({
      country: "US",
      currency: "usd",
      total: {
          label: "Order Total",  
          amount: total * 100, // Amount in cents
        },
      requestPayerName: true,
      requestPayerEmail: true,
      paymentMethodOrder: ["google_pay", "card"],
    });

    // Check if the Payment Request is available
    pr.canMakePayment().then((result) => {
      if (result) {
          console.log("Payment request supported:", result);
          setPaymentRequest(pr);
        } else {
          console.log("Payment request not supported on this device or browser.");
        }
    });

    // Listen for payment requests
    pr.on("paymentmethod", async (e) => {
      const { error } = await stripe.confirmCardPayment(clientSecret, {
        payment_method: e.paymentMethod.id,
      });

      if (error) {
        e.complete("fail");
        setMessage(error.message);
      } else {
        e.complete("success");
        setMessage("Payment successful! Thank you for your purchase.");
      }
    });
  }
}, [stripe, total]);

后端代码 #

def create_payment_intent(request):
    if request.method == "POST":
        try:
            stripe.api_key = api_key
  
            # Create the payment intent
            intent = stripe.PaymentIntent.create(
                 amount=1099,
                 currency="usd",
                 payment_method_types=["card", "cashapp", "afterpay_clearpay", "klarna"],

            )
            print("Client secret generated:", intent.client_secret)
            return JsonResponse({"client_secret": intent.client_secret})
        except Exception as e:
            print("Error in creating PaymentIntent:", e)
            return JsonResponse({"error": str(e)}, status=400)

问题排查及修复方案 #

1. PaymentIntent未包含Google Pay支付方式
   后端创建PaymentIntent时，payment_method_types数组缺少"google_pay"，Stripe不会加载未声明的支付方式。修改后端代码：

   intent = stripe.PaymentIntent.create(
        amount=1099,
        currency="usd",
        payment_method_types=["card", "cashapp", "afterpay_clearpay", "klarna", "google_pay"],
   )
   

2. Google Pay测试卡验证
   确保Google Pay钱包中添加的是Stripe官方测试卡（如4242 4242 4242 4242，过期日期选未来月份/年份，CVV填任意3位），非真实卡无法在测试模式下触发Google Pay按钮。

3. Stripe控制台域名配置
   测试模式下，需在Stripe控制台的Google Pay设置中添加ngrok生成的临时域名，否则Stripe会拒绝加载该支付方式。

4. PaymentRequest参数一致性
   确认stripe.paymentRequest中的country、currency与PaymentIntent完全一致，当前配置（US/usd）无问题，但需确保total.amount非零且符合Google Pay最小金额要求（US地区最低0.01美元）。

5. HTTPS环境有效性
   检查ngrok提供的HTTPS域名是否被Chrome标记为安全（地址栏显示锁图标），不安全环境下Google Pay不会被加载。

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