为什么Stripe paymentRequest.canMakePayment（）在Localhost上失败？

Question

我让它在我的生产服务器上工作，但是在localhost canMakePayment()return上null。

我已经通过最小的Stripe代码跟踪了这一点，但是遇到了一个函数ko，该函数只是将调用发送CAN_MAKE_PAYMENT到某个消息队列，此后执行将变为异步，并且e.available === false在没有进一步信息的情况下解决请求之前，我无法进行进一步跟踪。

我已验证该API确实可在localhost上的Chrome浏览器中使用（window.PaymentRequest可用）。我也在本地运行https（尽管没有绿色复选标记）。

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

如果我知道在哪里处理消息队列，则可以进一步调试。

Answer 1

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

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

这是一个实验。浏览到Chrome中网址显示为绿色的“安全https：”的网站，例如https://stackoverflow.com。打开开发人员控制台，并粘贴这些命令（从此处开始），然后按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 验证有关，我会尝试解决这个问题。