5

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

我正在使用 Windows 10 机器并通过 https 服务器为我的应用程序提供服务，我从 Stripe Docs 获取的 HTML 代码在开发人员控制台上没有显示任何错误或异常，可以在 Elements 选项卡上看到 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>
4

2 回答 2

5

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

  1. 打开https://pay.google.com/gp/w/u/0/home/settings
  2. 点击国家/地区行上的编辑图标。
  3. 添加以美国为国家的虚假个人资料，可以使用任何随机地址和电话
  4. 从这里添加试条卡是不可能的，所以
  5. 打开 chrome://settings/payments 并从此处添加 4242 4242 4242 4242 之类的卡。
  6. 现在再次打开https://stripe-payments-demo.appspot.com/并检查您是否可以看到“立即付款”按钮。
于 2019-12-28T10:23:50.510 回答
0

您的代码也适用于我：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';
  }
});

使用 Google Pay 付款方式的付款单

有几点需要澄清：

  • Stripe 付款请求按钮不会呈现 Google Pay 按钮，它有自己的 Stripe“立即付款”按钮
    • 付款单确实包含 Google Pay 作为付款方式（见图）
  • 浏览器需要支持支付请求 API（请参阅caniuse） - 您在哪个浏览器上进行测试？
于 2019-09-06T22:38:49.293 回答