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

我希望仅当我选中“条款和条件”复选框时才将我的 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> 

我做错了什么？请帮忙

请您参考如下方法:

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

干杯， 拉里

PS 我在 Stripe 从事支持工作。