3

I have read every post on this matter and can't seem to solve it. I have Store 2.1.0 and can't get past the "The number parameter is required" error when trying to submit an order.

I've double-checked my secret and public codes, they are both the test pair (no mis-matching).

I've made sure the submit input is labeled correctly.

I'm not 100% sure how to check but I think the token is coming back empty. Any guidance in making sure I am checking the right spot would be appreciated.

I am using radio buttons. It seems that was a problem for someone else but they claimed it was fixed in an update some time ago.

Here's my code for the whole page (sorry for indent inconsistencies):

<!DOCTYPE HTML>
<html>

{embed='inc/head_responsive'}

<body>

{if logged_in}

<div class="gs960">

    {embed='inc/header'}

    <div class="wrapper">

        {embed='inc/nav_responsive'}

        <div class="sidebar_left_small">

            {embed='inc/store_nav_responsive'}
        </div>

        <div class="three_fourth">

            {embed='inc/store_masthead'}

            <h1 style="margin-bottom:40px;">Confirm &amp; Pay</h1>

            {exp:store:checkout return="account/invoices/ORDER_HASH/new"}


                <script type="text/javascript">
                $(function() {
                    $.getScript('https://js.stripe.com/v2/', function() {
                        Stripe.setPublishableKey('pk_test_sxEaF2h4B9EvdGBlvc3JJdZ6');
                    });

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


            <div>

                <div style="float:left; width:45%; margin-right:5%;">
                    <h3>Order Summary</h3>
                    <div style="margin-top:10px;">
                                    {items}
                            <div style="margin-top:-10px;">
                                <div style="float:left; width:70%;">
                                                <p>{item_qty} &times; {title} {modifiers}({modifier_value}){/modifiers}</p>
                                </div>
                                <div style="float:right;">
                                    <p>{item_subtotal}</p>
                                </div>
                            </div>
                            <div class="clear" style="height:0px;"></div>
                                    {/items}
                        <br />

                        <div>
                            <div style="float:left; width:70%;">
                                            <p>Shipping:</p>
                            </div>
                            <div style="float:right;">
                                <p>{order_shipping}</p>
                            </div>
                        </div>
                        <div class="clear"></div>
                        <div>
                            <div style="float:left; width:70%;">
                                            <p>Total:</p>
                            </div>
                            <div style="float:right;">
                                <p style="font-size:20px; color:#e7e6d0;">{order_total}</p>
                            </div>
                        </div>
                        <div class="clear"></div>
                    </div>

                    <br /><br />

                    <h3>Billing Details</h3>
                    <p><b>{billing_name}</b></p>
                    <p style="margin-top:-10px;">{billing_address1}</p>
                    <p style="margin-top:-10px;">{billing_city}, {billing_state}</p>
                    <p style="margin-top:-10px;">{billing_postcode}</p>
                    <p style="margin-top:-10px;">{billing_country}</p>
                    <p style="margin-top:-10px;">{billing_phone}</p>

                    <br /><br />

                    <h3>Shipping Details</h3>
                    {if shipping_same_as_billing}
                        <p>Same as Billing Details</p>
                    {if:else}
                        <p><b>{shipping_name}</b></p>
                        <p style="margin-top:-10px;">{shipping_address1}</p>
                        <p style="margin-top:-10px;">{shipping_city}, {shipping_state}</p>
                        <p style="margin-top:-10px;">{shipping_postcode}</p>
                        <p style="margin-top:-10px;">{shipping_country}</p>
                        <p style="margin-top:-10px;">{shipping_phone}</p>
                    {/if}
                </div>

                <div style="float:left; width:50%;">
                    <h3>Payment Method</h3>
                    <br />

                    {if error:payment_method != ''}
                        <div style="margin: 20px 0; background-color:#660000; border:1px solid #ff0000; padding:10px;">{error:payment_method}</div>
                    {/if}

                    <div style="border:1px solid #4f0000; padding:10px; margin-bottom:20px; background-color:#100804; -webkit-box-shadow: 0px 0px 20px 1px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 20px 1px rgba(0,0,0,0.75); box-shadow: 0px 0px 20px 1px rgba(0,0,0,0.75);">
                        <label><input type="radio" name="payment_method" value="PayPal_Express"> Paypal</label><br />
                    </div>
                    <div style="border:1px solid #4f0000; padding:10px; margin-bottom:20px; background-color:#100804; -webkit-box-shadow: 0px 0px 20px 1px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 20px 1px rgba(0,0,0,0.75); box-shadow: 0px 0px 20px 1px rgba(0,0,0,0.75);">
                        <label><input type="radio" name="payment_method" value="Stripe"> Credit Card</label><br /><br />

                    <div>
                        <div style="float:left; width:120px; padding:10px 0 0 20px;">
                            Card Number: 
                        </div>
                        <div style="float:left;">
                            <input type="text" value="" data-stripe="number" class="form_field" style="width:130px;" />
                        </div>
                        <div style="clear:both;"></div>
                    </div>

                    <div>
                        <div style="float:left; width:120px; padding:10px 0 0 20px;">
                            Name On Card: 
                        </div>
                        <div style="float:left;">
                            <input type="text" value="" data-stripe="name" class="form_field" style="width:130px;" />
                        </div>
                        <div style="clear:both;"></div>
                    </div>

                    <div>
                        <div style="float:left; width:120px; padding:10px 0 0 20px;">
                            Exp Month/Year: 
                        </div>
                        <div style="float:left; margin-right:10px;">
                            <select data-stripe="exp-month" class="store_select">
                                    <option value=""></option>
                                    {exp_month_options}
                            </select>
                        </div>
                        <div style="float:left;">
                            <select data-stripe="exp-year" class="store_select">
                                <option value=""></option>
                                {exp_year_options}
                            </select>
                        </div>
                        <div style="clear:both;"></div>
                    </div>

                    <div>
                        <div style="float:left; width:120px; padding:10px 0 0 20px;">
                            CVC: 
                        </div>
                        <div style="float:left;">
                            <input type="text" size="4" value="" data-stripe="cvc" class="form_field" style="width:30px;" />
                        </div>
                        <div style="clear:both;"></div>
                    </div>

                    <input type="hidden" id="payment_token" name="payment[token]" value="" />

                    </div>


                </div>

                <div class="clear"></div>

            </div>

            <div class="clear"></div>

            <div style="text-align:right;">
                <a href="{path='store/details'}"><span class="button" style="font-size:16px; padding:11px 20px; margin:0px;">Back</span></a> &nbsp; 
                <input type="submit" name="submit" id="checkout_submit" class="button" style="font-size:16px; padding:7px 20px; margin:0px;" value="Purchase" />
            </div>

            <div class="clear"></div>

            {/exp:store:checkout}

        </div> <!-- / two_third -->

    </div> <!-- / wrapper -->

    {embed='inc/footer'}

</div>

</body>

{/if}

{if logged_out}{redirect='account/login'}{/if}

</html>

Thanks for any help. It would be VERY much appreciated!

  • Have a look in the Chrome developer tools, under the network tab. You should see two requests made when you click the button, one to Stripe, then another posting to your checkout page. In the request to your checkout page, can you see payment[token] being submitted? – Adrian Macneil Jan 11 '14 at 2:07
  • Found it and it is blank. – 86Stang Jan 11 '14 at 5:01
  • I'm not sure if that last comment was clear in that I'm unsure what to do at this point, now that I've determined the token isn't getting posted. – 86Stang Jan 11 '14 at 18:15
  • Are there any errors in your javascript console? It sounds like the Stripe JS isn't running at all, or is hitting an error that you're not seeing. – Adrian Macneil Jan 12 '14 at 0:46
  • The only error I see "event.returnValue is deprecated. Please use the standard event.preventDefault() instead." – 86Stang Jan 12 '14 at 1:52
2

Adrian showed us the light.

Since we are using radio buttons instead of a select drop-down, this line had to go from:

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

to

if ($(this.form).find("[name='payment_method']:checked").val() == "Stripe") {

Been working like a champ since the fix. Thanks exp-resso guys!

| improve this answer | |

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.