Expresso Store with Stripe final checkout page reloads instead of submitting

Question

I'm having a problem getting Stripe to successfully submit orders. I had it working at one point, but when we switched to live mode it stopped submitting and orders won't complete even if I switch back to test mode. The form just recycles and nothing gets posted to Stripe or EE. Things I've checked:

• I don't have inline error handling on.
• Token gets set correctly.
• JSON formats and appears to be submitted in network tab of webkit inspector
• Running Store 2.1 and EE 2.7.1
• Submit button name is "submit"
• If I switch to "manual" for my payment gateway it works great, so it's gotta be something in between Store & Stripe

Here's the checkout code:

{exp:store:checkout return="shop/thanks"}
<input type="hidden" name="payment_method" value="stripe">
<input type="hidden" id="payment_token" name="payment[token]" value="" />

<p>Card Number
<input type="text" value="" data-stripe="number" /></p>
<p>Your Name
<input type="text" value="" data-stripe="name" /></p>
<select data-stripe="exp-month">
    <option value=""></option>
    {exp_month_options}
</select>
<select data-stripe="exp-year">
    <option value=""></option>
    {exp_year_options}
</select>
<p>CVC<input type="text" size="4" value="" data-stripe="cvc" /></p>
    <input type="submit" name="submit" id="checkout_submit" value="Place Order" class="button" />
{/exp:store:checkout}

And the JS:

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

    /* 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>

What am I missing?

Answer 1

Per the comments, in this case Stripe was working fine. The token was correctly submitted to Store. However, the wrong private API key was specified in the Store settings.

I had the wrong private key in the Store settings. I had assumed the JS would alert for key errors, and didn't think to try that.

For future reference, always try putting {error:payment_method} in your template. Even if you don't have error_handling="inline" in your template, sometimes payment errors must be displayed inline on the next page load.

Answer 2

Just for anyone that runs into this. The actual submit button must have name="submit" in it.

For example doesn't work:

<input type="submit" class="button checkout_button" id="checkout_submit" value="Checkout">

This does work:

<input type="submit" name="submit" class="button checkout_button" id="checkout_submit" value="Checkout">

The first one will just loop the page.

Brad

Answer 3

Quite often this line can be a problem:

if (this.form.elements["payment_method"].value == "stripe") {

If you have more than one payment option (for example, a hidden field, or radio buttons), then this.form.elements["payment_method"] will return an array instead of a single element.

In that case, you need to change the line to:

if (this.form.elements["payment_method"][0].value == "stripe") {

Alternatively, if you are using jQuery:

if ($("[name='payment_method']").val() == "stripe") {

Or if Stripe is your only payment method, simply remove the conditional altogether:

/* Ensure your checkout submit button has id="checkout_submit" */
$checkout_submit = $("#checkout_submit").click(function() {

    /* 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;
});

Answer 4

I had a similar problem and it turned out there was a space before my secret key, so watch out for that. Maybe Store could strip spaces from API keys as a precaution?