3

I'm getting this error on the final step of my checkout process with Stripe.

'undefined' is not a function (evaluating '$checkout_submit.off("click")')

The page doesn't reload, the button has no function and is not submitting.

  • I have the correct name on the submit button
  • Correct Private and Public API Key with Stripe and in the JS
  • The token is passing through to the hidden field in my template
  • I'm not registering a member on checkout
  • inline errors are off

The checkout html is as follows (I apologize for the spacing, I've removed the containing grid divs):

{exp:store:checkout
 form_class="form-horizontal"
 return="store/order/ORDER_HASH"
 secure="yes"
}

{if no_items}
    {redirect="store/checkout"}
{/if}

   <h3>Billing Details</h3>
   <p>{billing_name}<br />
   {billing_address1}<br />
   {billing_address2}<br />
   {billing_city} {billing_postcode}<br />
   {billing_state_name}<br />
   {billing_country_name}<br />
   {billing_phone}<br />
   {order_email}</p>




                      <h3>Shipping Details</h3>
                          <p>{if shipping_same_as_billing}
                                  Same as Billing Details
                              {if:else}
                                  <b>{shipping_name}</b><br />
                                  {shipping_address1}<br />
                                  {shipping_address2}<br />
                                  {shipping_city} {shipping_postcode}<br />
                                  {shipping_state_name}<br />
                                  {shipping_country_name}<br />
                                  {shipping_phone}</p>
                              {/if}



            <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_method">Payment Method</label>
                <div class="controls">
                    <select id="payments" name="payment_method">
                        <option value="Stripe" selected>credit card</option>
                        <!--<option value="paypal_express">paypal</option>-->
                    </select>
                </div>
            </div>

            <div class="pays" id="paypal_express" style="display:none">
            <h3>Checkout with Paypal</h3>

            <input type="text" name="order_email" placeholder="Your Email Address" />



            </div><!-- end paypal -->

            <div class="pays" id="Stripe">

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

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

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

              <div class="control-group">
                  <label class="control-label" for="payment_csc">CVC</label>
                  <div class="controls">
                      <input type="text" id="payment_csc" data-stripe="cvc" value="" class="input-mini" />
                  </div>
              </div>

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

        <div class="form-actions">
            <a href="{path='store/checkout2'}" class="btn">Back</a>
            <input id="checkout_submit" type="submit" name="submit" value="Place Order" class="btn btn-success" />
        </div>

Javascript:

$( document ).ready(function() {

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


  $checkout_submit = $("#checkout_submit").click(function() {


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


          $checkout_submit.attr('disabled', true);


          Stripe.card.createToken(${(this.form), stripeResponseHandler);


          return false;
      }

   });

  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();
      }
    }
});

});

2

You haven't posted your javascript code, so it's hard to tell exactly where the error is coming from. However,

'undefined' is not a function (evaluating '$checkout_submit.off("click")')

means that $checkout_submit is undefined. That means you haven't created this variable yet. So presumably, right before this error you want to do something like:

var $checkout_submit = $("#my_checkout_button");

My guess is that you already have something along these lines, but there is a typo in the variable name.

Update:

Yes, you can normally assign variables like that in javascript:

var $checkout_submit = $("#checkout_submit").click(function() {
    // etc
});

However, the $checkout_submit variable won't be defined inside the callback function, because it doesn't actually exist until after the click() method finishes executing. So you need to split it into two lines:

var $checkout_submit = $("#checkout_submit");
$checkout_submit.click(function() {
    // now you can use $checkout_submit here
});
|improve this answer|||||
  • I posted the javascript above. I was under the impression that adding the id "checkout_submit" covered defining the variable. I was overlooking that - I'm going to retest and be back in a moment. – Anthony Krol Apr 19 '14 at 3:37
  • I was caching the templates on my development site, and the changes were not submitting in testing. I did place the variable on the template, but it wasn't being read through when I saved my template as a file due to a problem with my dev server configuration. Anyhow - correctly defining the variable obviously worked. Thanks for the time Adrian. – Anthony Krol Apr 22 '14 at 4:28
  • No problem, glad you got it sorted! – Adrian Macneil Apr 22 '14 at 14:39

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.