1

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

  • Has their been any API updates that break these plugins? – jrothafer Jun 26 '15 at 15:14
  • Try changing $checkout_submit.off("click").click(); to $('#form_id').submit();. – Derek Hogue Jun 26 '15 at 16:07
  • Also what version of Store are you using along with what version of the Stripe API is your store set to use? – Justin Long Jun 26 '15 at 20:14
  • Derek - good suggestion but that doesn't work, you'd think it should! – Bluedreamer Jul 2 '15 at 12:07
  • Justin EE2.9.2 Store 2.5.0 Stripe API is v2 – Bluedreamer Jul 2 '15 at 12:12
1
+50

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.)

  • Cheers Derek. I actually called in DevDemon support in the end who came up with a similar solution! – Bluedreamer Jul 14 '15 at 15:38
  • I was having the same issue when using the submitHandler in jQuery Validate - jqueryvalidation.org/category/plugin/#submithandler. Adding the hidden element fixed the problem - thanks. Incidentally, I wasn't using Stripe, it was an onsite PayPal Pro implementation. – Dave O'Brien May 4 '16 at 11:33

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.