3

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?

  • Are there any errors in your JS error console, either when the page loads, or when you submit the form? – Adrian Macneil Jan 9 '14 at 22:18
  • No js errors on load or submission. The stripe JS runs correctly too, as I get errors with empty fields, and the token field gets populated correctly. – Seamus Holman Jan 9 '14 at 22:20
  • Hmm. When the form is submitted (after the Stripe JS call), can you see the request which is posted to your Store checkout page? Can you see whether payment[token] is being submitted with a non-blank value? – Adrian Macneil Jan 9 '14 at 22:31
  • Also, if you put {error:payment_method} in your checkout page template, does it display anything? – Adrian Macneil Jan 9 '14 at 22:32
  • I can see the token field being populated like so: <input type="hidden" id="payment_token" name="payment[token]" value="tok_103HQh2DGgmnrnphpifGfYYk"> – Seamus Holman Jan 9 '14 at 23:06
2

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.

1

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

0

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;
});
  • Thanks Adrian, Stripe is the only payment method, so I removed the conditional. But it seems like the problem occurs in the actual form submission, either with passing off the data to stripe or with final processing in EE. Thanks again for your time & help! – Seamus Holman Jan 9 '14 at 22:22
0

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?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.