How to fit Stripe into Backbone View?

Question

Here is the generic code for submitting a credit card form via Stripe.js. I need to fit this into the Backbone view I've pasted below:

// Add Submit Btn Event Listener and Stripe Token Generator from fields
    jQuery(function($) {
      $('#payment-form').submit(function(event) {
            event.preventDefault();
            var $form = $(this);
            // Disable the submit button to prevent repeated clicks
            $form.find('button').prop('disabled', true);
            Stripe.createToken($form, stripeResponseHandler);
            // Prevent the form from submitting with the default action
            return false;
      });
    }); // End jQuery random function
    var stripeResponseHandler = function(status, response) {
    var $form = $('#payment-form');
        if (response.error) {
            // Show the errors on the form
            $form.find('.payment-errors').text(response.error.message);
            $form.find('button').prop('disabled', false);
        } else {
            // token contains id, last4, and card type
            var token = response.id;
            // Insert the token into the form so it gets submitted to the server
            $form.append($('<input type="hidden" name="stripeToken" />').val(token));
            // and submit
            $form.get(0).submit();
        }
    }; // End stripeResponseHandler

My attempt at fitting this into a Backbone View (not working):

WhiteDeals.Views.ProgramPayment = Backbone.View.extend({

initialize: function() {
    _.bindAll(this);
}, 

events: {
    "submit form#payment-form":  "createStripeToken"
},

createStripeToken: function(event) {
    event.preventDefault();
    var $form = $(this);
    // Disable the submit button to prevent repeated clicks
    $form.find('button').prop('disabled', true);
    Stripe.createToken($form, stripeResponseHandler);
    // Prevent the form from submitting with the default action
    return false;
},  // createStripeToken

stripeResponseHandler: function(status,response) {
    var $form = $('#payment-form');
    if (response.error) {
        // Show the errors on the form
        $form.find('.payment-errors').text(response.error.message);
        $form.find('button').prop('disabled', false);
    } else {
        // token contains id, last4, and card type
        var token = response.id;
        // Insert the token into the form so it gets submitted to the server
        $form.append($('<input type="hidden" name="stripeToken" />').val(token));
        // and submit
        $form.get(0).submit();
    }
}, 

render: function () {
    var dealProgram = this.model.toJSON()
    this.$el.html(JST['program/payment']({ dealProgram: this.model.toJSON() }));
    // Show Payment Modal
    $('#payment-modal').modal({
      show: true,
      keyboard: true,
      backdrop: true
    })
    return this;
}

});

Answer 1

The context will not be the same. When you're binding listeners with the events object in a view, the context will automatically be bound to the view itself.
Change:

var $form = $(this);

to

var $form = this.$('#payment-form');