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

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

});