尽管没有任何错误或异常，为什么 Stripe Google Pay 按钮没有在 UI 上为我呈现？
S C*_*S C 13 stripe-payments google-pay
我已使用https://stripe.com/docs/stripe-js/elements/ payment-request-button 上的 stripe 文档中的 Stripe Payment Request Button HTML 代码将 Google Pay 按钮合并到我的 UI 上，但 stripe 组件未在 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>
小智 7
遇到同样的问题并最终解决了。看起来这取决于你的谷歌付款资料中的国家/地区。所以我的解决方案是：
- 打开https://pay.google.com/gp/w/u/0/home/settings
- 点击国家/地区行上的编辑图标。
- 添加以美国为国家的虚假个人资料，可以使用任何随机地址和电话
- 从这里添加测试条卡是不可能的，所以
- 打开 chrome://settings/ payment 并从此处添加卡，例如 4242 4242 4242 4242。
- 现在再次打开https://stripe- payments-demo.appspot.com/并检查是否可以看到“立即付款”按钮。
- 这仍然没有解决我的问题。这非常棘手，我无法弄清楚这个问题。 (4认同)
您的代码也适用于我：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 作为付款方式（见图）
- 浏览器需要支持Payment Request API（请参阅caniuse） - 您在哪个浏览器上进行测试？