Expresso Store stripe not submitting

Question

Weird one, Expresso+Stripe usually works but in this one case it won't!

The payment_token is being generated (after 1-2 second delay) but the form isn't submitting after that.

Jquery is included ok, here's my template (just the important bits, all else is generic stuff)

<p>
<select name="payment_method">
<option value="">Please select</option>
<option value="Stripe">Credit/Debit card</option>
<option value="PayPal_Express">Paypal</option>
</select>
</p>

{!-- STRIPE FORM --}
<input type="text" id="payment_token" name="payment[token]" value="">
<dl>
<dt><label for="s1">Name on card</label></dt>
<dd><input type="text" id="s1" data-stripe="name"></dd>
<dt><label for="s2">Card number</label></dt>
<dd><input type="text" id="s2" data-stripe="number"></dd>
<dt><label for="s3">Expiration month</label></dt>
<dd>
    <select id="s3" data-stripe="exp-month">
    <option value=""></option>
    {exp_month_options}
    </select>
</dd>
<dt><label for="s4">Expiration year</label></dt>
<dd>
    <select id="s4" data-stripe="exp-year">
    <option value=""></option>
    {exp_year_options}
    </select>
</dd>
<dt><label for="s5">CVV</label></dt>
<dd><input type="text" id="s6" size="4" data-stripe="cvc" /></dd>
</dl>

<script>
$(function() {
    $.getScript('https://js.stripe.com/v2/', function() {
        Stripe.setPublishableKey('pk_test_REMOVED');
    });
    /* Ensure your checkout submit button has id="checkout_submit" */
    $checkout_submit = $("#checkout_submit").click(function() {
        /* Only handle requests for Stripe gateway */
        if (this.form.elements["payment_method"].value == "Stripe") {
            /* Temporarily disable the checkout submit button */
            $checkout_submit.attr('disabled', true);
            /* Create a Stripe card token */
            Stripe.card.createToken($(this.form), stripeResponseHandler);
            /* We don't want to submit the form yet */
            return false;
        }
    });
    /* This function is triggered once Stripe has generated the token */
    function stripeResponseHandler(status, response) {
        /* Re-enable the checkout submit button */
        $checkout_submit.attr('disabled', false);
        /* Check whether we have a valid credit card */
        if (response.error) {
            alert(response.error.message);
        } else {
            /* Set the card token and submit the checkout form */
            $("#payment_token").val(response.id);
            $checkout_submit.off("click").click();
        }
    }
});
</script>


<p class="checkout-next">
    <input type="submit" id="checkout_submit" name="submit" class="btn btn-pri btn-m" value="Place order">
</p>

Can't for the life of me see where its failing, no JS errors. Anyone have any idea?s

Answer 1

I just battled this for half a day myself with Store and Stripe , and the issue ended up being with forms not being able to submit via javascript when there is any element inside the form named submit.

This is tricky since originally, Store required that you have an input named submit to complete the checkout process. They did add the ability to use commit instead though as of version 1.3.

In my testing, naming the submit input - or button - with commit still didn't work (it was submitting as an empty value, which Store didn't detect), so I simply added a hidden input instead.

<input type="hidden" name="commit" value="y" />

Then made sure I left by submission button unnamed:

<button type="submit">Submit Payment</button>

(One note as well: I opted to use Stripe's javascript template - which uses data-stripe attributes - as a starting point, as it's much more up-to-date.)