使用Stripe进行Bootstrap网站付款

我完全不习惯使用Stripe付款，因为它是一个Bootstrap网站，我正在使用Stripe.js v2 .

根据我对Stripe如何工作的理解，我的HTML表单最初需要使用信用卡num，cvc和expirary使用Javascript与Stripe进行通信，这将返回一个令牌（或错误） - 然后我提交此令牌，以及其他付款我的服务器上的PHP脚本（然后发送此Stripe）的数量等信息 .

我的问题是，我的JavaScript从未被执行过 - 而我的页面首先尝试运行 submit.php .

我该怎么做才能纠正这个问题 - 让我的JavaScript创建令牌，然后将令牌传递给我的submit.php代码？

*注意 - 我的HTML表单确实包含的内容多于此处列出的内容（例如询问用户姓名，地址，状态，电话，金额等），但我缩短了它，因此更容易阅读 .

HTML代码：

<form action="/PHP/submit.php" method="POST" class="contact-form" id="payment-form">
<div id="creditcard">
  <span class="payment-errors"></span>
    <div class="form-group has-feedback row">
      <label for="cardnumber" class="col-sm-2 form-control-sm">Card Number:</label>
        <div class="col-sm-5">
                        <!--<input type="text" autocomplete="off" class="form-control form-control-sm card-number" value="" pattern="[0-9]{10}" data-stripe="number">-->
                        <input type="text" autocomplete="off" class="form-control form-control-sm card-number" data-stripe="number">
                      </div>
                      <label for="cvc" class="col-sm-1 form-control-sm">CVC:</label>
                      <div class="col-sm-4">
                        <!--<input type="text" autocomplete="off" class="form-control form-control-sm card-cvc" maxlength="3" value="" pattern="[0-9]{3}" data-stripe="cvc">-->
                        <input type="text" autocomplete="off" class="form-control form-control-sm card-cvc" data-stripe="cvc">
                      </div>
                    </div>
                    <div class="form-group has-feedback row">
                        <label for="expiration" class="col-sm-2 form-control-sm">Expiration Date </label>
                        <div class="col-sm-2">
                          <select class="card-expiry-month form-control form-control-sm" data-stripe="exp-month">
                            <option value="01" selected>01</option>
                            <option value="02">02</option>
                            <option value="03">03</option>
                            <option value="04">04</option>
                            <option value="05">05</option>
                            <option value="06">06</option>
                            <option value="07">07</option>
                            <option value="08">08</option>
                            <option value="09">09</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                          </select>
                        </div>
                        <div class="col-sm-2">
                          <select class="card-expiry-year form-control form-control-sm" data-stripe="exp-year">
                            <option value="2018" selected>2018</option>
                            <option value="2019">2019</option>
                            <option value="2020">2020</option>
                            <option value="2021">2021</option>
                            <option value="2022">2022</option>
                            <option value="2023">2023</option>
                            <option value="2024">2024</option>
                            <option value="2025">2025</option>
                        </select>
                      </div>
                    </div>
                    <div class="form-group row">
                      <label for="cardname" class="col-sm-2 form-control-sm">Name on Card:</label>
                      <div class="col-sm-10">
                        <input type="text" class="form-control form-control-sm" autocomplete="off" name="cardname" id="cardname">
                      </div>
                    </div>
                    <div class="form-row form-submit">
                        <button type="submit" class="btn btn-default submit-button">Submit Donation</button>
                    </div>
                  </div>
                </form>

而我的Javascript：

<script src="https://js.stripe.com/v2/"></script>
    <script>
      (function() {
        Stripe.setPublishableKey('pk_test_xxxxx');
      })();
      </script>
    <script>
    $(document).ready(function() {
    $('#payment-form').on('submit', generateToken);

    var generateToken = function(e) {
      var form = $(this);

      //No pressing the buy now button more than Once
      form.find('button').prop('disabled', true);

      //Create the token, based on the form object
      Stripe.create(form, stripeResponseHandler);

      //Prevent the form from submitting
      e.preventDefault();
    });
  });

    var stripeResponseHandler = function(status, response) {
      var form = $('#payment-form');

      //Any validation errors?
      if (response.error) {
        form.find('.payment-errors').text(response.error.message);
        alert(result.error.message);
        //Make the submit button clickable again
        form.find('button').prop('disabled', false);
      } else {
        //Otherwise, we're good to go! Submit the form.
        //Insert the unique token into the form
        $('<input>', {
          'type': 'hidden',
          'name': 'stripeToken',
          'value': response.id
        }).appendTo(form);
        alert(result.token.id);
        //Call tge native submit method on the form
        //to keep the submission from being cancelled
        form.get(0).submit();
      }
    };
    </script>