ввод корзины не отображается правильно в форме полосы - PullRequest
Новая
       13

ввод корзины не отображается правильно в форме полосы

0 голосов
/ 22 марта 2019

Я копировал и вставлял первые коды с этой страницы: 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();
}

1 Ответ

2 голосов
/ 25 марта 2019

Удалить закомментированные разделы .. если вы используете загрузчик, добавьте 

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

-

добавить контроль формы ко всем видимым входам

...