Question

我已使用https://stripe.com/docs/stripe-js/elements/payment-request-button上的条带文档中的“条带付款请求按钮HTML”代码在我的UI上合并了Google Pay按钮，但该条带组件未在UI上呈现。

我使用的是Windows 10计算机，并且已通过https服务器为我的应用程序提供服务，我从Stripe Docs获取的HTML代码在开发人员控制台上未显示任何错误或异常，可以在iframe组件上看到元素标签，但该按钮未在用户界面上呈现。

<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>

Answer 1

您的代码也对我有用：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 Payment Request按钮不会呈现Google Pay按钮，它具有自己的Stripe“立即付款”按钮
- 付款表中确实包含Google Pay作为付款方式（请参见image）
浏览器需要支持Payment Request API（请参阅caniuse）-您正在测试哪种浏览器？

Answer 2

面对同样的问题，终于解决了。看起来它取决于您Google付款个人资料中的国家/地区。所以我的解决方案是：

打开https://pay.google.com/gp/w/u/0/home/settings
点击“国家/地区”行上的编辑图标。
添加带有美国作为国家/地区的虚假个人资料，可以使用任意随机地址和电话
不可能从这里添加测试条卡，所以
打开chrome：//设置/付款并从此处添加卡，例如4242 4242 4242 4242。
现在再次打开https://stripe-payments-demo.appspot.com/并检查是否可以看到“立即付款”按钮。

尽管没有任何错误或异常，为什么Stripe Google Pay Button在我的UI上不为我呈现？

2 个答案: