<div class="row stripeCardForm">
        <section class="col col-3">
            <label class="label">{{ 'card-number' | t }}</label>
            <label class="input">
                <span class="value-input ">
                    <input type="text" size="20" data-stripe="number">
                </span>
            </label>
        </section>

        <section class="col col-2">
            <label class="label">{{ 'expiration_month' | t }}</label>
            <label class="input">
                <span class="value-input ">
                    <input type="text" size="2" data-stripe="exp_month">
                </span>
            </label>
        </section>

        <section class="col col-2">
            <label class="label">{{ 'expiration_year' | t }}</label>
            <label class="input">
                <span class="value-input ">
                    <input type="text" size="2" data-stripe="exp_year">
                </span>
            </label>
        </section>

        <section class="col col-2">
            <label class="label">{{ 'cvc' | t }}</label>
            <label class="input">
                <span class="value-input ">
                    <input type="text" size="4" data-stripe="cvc">
                </span>
            </label>
        </section>

        <section class="col col-3">
            <label class="label">{{ 'billing-zip' | t }}</label>
            <label class="input">
                <span class="value-input ">
                    <input type="text" size="6" data-stripe="address_zip">
                </span>
            </label>
        </section>

        <span class="payment-errors"></span>
    </div>


<script type="text/javascript">
    $(function() {
        var $form = $('{{ options.formName }}');
        $form.submit(function(event) {
            // Disable the submit button to prevent repeated clicks:
            $form.find('.submit').prop('disabled', true);

            if (stripeFormEnabled) {
                // Set apikey
                Stripe.setPublishableKey('{{ options.APIKEY }}');

                // Request a token from Stripe:
                Stripe.card.createToken($form, stripeResponseHandler);

                // Prevent the form from being submitted:
                return false;
            } else {
                // Submit the form:
                var url = $form.attr('action');

                if (url[0] === '#') {
                    sendData(url, $form.serialize(), $('#content'));
                    return false;
                }
            }
        });
    });

    function stripeResponseHandler(status, response) {
        // Grab the form:
        var $form = $('{{ options.formName }}');

        if (response.error) { // Problem!

            // Show the errors on the form:
            $.smallBox({
                title: response.error.message,
                color: "danger"
            });
            $form.find('.submit').prop('disabled', false); // Re-enable submission

        } else { // Token was created!

            // Get the token ID:
            var token = response.id;

            // Insert the token ID into the form so it gets submitted to the server:
            $form.append($('<input type="hidden" name="stripeToken">').val(token));

            // Submit the form:
            var url = $form.attr('action');

            if (url[0] === '#') {
                sendData(url, $form.serialize(), $('#content'));
                return false;
            }

        }
    };
</script>