Stripe payments 测试条带支付时，似乎忽略了event.preventDefault（）

我正在学习创建电子商务网站的课程。
我们使用这些条带模板：

综上所述，我们有以下几点：

<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>

.条纹元素{
框大小：边框框；
高度：40px；
填充：10px 12px；
边框：1px实心透明；
边界半径：4px；
背景色：白色；
盒影：0 1px 3px 0#e6ebf1；
-webkit过渡：盒影150ms轻松；
过渡：长方体阴影150ms缓解；
}
.StripeElement—焦点{
盒影：0 1px 3px 0#cfd7df；
}
.StripeElement--无效{
边框颜色：#fa755a；
}
.StripeElement--webkit自动填充{
背景色：#fefde5！重要；
}
添加付款方式
付款
//创建条带客户端。
var stripe=stripe（'pk_测试_XB5GjoA0WlBvhBTnI01QRHP400ZKyL3x0U'）；
//创建元素的实例。
var elements=stripe.elements（）；
//创建元素时，可以将自定义样式传递给选项。
//（请注意，此演示使用的样式集比下面的指南更广泛。）
变量样式={
基数：{
颜色：“#32325d”，
fontFamily:“新赫尔维蒂卡”，赫尔维蒂卡，无衬线，
fontSmoothing:'抗锯齿'，
fontSize:'16px'，
“：：占位符”：{
颜色：“#aab7c4”
}
},
无效：{
颜色：“#fa755a”，
iconColor:“#fa755a”
}
};
//创建卡元素的实例。
var card=elements.create（'card'，{style:style}）；
//将card元素的实例添加到“card元素”中。
卡。挂载（“#卡元素”）；
//处理来自卡元素的实时验证错误。
card.addEventListener（'change'，函数（事件）{
var displayError=document.getElementById（'card-errors'）；
if（event.error）{
displayError.textContent=event.error.message；
}否则{
displayError.textContent=''；
}
});
//处理表格提交。
var form=document.getElementById（'payment-form'）；
表单.addEventListener（'submit'，函数（事件）{
event.preventDefault（）；
stripe.createToken（卡片）.then（函数（结果）{
if（result.error）{
//如果出现错误，请通知用户。
var errorElement=document.getElementById（'card-errors'）；
errorElement.textContent=result.error.message；
}否则{
//将令牌发送到服务器。
stripeTokenHandler（result.token）；
}
});
});
//提交带有令牌ID的表单。
函数stripeTokenHandler（令牌）{
//将令牌ID插入表单，以便将其提交到服务器
var form=document.getElementById（'payment-form'）；
var hiddenInput=document.createElement（'input'）；
setAttribute（'type'，'hidden'）；
setAttribute（'name'，'stripeToken'）；
hiddenInput.setAttribute（'value'，token.id）；
表格.appendChild（hiddenInput）；
//提交表格
表单提交（）；
}

当我提交表单时，我期望默认操作开始。但是，表单是提交的，而不是像示例中那样我获得令牌。

---

我错过了什么吗？

默认情况下，表单提交被阻止，但随后使用JavaScript底部附近的

form.submit（）

显式调用

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

---

在这种情况下，

event.preventDefault（）

工作正常，在您稍后调用

form.submit（）

之前不会提交表单。默认情况下，表单提交被阻止，但随后使用JavaScript底部附近的

form.submit（）

显式调用

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

在这种情况下，

event.preventDefault（）

工作正常，在您稍后调用

form.submit（）

之前不会提交表单