cart input not showing up correctly in the Stripe form

Question

i've been copying and pasting the first codes from this page : https://stripe.com/docs/stripe-js/elements/quickstart (the html, the css, and the javascript) and I don't understand why, but my card input insn't showing correctly : 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

Remove commented sections.. if you're using bootstrap, add

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

--

add form-control to all viewable inputs