尽管没有任何错误或异常，为啥 Stripe Google Pay 按钮无法在 UI 上为我呈现？
Posted
技术标签:
【中文标题】尽管没有任何错误或异常，为啥 Stripe Google Pay 按钮无法在 UI 上为我呈现？【英文标题】：Why does the Stripe Google Pay Button not render for me on the UI despite not having any errors or exceptions?尽管没有任何错误或异常，为什么 Stripe Google Pay 按钮无法在 UI 上为我呈现？ 【发布时间】：2019-09-10 00:22:05 【问题描述】：我已使用 https://stripe.com/docs/stripe-js/elements/payment-request-button 上的条带文档中的条带支付请求按钮 html 代码将 Google Pay 按钮合并到我的 UI 上，但条带组件未在 UI 上呈现。
我使用的是 Windows 10 机器并通过 https 服务器为我的应用程序提供服务，我从 Stripe Docs 获取的 HTML 代码在开发者控制台上没有显示任何错误或异常，iframe 组件可以在元素选项卡，但未在 UI 上呈现按钮。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Google Pay Payment</title>
</head>
<body>
<h1>This is a sample payment page using Stripe</h1>
<label for="card-element">
Credit or debit card
</label>
<form action=" url_for('pay')" method="post" id="payment-form">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<div id="payment-request-button">
<!-- A Stripe Element will be inserted here. -->
</div>
</form>
<script src="https://js.stripe.com/v3/"></script>
<script type="text/javascript">
var stripe = Stripe('pk_test_IVLw1g5rpDe7MwEu6PpxKxFL00SQlZd4eB');
var paymentRequest = stripe.paymentRequest(
country: 'US',
currency: 'usd',
total:
label: 'Demo total',
amount: 1000,
,
requestPayerName: true,
requestPayerEmail: true,
);
var elements = stripe.elements();
var prButton = elements.create('paymentRequestButton',
paymentRequest: paymentRequest,
);
// Check the availability of the Payment Request API first.
paymentRequest.canMakePayment().then(function(result)
if (result)
prButton.mount('#payment-request-button');
else
document.getElementById('payment-request-button').style.display = 'none';
);
// Check the availability of the Payment Request API first.
paymentRequest.canMakePayment().then(function(result)
if (result)
prButton.mount('#payment-request-button');
else
document.getElementById('payment-request-button').style.display = 'none';
);
</script>
</body>
</html>
【问题讨论】：
您的代码对我有效，我看到了“立即付款”按钮。您是否在 Chrome 浏览器上进行测试，并在 Chrome 中添加了受支持的付款方式？ 同样的问题。我在 chrome、safari、firefox 上试过，google pay 和 apple pay 都没有出现。 【参考方案1】：遇到同样的问题，终于解决了。看起来这取决于您的 Google 付款资料中的国家/地区。 所以我的解决方案是：
-
打开https://pay.google.com/gp/w/u/0/home/settings
点击国家/地区行上的编辑图标。
添加以美国为国家的虚假个人资料，使用任何随机地址和电话都可以
无法从这里添加试条卡，所以
打开 chrome://settings/payments 并从此处添加卡，例如 4242 4242 4242 4242。
现在再次打开https://stripe-payments-demo.appspot.com/ 并检查是否可以看到“立即付款”按钮。
【讨论】：
这仍然没有为我解决问题。这非常困难，我无法弄清楚问题所在。 打开 chrome://settings/payments 并从此处添加 4242 4242 4242 4242 之类的卡。这对我有用.. 谢谢 我看到了“立即付款”按钮，但有没有办法获得谷歌品牌的“Google Pay”按钮？我看到 canMakePayment 结果上的 googlepay 是false【参考方案2】：
您的代码也适用于我：https://jsfiddle.net/ufn9w5La/
var stripe = Stripe('pk_test_IVLw1g5rpDe7MwEu6PpxKxFL00SQlZd4eB');
var paymentRequest = stripe.paymentRequest(
country: 'US',
currency: 'usd',
total:
label: 'Demo total',
amount: 1000,
,
requestPayerName: true,
requestPayerEmail: true,
);
var elements = stripe.elements();
var prButton = elements.create('paymentRequestButton',
paymentRequest: paymentRequest,
);
// Check the availability of the Payment Request API first.
paymentRequest.canMakePayment().then(function(result)
if (result)
prButton.mount('#payment-request-button');
else
document.getElementById('payment-request-button').style.display = 'none';
);
有几点需要澄清：
Stripe 付款请求按钮不会呈现 Google Pay 按钮，它有自己的 Stripe“立即付款”按钮 付款单确实包含 Google Pay 作为付款方式（请参阅image） 浏览器需要支持Payment Request API（参见caniuse） - 您在哪个浏览器上进行测试？【讨论】：
如果您的浏览器上已经安装了来自 Google Pay 的特定服务人员，您的 Google Pay 帐户将被用于 Stripe Goole Pay 付款。如果没有，只会提取本地保存的卡，这就是我将帐单地址与我的卡关联起来的地方。以上是关于尽管没有任何错误或异常，为啥 Stripe Google Pay 按钮无法在 UI 上为我呈现？的主要内容，如果未能解决你的问题，请参考以下文章