Submit a custom Stripe form only when checking terms and conditions

Question

I want my strip form to be sent to the server only when the "Terms of Use" checkbox is selected.

My code is

<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 a built-in JavaScript event handler on the form. You must remove onsubmit in the form itself and then check the status and conditions in the jQuery form view event handler.

Cheers, Larry

PS I am working on support on Stripe.