<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class='row'> <div class='col-sm-4 col-md-offset-4'> <form accept-charset="UTF-8" action="/" class="require-validation" data-cc-on-file="false" data-stripe-publishable-key="pk_bQQaTxnaZlzv4FnnuZ28LFHccVSaj" id="payment-form" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="_method" type="hidden" value="PUT" /><input name="authenticity_token" type="hidden" value="qLZ9cScer7ZxqulsUWazw4x3cSEzv899SP/7ThPCOV8=" /></div> <div class='form-row'> <div class='col-xs-12 form-group required'> <label class='control-label'>Current password</label> <input class='form-control' size='4' type='text'> </div> </div> <div class='form-row'> <div class='col-xs-12 form-group card required'> <label class='control-label'>New password</label> <input autocomplete='off' class='form-control card-number' size='20' type='text'> </div> </div> <div class='form-row'> <div class='col-xs-12 form-group card required'> <label class='control-label'>Repeate password</label> <input autocomplete='off' class='form-control' size='20' type='text'> </div> </div> <div class='form-row'> <div class='col-md-12 form-group'> <button class='form-control btn btn-primary submit-button' type='submit'>Change password</button> </div> </div> </form> </div> </div> </div> </div> <br> <div class="panel panel-danger"></div>

$(function() { $('form.require-validation').bind('submit', function(e) { var $form = $(e.target).closest('form'), inputSelector = ['input[type=email]', 'input[type=password]', 'input[type=text]', 'input[type=file]', 'textarea'].join(', '), $inputs = $form.find('.required').find(inputSelector), $errorMessage = $form.find('div.error'), valid = true; $errorMessage.addClass('hide'); $('.has-error').removeClass('has-error'); $inputs.each(function(i, el) { var $input = $(el); if ($input.val() === '') { $input.parent().addClass('has-error'); $errorMessage.removeClass('hide'); e.preventDefault(); // cancel on first error } }); }); }); $(function() { var $form = $("#payment-form"); $form.on('submit', function(e) { if (!$form.data('cc-on-file')) { e.preventDefault(); Stripe.setPublishableKey($form.data('stripe-publishable-key')); Stripe.createToken({ number: $('.card-number').val(), cvc: $('.card-cvc').val(), exp_month: $('.card-expiry-month').val(), exp_year: $('.card-expiry-year').val() }, stripeResponseHandler); } }); function stripeResponseHandler(status, response) { if (response.error) { $('.error') .removeClass('hide') .find('.alert') .text(response.error.message); } 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.find('input[type=text]').empty(); $form.append("<input type='hidden' name='reservation[stripe_token]' value='" + token + "'/>"); $form.get(0).submit(); } } })