При проверке платежа Stripe, event.preventDefault (), похоже, игнорируется - PullRequest
Новая
       5

При проверке платежа Stripe, event.preventDefault (), похоже, игнорируется

0 голосов
/ 15 января 2020

Я прохожу курс по созданию сайта электронной коммерции. Мы используем следующие шаблоны полос: https://stripe.com/docs/stripe-js

Все вместе, у нас есть следующее: 

<script src="https://js.stripe.com/v3/"></script>
<style>
.StripeElement {
box-sizing: border-box;

height: 40px;

padding: 10px 12px;

border: 1px solid transparent;
border-radius: 4px;
background-color: white;

box-shadow: 0 1px 3px 0 #e6ebf1;
-webkit-transition: box-shadow 150ms ease;
transition: box-shadow 150ms ease;
}

.StripeElement--focus {
box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
border-color: #fa755a;
}

.StripeElement--webkit-autofill {
background-color: #fefde5 !important;
}
</style>
<div class="col-10 col-md-6 mx-auto">
  <h3>Add Payment method</h3>
  <form action="/charge" method="post" id="payment-form">
    <div class="form-row">
      <div id="card-element" class="form-control">
        <!-- A Stripe Element will be inserted here. -->
      </div>

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

    <button class="btn btn-primary my-3">Submit Payment</button>
  </form>
</div>
<script type="text/javascript">
// Create a Stripe client.
var stripe = Stripe('pk_test_XB5GjoA0WlBvhBTnI01QRHP400ZKyL3x0U');

// 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'
}
};

// 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();
}
</script>

Когда я отправляю форму, я ожидал, что сработает действие protectDefault. Однако форма отправляется вместо того, чтобы я получил токен, как в примере. Я что-то пропустил?

1 Ответ

2 голосов
/ 15 января 2020

Форма по умолчанию запрещена, но затем вызывается явно, используя form.submit() в нижней части вашего JavaScript.

Это на самом деле предназначено, и вы в конечном итоге захотите отправить свою форму. Вы заметите, что это создаст токен, затем создаст скрытое поле ввода в форме со значением токена, а затем отправит форму. Эта отправка формы отправляет все данные, введенные в вашу форму, плюс значение скрытого ввода, содержащего токен.

В этом случае event.preventDefault() работает правильно и не отправляет форму до тех пор, пока вы позже не вызовете form.submit().

...