Stripe checkout wont submit form

Question

I am using the following code to connect to the Stripe payment gateway. Everything connects correctly, and the token is created. The problem is that the form does not then submit.

I have tried multiple options, but can't get the form to submit.

This is the submit button code:

<input type="submit" name="submit" id="checkout_submit" value="Pay Now" />

And here is the script:

$.getScript('https://js.stripe.com/v2/', function() {
    Stripe.setPublishableKey('pk_test_roBzpWOBxAA4LcgcurQ5DUcA');
});

$checkout_submit = $('#checkout_submit').click(function() {
    if (this.form.elements["payment_method"].value == "Stripe") {
        $checkout_submit.attr('disabled', true);
        Stripe.card.createToken($(this.form), stripeResponseHandler);
    }
    return false;
});

function stripeResponseHandler(status, response) {
    $checkout_submit.attr('disabled', false);
    if (response.error) {
    } else {
        $('#payment_token').val(response.id);
            $checkout_submit.off("click").click();                          
    }
}

Does anyone have any idea why the last part of the script isn't submitting the form:

$checkout_submit.off("click").click(); 

I have also tried replacing this with:

$('form#checkout').submit();

But this also fails to submit the form.

Form

<form id="checkout" method="post">
    <div style="margin:0;padding:0;display:inline;">
        <input type="hidden" value="basket/order/ORDER_HASH" name="return_url">
        <input type="hidden" value="Stripe" name="payment_method">
        <input type="hidden" value="22" name="ACT">
        <input type="hidden" value="basket/checkout-stripe" name="RET">
        <input type="hidden" value="1" name="site_id">
        <input type="hidden" value="2482e401fcd5d9e2bd444a343965171dd2cbd987" name="csrf_token">
        <input type="hidden" value="yOd+cSmm9DPUdq4HZ4g5WSYK7v9hE/vuePzybMuNG5AzjBM1iVh2Fe8l1EWWLAN6w0goBJPJfP9pKAMzbIdhRcabfy+2qmLR9TbXQ4C6HYkDXIRY9Ra9S9dS3S2WVlZIh9y56ieZxCGne6f1/W61bxSRCip1uPWR7LxsPBg4oyut06BJnyZhAeYqZCEmNhWQ4Ef1EbezLANR7SHezdif+laFWLnjTxCInEBlBEf/m64+uRE3MMylP6vtdK48qf60" name="_params">
    </div>
    <div class="grid col-12 divide">
        <ul>
            <li>
                <label>
                    Card Number
                    <span class="required-icon">*</span>
                </label>
                <input class="standard required" type="text" data-stripe="number" value="">
            </li>
            <li>
                <label>
                    Name on Card
                    <span class="required-icon">*</span>
                </label>
                <input class="standard required" type="text" data-stripe="name" value="">
            </li>
            <li>
            <label>
                Expiry Month
                <span class="required-icon">*</span>
            </label>
            <select class="standard required" data-stripe="exp-month">
                <option value="">Expiry Month</option>
                <option value="01">01</option>
                <option value="02">02</option>
                <option value="03">03</option>
                <option value="04">04</option>
                <option value="05">05</option>
                <option value="06">06</option>
                <option value="07">07</option>
                <option value="08">08</option>
                <option value="09">09</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
            </select>
            </li>
            <li>
                <label>
                    Expiry Year
                    <span class="required-icon">*</span>
                </label>
                <select class="standard required" data-stripe="exp-year">
                    <option value="">Expiry Year</option>
                    <option value="2015">2015</option>
                    <option value="2016">2016</option>
                    <option value="2017">2017</option>
                    <option value="2018">2018</option>
                    <option value="2019">2019</option>
                    <option value="2020">2020</option>
                    <option value="2021">2021</option>
                    <option value="2022">2022</option>
                    <option value="2023">2023</option>
                    <option value="2024">2024</option>
                </select>
            </li>
            <li>
                <label>
                    Security Code (CVC)
                    <span class="required-icon">*</span>
                </label>
                <input class="standard required" type="text" data-stripe="cvc" value="" size="4">
            </li>
        </ul>
    </div>
    <div class="grid col-12">
        <input id="payment_token" type="hidden" value="" name="payment[token]">
        <input id="checkout_submit" type="submit" value="Pay Now" name="submit">
    </div>
</form>

Answer 1

You need to change the name of your submit button. having <input type="submit" name="submit"/> obscures the form objects submit method by replacing it with the button object.

Answer 2

You can try this:

$.getScript('https://js.stripe.com/v2/', function() {
    Stripe.setPublishableKey('pk_test_roBzpWOBxAA4LcgcurQ5DUcA');
});

$checkout_submit = $('#checkout_submit'); // assign the element instead of bound event.

$checkout_submit.click(function() {
    if ($('[name="payment_method"]').val() === "Stripe") {
        $checkout_submit.prop('disabled', true); // use prop
        Stripe.card.createToken($(this).closest('form'), stripeResponseHandler); // pass the form here
    }
    return false;
});

function stripeResponseHandler(status, response) {
    $checkout_submit.prop('disabled', false); // use prop instead
    if (response.error) {
    } else {
        $('#payment_token').val(response.id);
        //$checkout_submit.off("click").click();              
        $checkout_submit.closest("form")[0].submit(); // <-----try this             
    }
}