3

We've followed the tutorial (https://exp-resso.com/docs/payment_gateways.html#stripe) and everything looks correct however when we test the system we get the following error: "The number parameter is required"

Here's our code:

{exp:store:checkout
    form_class="form-horizontal"
    return="account/order/ORDER_HASH"
    payment_method="stripe"
    error_handling="inline"
    error_delimiters='<span class="help-inline">|</span>'}

    {if no_items}
        {redirect="basket/index"}
    {/if}

<div class="container content">

  <header>
    <div class="progress progress-info progress-striped"><div class="bar" style="width:90%"></div></div>
    <h1>Confirm Order</h1>
  </header>


  <script type="text/javascript">

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

          /* 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 class="primary-col">

    <div class="col">
      <fieldset>
        <legend>Billing Details</legend>
        <div class="control-group">
          <div><b>{billing_name}</b></div>
          <div>{billing_address1}</div>
          <div>{billing_address2}</div>
          <div>{billing_address3} {billing_postcode}</div>
          <div>{billing_region_name}</div>
          <div>{billing_country_name}</div>
          <div>{billing_phone}</div>
          <div>{order_email}</div>
        </div>
      </fieldset>
    </div>

    <div class="col">
      <fieldset>
        <legend>Shipping Details</legend>
        <div class="control-group">
          {if shipping_same_as_billing}
          Same as Billing Details
          {if:else}
          <div><b>{shipping_name}</b></div>
          <div>{shipping_address1}</div>
          <div>{shipping_address2}</div>
          <div>{shipping_address3} {shipping_postcode}</div>
          <div>{shipping_region_name}</div>
          <div>{shipping_country_name}</div>
          <div>{shipping_phone}</div>
          {/if}
          {if shipping_country_name =="United Kingdom"}
          {if:else}
          <div class="confirmnote">
            <p>Overseas Delivery cost is calculated after your order is placed based on your order value, weight and location.</p>
          </div>
          {/if}
        </div>
      </fieldset>
    </div>

    <div class="full-col">
     <fieldset>
        <legend>Payment</legend>

        {if error:payment_method}
        <div class="control-group">
          <div class="alert alert-error">{error:payment_method}</div>
        </div>
        {/if}

        <div class="control-group">
          <label class="control-label" for="payment_card_no">Card No</label>
          <div class="controls">
            <input type="text" value="" data-stripe="number" />
          </div>
        </div>

        <div class="control-group">
          <label class="control-label" for="payment_name">Name</label>
          <div class="controls">
            <input type="text" value="" data-stripe="name" />
          </div>
        </div>

        <div class="control-group">
          <label class="control-label" for="payment_exp_month">Expiry</label>
          <div class="controls">
            <select data-stripe="exp-month">
                <option value=""></option>
                {exp_month_options}
            </select>
            <select data-stripe="exp-year">
                <option value=""></option>
                {exp_year_options}
            </select>
          </div>
        </div>

        <div class="control-group">
          <label class="control-label" for="payment_csc">CSC</label>
          <div class="controls">
            <input type="text" size="4" value="" data-stripe="cvc" />
          </div>
        </div>

      </fieldset>

    </div> 


  </div> <!-- primary-col -->

  <div class="secondary-col">

    <fieldset>
      <legend>Order Summary</legend>

      <table class="table table-condensed">
        <thead>
          <tr>
            <th style="width:60%">Product</th>
            <th style="text-align:right">Total</th>
          </tr>
        </thead>
        <tbody>
          {items}
          <tr>
            <td>{item_qty} &times; {title}</td>
            <td style="text-align:right">{item_subtotal}</td>
          </tr>
          {/items}
          <tr>
            <th>Subtotal</th>
            <th style="text-align:right">{order_subtotal}</th>
          </tr>
          {if shipping_method_id}
          <tr>
            <td>Shipping ({shipping_method})</td>
            <td style="text-align:right">{order_shipping}</td>
          </tr>
          {/if}
          {if order_tax_val}
          <tr>
            <td>{tax_name} ({tax_percent}%)</td>
            <td style="text-align:right">{order_tax}</td>
          </tr>
          {/if}
          <tr>
            <th>Total</th>
            <th style="text-align:right">{order_total}</th>
          </tr>
        </tbody>
      </table>
    </fieldset>
  </div> <!-- /secondary-col -->

    <div class="form-actions">
        <a href="{path='basket/checkout'}" class="btn">Back</a>
        <input type="hidden" id="payment_token" name="payment[token]" value="" />
        <input type="hidden" name="payment_method" value="stripe">
        <input type="submit" name="submit" value="Confirm Order &amp; Pay" id="checkout_submit" class="btn btn-success" />
    </div>

Any ideas/suggestions would be most appreciated!

  • I was having the same issue. But when I changed my submit button and made sure it was firing via JS it started to work. – Parscale Nov 29 '13 at 19:40
  • Thanks Parscale, What did you change your submit button to? We're still struggling to get this working – Nick Dec 3 '13 at 16:35
3

Two things.

First, check you are running the latest version of Store. There was a bug related to Stripe card tokens fixed in v2.0.4.

Second, check which fields are actually being submitted to Store (in your browser's network tab), after the Stripe response comes back. Make sure payment[token] is actually submitted, and that it contains something which at least looks like a valid token (should be a random string). If Store can't find a card token, it will look for a card number instead, which is why you see the error "The number parameter is required".

  • Thanks, we're running 2.0.7, shall check the network tab in the morning and get back to you. – Nick Dec 1 '13 at 20:46
  • return_url:account/order/ORDER_HASH payment_method:stripe ACT:25 RET:basket/billing site_id:1 _params:e7lIdLfUQMG94W3E2eW0j…… payment[token]: payment_method:stripe submit:Confirm Order & Pay Looks like payment[token] is not included… – Nick Dec 3 '13 at 12:26
  • We're actually running 2.0.6 (doesn't look like 2.07 is out yet!) still haven't managed to work this out tho… – Nick Dec 3 '13 at 16:36
  • Ok if payment[token] is not included, then your javascript isn't working correctly. Are there any JS errors in the console? If you enter an invalid card number, do you get a popup error message from Stripe? – Adrian Macneil Dec 3 '13 at 21:22
  • No, no popup error with an invalid card number, If i change the input submit to a button submit I get no error at all but the payment still isn't submitted. The only error we have is "event.returnValue is deprecated. Please use the standard event.preventDefault() instead." which seems to just be from the latest version of jquery. We copied the script directly from Store's website. – Nick Dec 4 '13 at 8:32

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.