Expresso Store - Stripe Payment Gateway - token submitted, error: 'undefined' is not a function (evaluating '$checkout_submit.off("click")')

Question

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

});

Answer 1

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