javascript - 购物车输入未在 Stripe 表单中正确显示

Question

我一直在复制和粘贴此页面的第一个代码:https://stripe.com/docs/stripe-js/elements/quickstart (html、css 和 javascript)
我不明白为什么，但我的卡输入不能正确显示:
https://ibb.co/cLPzrzD

错误的英文翻译:“自动输入信用卡号码已被禁用。因为此表单使用的连接不安全”

如果有人知道为什么会出现这个问题，它将对我有很大帮助。
非常感谢!

这是我的 html 代码:

 <div class="container">
    <h2 class="my-4 text-center">Réservation Standard</h2>
    <form action="standardSuccessfulPaiement.php" method="POST" id="payment-form">
      <div class="form-row">
        <input type="text" name="firstName" class="form-control mb-3 StripeElement StripeElement--empty" placeholder="Votre nom">
        <input type="text" name="lastName" class="form-control mb-3 StripeElement StripeElement--empty" placeholder="Votre prénom">
        <input type="email" name="email" class="form-control mb-3 StripeElement StripeElement--empty" placeholder="Votre email">
        <div id="card-element">
          <!-- A Stripe Element will be inserted here. -->
        </div>

        <!-- Used to display form errors. -->
        <div id="card-errors" role="alert"></div>
      </div>

      <button>Submit Payment</button>
    </form>
</div>

这是我的 javascript 代码:

// Create a Stripe client.
var stripe = Stripe('XXXXX');

// Create an instance of Elements.
var elements = stripe.elements();

// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
base: {
color: '#32325d',
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
fontSize: '16px',
'::placeholder': {
  color: '#aab7c4'
 }
 },
  invalid: {
  color: '#fa755a',
  iconColor: '#fa755a'
}

};

 document.querySelector('#payment-form button').classList = 'btn btn-primary btn-block mt-4';

// Create an instance of the card Element.
var card = elements.create('card', {style: style});

// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');

// Handle real-time validation errors from the card Element.
card.addEventListener('change', function(event) {
var displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
});

// Handle form submission.
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
  event.preventDefault();

stripe.createToken(card).then(function(result) {
  if (result.error) {
  // Inform the user if there was an error.
  var errorElement = document.getElementById('card-errors');
  errorElement.textContent = result.error.message;
  } else {
  // Send the token to your server.
  stripeTokenHandler(result.token);
 }
 });
 });

// Submit the form with the token ID.
function stripeTokenHandler(token) {
// Insert the token ID into the form so it gets submitted to the server
var form = document.getElementById('payment-form');
var hiddenInput = document.createElement('input');
hiddenInput.setAttribute('type', 'hidden');
 hiddenInput.setAttribute('name', 'stripeToken');
hiddenInput.setAttribute('value', token.id);
form.appendChild(hiddenInput);

 // Submit the form
form.submit();
}

Answer 1

删除注释部分.. 如果您使用 bootstrap ，请添加

<div id="card-element" class="form-control">

——

向所有可见输入添加表单控件