HTML, CSS and JavaScript playground

<a href="#donateModal" role="button"data-toggle="modal"><button class="btn btn-info"><i class="icon-white icon-gift"></i> Donate</button></a>

<div id="donateModal" class="modal hide" role="dialog">
    <form id="payment-form" action="/payment.php" method="post" class="form-horizontal">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
             <h3>Donate Form</h3>
<p><font size="2">Please note: Your credit card information is protected by an <a href="http://www.sslshopper.com/what-is-ssl.html"><font size="2"><u>SSL Certificate</u></font></a> and processed (confidentially) by <a href="https://stripe.com/ca/help/faq"><font size="2"><u>Stripe.</u></a> Canted Pictures does not have access nor do we store any of your credit card information.</font></p>

</div>
        <div class="modal-body">
            <div class="control-group">
                <label class="control-label" for="first-name">First Name</label>
                <div class="controls">
                    <input id="first-name" name="first-name" type="text" reqired autocomplete="name" />
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="last-name">Last Name</label>
                <div class="controls">
                    <input id="last-name" name="last-name" type="text" reqired x-autocompletetype="name-full" />
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="email">Email</label>
                <div class="controls">
                    <div class="input-prepend"> <span class="add-on"><i class="icon-envelope"></i></span>
                        <input id="email" name="email" type="email" required x-autocompletetype="email" />
                    </div>
                </div>
            </div>
                        <div class="control-group">
                <label class="control-label" for="amount">Donation Amount</label>
                <div class="controls">
                    <div class="input-prepend"> <span class="add-on">$</span>
                        <input id="$amount" name="amount" type="number" class="input-mini" />
                    </div>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="card">Payment Information</label>
                <div class="controls" id="stripe-button-holder">
                    
 <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="pk_test_KbtYQyolMR2drB4y7aKB6iFN"
    data-image="/CantedPicturesLogo.jpeg"
    data-name="Canted Pictures"
    data-description="Contribution"
    data-panel-label="Save"
data-label="Add Card">
  </script>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="anonymous">Privacy</label>
                <div class="controls">
                    <label class="checkbox" rel="popover" data-placement="top" data-content="Tick this box and we will not show your name in the list of pledgers" title="Anonymous Donation">
                        <input id="anonymous" name="anonymous" type="checkbox" />Keep my donation anonymous</label>
                </div>
            </div>
            <div class="control-group">
                <div class="controls">
                    <label class="checkbox">
                        <input id="tos-agreed" name="tos-agreed" type="checkbox" required />I Agree to the <a href="#tos-modal" data-toggle="modal">Terms of Service</a>

</label>
                </div>
            </div>
            <fieldset>
                <legend class="s1">Optional Information</legend>
                <div></div>
                <div class="control-group">
                    <label class="control-label" for="company">Company</label>
                    <div class="controls">
                        <input id="company" name="company" type="text" x-autocompletetype="organization" />
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="website">Website</label>
                    <div class="controls">
                        <div class="input-prepend"> <span class="add-on"><i class="icon-globe"></i></span>
                            <input id="website" name="website" type="url" x-autocompletetype="url" />
                        </div>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="phone">Phone</label>
                    <div class="controls">
                        <div class="input-prepend"> <span class="add-on"><i class="fa fa-phone"></i></span>
                            <input id="phone" name="phone" type="tel" class="input-medium" x-autocompletetype="phone-full" />
                        </div>
                    </div>
                </div>

<div class="control-group">
                    <label class="control-label" for="notes">Notes / Comments</label>
                    <div class="controls">
                        <textarea id="notes" name="notes" placeholder="Any message you may have for us." class="input-xlarge" rows="2"></textarea>
                    </div>
                </div>
            </fieldset>
        </div>

<form>
        <div class="modal-header">
            <div class="pull-right">
                <button class="btn btn-success btn-small">Send Pledge</button>
            </div>
        </div>
</div>
    </form>

</style>

$(function(){
$("#donateModal").on('show', function () {
    // Fix StripeButton sizing bug on Firefox and IE
    $(".stripe-button-inner, .stripe-button-inner iframe").width(132).height(36);
    // ensure button scrolls with the rest of the page
    $(".stripe-button-inner iframe").css('position', 'relative');
});

// Stripe Button Triggers formDomElement.submit().
// We intercept it and notify user we have received the token
var paymentForm = $('#payment-form')[0];
paymentForm.original_submit = paymentForm.submit;
paymentForm.submit = function () {
    $("#stripe-button-holder .stripe-button-inner").html('<span class="label label-success"><i class="icon-ok"></i> Card Added</span>');
    return false;
};

$('#payment-form').validate({
    rules: {
        'first-name': {
            minlength: 1,
            required: true
        },
            'last-name': {
            minlength: 1,
            required: true
        },
        email: {
            required: true,
            email: true
        },
        amount: {
            required: true,
            min: 10,
        },
            'tos-agreed': {
            required: true
        }
    },
    messages: {
        'tos-agreed': 'You need to agree to the Terms of Service',
            'first-name': 'Please give us your first name',
            'last-name': 'Please give us your last name',
            'email': 'Please give us your email so that we can contact you',
            'amount': 'Please pledge at least $10.'
    },
    errorPlacement: function (error, input) {
        $(input).closest('.controls').append(error);
    },
    highlight: function (el) {
        $(el).closest('.control-group').addClass('error');
    },
    unhighlight: function (el) {
        $(el).closest('.control-group').removeClass('error');
    },
    submitHandler: function (form) {
        // ensure CC info has been entered
        if (!$('[name=stripeToken]').val()) {
            $("#stripe-button-holder").closest('.control-group').addClass('error');
            $("#stripe-button-holder").append('<label class="error">Please Add Payment Information</span>')
        } else {
            form.original_submit();
        }
    }
});
  });