Почему кнопка Stripe Google Pay не отображается для меня в пользовательском интерфейсе, несмотря на отсутствие ошибок или исключений? - PullRequest
Новая
       22

Почему кнопка Stripe Google Pay не отображается для меня в пользовательском интерфейсе, несмотря на отсутствие ошибок или исключений?

0 голосов
/ 19 апреля 2019

Я использовал HTML-код кнопки запроса на оплату чередования из документов чередования на https://stripe.com/docs/stripe-js/elements/payment-request-button, чтобы добавить кнопку Google Pay в свой пользовательский интерфейс, но компонент чередования не отображается в пользовательском интерфейсе.

Я использую компьютер с Windows 10 и обслуживаю свое приложение через сервер https. HTML-код, полученный из Stripe Docs, не отображает никаких ошибок или исключений на консоли разработчика, компонент 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>
...