Form/Modal/Flask

create.html

<script type="text/javascript">
  // This identifies your website in the createToken call below
  Stripe.setPublishableKey('da_key');
  // ...
</script>
<script>
jQuery(function($) {
  $('#form').submit(function(event) {
    var $form = $(this);

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

    Stripe.card.createToken($form, stripeResponseHandler);

    // Prevent the form from submitting with the default action
    return false;
  });
});
var stripeResponseHandler = function(status, response) {
  var $form = $('#form');

  if (response.error) {
    // Show the errors on the form
    $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();
  }
};
</script>
<div class="create_user">
	<h2 style="text-align: left">Hi and welcome to Roverpass! We offer a 40% discount on over 2000 RV campsites all over the nation! Sign up here to receive your discount card, and join the community!</h2>
	<form method="POST" id="form" action="/create_user">
    <h3>Login Information</h3>
    {{ form.email }}
    {{ form.email_again }}
    {{ form.password }}
    {{ form.password_again }}
    <h3>Payment information</h3>
    <h4>All payments handled securely via Stripe</h4>
    {{ form.card_number(**{'data-stripe':'number'})}}
    {{ form.cvc(**{'data-stripe':'cvc'})}}
    {{ form.expiry_month(**{'data-stripe':'exp-month'})}}
    {{ form.expiry_year(**{'data-stripe':'exp-year'})}}
    <h3>Shipping Information</h3>
    {{ form.address }}
    {{ form.city }}
    {{ form.state }}
    {{ form.zip_code }}
    <input style="visibility:hidden" id="submit" type="submit" value="Go">
  </form>
</div>

modal_holder.html

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Roverpass</h4>
      </div>
      <div class="modal-body">
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" id="submit" class="btn btn-primary" action="submit">Go</button>
      </div>
    </div>
  </div>
</div>
</div>
	<script>
		$(document).ready(function(){
			$('button#open-modal').on('click', function(e){
				e.preventDefault();
				$.ajax({
					url:'http://127.0.0.1:5000/'+$(this).attr('func'), 
					context:document, 
					success: function(response){
						console.log('complete')
						$('#myModal .modal-body').html(response)
						$('#myModal').modal()}
					})
			})
			$('.modal-footer button#submit').on('click', function(e){
				$('form#form').submit()
			})
		})
	</script>

view.py

@app.route('/create_user', methods=['GET', 'POST'])
def create_user():
	form = UserForm(request.form)
	if form.validate_on_submit():
		if User.query.filter_by(email = form.email.data).first() == None:
			user = user_datastore.create_user(email=form.email.data,
						password=encrypt_password(form.password.data),
						active=True,
						confirmed_at=datetime.date.today())
			user_datastore.add_role_to_user(user, 'can_upload_media')
			user_datastore.add_role_to_user(user, 'can_review')
			print 'adding user to db'
			db.session.add(user)
			db.session.commit()
		else:
			return render_template('userExists.html')
	else:
		response = render_template('create_user.html', form=form)
		return render_template('create_user.html', form=form)