测试 Stripe 支付，event.preventDefault() 似乎被忽略了答案

【问题标题】：Testing Stripe payment, event.preventDefault() seems to be ignored测试 Stripe 支付，event.preventDefault() 似乎被忽略了
【发布时间】：2020-01-15 16:35:18
【问题描述】：

我正在学习有关创建电子商务网站的课程。
我们使用这些条带模板：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>

当我提交表单时，我预计 preventDefault 操作会启动。但是，表单已提交，而不是像示例中那样让我获得令牌。我错过了什么吗？

【问题讨论】：

标签： stripe-payments

【解决方案1】：

默认情况下会阻止表单提交，但随后会在 JavaScript 底部附近使用 form.submit() 显式调用。

这实际上是有意的，您最终确实希望提交您的表单。您会注意到这将创建令牌，然后使用令牌的值在您的表单上创建一个隐藏的输入字段，然后它将提交表单。该表单提交将所有详细信息输入发送到您的表单以及包含令牌的隐藏输入的值。

在这种情况下，event.preventDefault() 工作正常，直到您稍后调用 form.submit() 才提交表单。

【讨论】：