使用 Stripe 引导网站付款

Question

我对使用 Stripe 进行支付完全不熟悉，因为它是一个 Bootstrap 网站，而且我使用的是 Stripe.js v2。

根据我对 Stripe 工作原理的理解，我的 HTML 表单最初需要使用 Javascript 使用信用卡号、cvc 和过期时间与 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>

Answer 1

您应该在$('#payment-form').on('submit', generateToken); 之前定义generateToken 函数。否则submit 事件没有处理程序，并且永远不会到达e.preventDefault();。

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

演示：https://www.codeply.com/go/wRcqjxfVmf

Answer 2

我最终选择了一个稍微不同的方向，在表单上使用“onsubmit”事件，在 PHP 之前触发 javascript；

<form action="/PHP/submit.php" method="POST" class="contact-form" id="payment-form" onsubmit="return onSubmitDo()">

我也完全改变了 Javascript，所以它看起来像这样：

Stripe.setPublishableKey('pk_test_******');

function onSubmitDo () {

  Stripe.card.createToken( document.getElementById('payment-form'), myStripeResponseHandler );

  return false;

};
function myStripeResponseHandler ( status, response ) {

  console.log( status );
  console.log( response );

  if ( response.error ) {
    document.getElementById('payment-error').innerHTML = response.error.message;
  } else {
    var tokenInput = document.createElement("input");
    tokenInput.type = "hidden";
    tokenInput.name = "stripeToken";
    tokenInput.value = response.id;
    var paymentForm = document.getElementById('payment-form');
    paymentForm.appendChild(tokenInput);
    paymentForm.submit();
  }
     };

我在这里使用的实际 javascript 代码，我在这个 github 帐户上找到了一些 Stripe 支付示例； https://github.com/wsmoak/stripe/blob/master/php/test-custom-form.html

现在表单只需要集成 jquery.payment （格式化和验证卡详细信息），它应该是完整的。 https://github.com/stripe/jquery.payment