如何在Web端通过Stripe Payment API展示Google Pay支付方式？

核心原因 #

Stripe Checkout的Google Pay/Apple Pay属于card支付方式的集成选项，无需在payment_method_types里单独声明，但需满足特定条件才会自动触发显示。

必要检查与修复步骤 #

• 域名权限配置：
  需将你的网站域名添加到Stripe控制台「支付设置」→「支付方式」→「Google Pay/Apple Pay」的允许域名列表中。本地开发仅支持localhost或HTTPS域名（Stripe仅在HTTPS环境下启用钱包支付，localhost为例外场景）。

• 补充Checkout Session配置：
  无需手动添加google_pay或apple_pay到payment_method_types，但可通过payment_method_options显式开启钱包支付支持：

  checkoutSession.payment_method_options = {
    card: {
      wallet: {
        google_pay: { enabled: true },
        apple_pay: { enabled: true }
      }
    }
  };
  

  保持payment_method_types: ['card']即可。

• 设备与环境验证：

  • Google Pay仅在Chrome、Edge等支持的浏览器中显示，且设备需登录绑定有效支付方式的Google账号；
  • Apple Pay仅在Safari浏览器、iOS设备或Mac端Safari中显示，设备需提前绑定Apple Pay卡片。

• Firebase扩展版本检查：
  确认使用的Stripe Firebase订阅扩展已更新至最新版本，旧版本可能存在钱包支付支持缺陷。

调整后的完整代码示例 #

const checkoutSession = {
    automatic_tax: true,
    tax_id_collection: true,
    collect_shipping_address: true,
    allow_promotion_codes: true,
    line_items: [selectedPrice],
    success_url: window.location.href,
    cancel_url: window.location.href,
    metadata: {
      key: 'value',
    },
    payment_method_options: {
      card: {
        wallet: {
          google_pay: { enabled: true },
          apple_pay: { enabled: true }
        }
      }
    }
};
checkoutSession.mode = 'subscription';
checkoutSession.payment_method_types = ['card'];

const docRef = await db
    .collection('customers')
    .doc(firebase.auth().currentUser.uid)
    .collection('checkout_sessions')
    .add(checkoutSession);

docRef.onSnapshot((snap) => {
    console.log("entered Snap: ", snap.data());
    const { error, url } = snap.data();
    if (error) {
      alert(`An error occured: ${error.message}`);
      document.querySelectorAll('button').forEach((b) => (b.disabled = false));
    }
    if (url) {
      window.location.assign(url);
    }
});

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