jquery - 仅当条款和条件 checkout 时才提交 Stripe 自定义表单

Question

我希望仅当我选中“条款和条件”复选框时才将我的 Stripe 表单提交到服务器。

我的代码 -

<script type="text/javascript">
function isAcceptedTermsAndConditions() {
    var isCheckedTermsAndCondition = $('#termsAndCondition').is(":checked");
    if (!isCheckedTermsAndCondition) {
      $("#termsAndConditionMsg").show();
      return false;
    } else {
      $("#termsAndConditionMsg").hide();
      return true;
    }
    return false;
}
</script>

<div id ="userAgreement">
        <div style="margin-left:20px;">
            <input type="checkbox" id="termsAndCondition" onclick="isAcceptedTermsAndConditions()">&nbsp;I have read and agree to the <a style="color:  #0000FF" target="_blank" href="#">terms and conditions</a> .
        </div>
        <span id = "termsAndConditionMsg" class="btn btn-warning" style="margin-left:20px; display:none;padding:10px;margin-top:10px; ">
                Please accept the terms and conditions.
        </span>
</div>


<form action="/stripe/pay" method="POST" id="payment-form" onsubmit="return isAcceptedTermsAndConditions()">
<label>Card Number</label>
<input type="text" class="form-control" data-stripe="number" />
<label>Exp Month</label>
<input type="text" class="form-control" data-stripe="exp-month">
<label>Exp Year</label>
<input type="text" class="form-control" data-stripe="exp-year">
<label>CVC</label>
<input type="text" class="form-control" data-stripe="cvc">
<button type="submit" class="btn btn-primary">Confirm and Pay</button>
</form>

<div style='display: none;' class="alert alert-danger payment-errors-div"><span class="payment-errors"></span></div>

<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script type="text/javascript">
var publishableKey = 'XXXXXX';//test

// This identifies your website in the createToken call below
Stripe.setPublishableKey(publishableKey);

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

  if (response.error) {
    // Show the errors on the form
    $('.payment-errors-div').show();
    form.find('.payment-errors').text(response.error.message);
    form.find('button').prop('disabled', false);
  } else {
    // token contains id, last4, and card type
    var token = response.id;
    // Insert the token into the form so it gets submitted to the server
    form.append($('<input type="hidden" name="stripeToken" />').val(token));
    // and submit
    form.get(0).submit();
  }
};

jQuery(function($) {
  $('#payment-form').submit(function(event) {
    var form = $(this);

    // Disable the submit button to prevent repeated clicks
    form.find('button').prop('disabled', true);

    Stripe.card.createToken(form, stripeResponseHandler);

    // Prevent the form from submitting with the default action
    return false;
  });
});
</script>

我做错了什么？请帮忙

Answer 1

对于初学者来说，您可以使用 jQuery 创建表单处理程序，但表单上还有一个内联 JavaScript 事件处理程序。您应该将 onsubmit 放在表单本身上，然后检查 jQuery 表单提交事件处理程序中的条款和条件状态。

干杯，拉里

PS 我在 Stripe 从事支持工作。