Submit Stripe custom form only when Terms and Conditions checks out

Question

I want my stripe form to be submitted to server only when I check "Terms and Conditions" checkbox.

My code -

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

What am I doing wrong? Please help

Answer 1

For starters, you have jQuery creating a form handler but you also have an inline JavaScript event handler on the form. You should drop the onsubmit on the form itself and then check the terms and conditions status within the jQuery form submission event handler.

Cheers, Larry

PS I work on Support at Stripe.