为什么 Stripe paymentRequest.canMakePayment() 在 Localhost 上会失败？

Question

我让它在我的生产服务器上工作，但在本地主机上canMakePayment() 返回null。

我已经通过缩小的 Stripe 代码跟踪了这一点，但是函数 ko 碰壁了，它只是将一个名为 CAN_MAKE_PAYMENT 的操作发送到某个消息队列，此时执行变得异步，我无法进一步跟踪，直到该请求已通过e.available === false 解决，没有更多信息。

我已经验证了 AP​​I 确实在 localhost 上的 Chrome 中可用（window.PaymentRequest 可用）。我也在本地 https 上运行（虽然没有绿色检查）。

如何追踪导致 Stripe 报告 PaymentRequest 不可用的原因？如果我没有绿色 SSL 检查，Chrome 会拒绝 PaymentRequest 调用吗？如果是这样，我将如何测试这个？ Chrome 文档只是说如果 PaymentRequest 可用，那么您可以调用 API。

如果我知道消息队列的处理位置，我可以进一步调试。

Answer 1

Stripe 的支持团队向我确认需要绿色 SSL 验证。

“支付请求按钮的先决条件之一是 付款请求所在的页面必须作为 使用有效证书确保安全。这是双方的要求 生产和开发。”

这是一个实验。在 Chrome 中浏览到 URL 以绿色显示“安全 https：”的站点，例如 https://stackoverflow.com。打开开发者控制台，粘贴这些命令 (from here) 并按 Enter:

const supportedPaymentMethods = [
  {
    supportedMethods: 'basic-card',
  }
];
const paymentDetails = {
  total: {
    label: 'Total',
    amount:{
      currency: 'USD',
      value: 0
    }
  }
};
const options = {};
const request = new PaymentRequest(
  supportedPaymentMethods,
  paymentDetails,
  options
);
request.show();

然后您会看到一个付款请求模式弹出。

但是，如果您浏览到您自己的本地站点，地址栏以 红色 显示“不安全”（并且“https”被划掉），并且如果您尝试运行相同的代码在控制台中，不会弹出付款请求模式（即使您已为域添加了安全例外）。

因此，Chrome（可能还有其他浏览器）显然会阻止 Stripe（以及 Stripe 等其他工具）在连接不完全安全时访问该浏览器功能。

来自 Stripe 的更新：

虽然 Chrome iOS 确实包含 PaymentRequest 实现，但它不允许从 iframe 使用 PaymentRequest，这会阻止 Stripe 的支付请求按钮元素工作。我们正在与 Chrome 团队合作，以在未来的版本中解决此问题。

为了让 Apple Pay 在 iOS 模拟器或测试设备上运行，域必须可公开访问并通过 Stripe 仪表板 (https://dashboard.stripe.com/account/apple_pay) 或 API 进行注册。 https://stripe.com/docs/stripe-js/elements/payment-request-button#verifying-your-domain-with-apple-pay 我们建议使用 ngrok (ngrok.com) 之类的工具来创建一个面向公众的域，该域具有有效的 HTTPS 证书，可以通过隧道连接到您的本地环境。

Answer 2

绕过 Stripe，我能够验证 Chrome 报告“基本卡”付款方式不受支持。

这需要根据 Google 的文档设置 PaymentRequest 并尝试使用 request.show() 命令。

我猜这与没有绿色 SSL 验证有关，我会尝试修复它。

Answer 3

您应该在 Visual Studio 中启用 SSL 以使用 paymentRequest。

Enable SSL in Visual Studio