如何在backbonejs中集成Stripe“Pay with Card”

Question

I am trying to integrate Stripe "Pay with Card" checkout into backbone Node environment. On the server side, I am using Stripe Node code - that part works good. However, on the client side, I am unable to capture the event.

I would like to capture the submit event from the Stripe popup to call "paymentcharge" method in the view.

Here is my code:

<!-- Stripe Payments Form Template -->
<form id="stripepaymentform" class="paymentformclass">
   <script
       src="https://checkout.stripe.com/v2/checkout.js" class="stripe-button"
       data-key="pk_test_xxxxxxxxxxxxx"
       data-amount="0299"
       data-name="MyDemo"
       data-description="charge for something"
       data-image="assets\ico\icon-72.png">
   </script>
</form>

Backbone View Class

myprog.PaymentPanelView = Backbone.View.extend({
    initialize: function () {
        this.render();
    }, 
    render: function () {
        $(this.el).html(this.template());
        return this;
    },
    events : {
        "submit" : "paymentcharge"
    },
    paymentcharge : function( event) {
        this.model.set({stripeToken: stripeToken});
    } 
});

Backbone Model Class

var PaymentChargeModel = Backbone.Model.extend({
    url: function(){
        return '/api/paymentcharge';
    },
    defaults: {
    }
})

Setup/Call the View from header menu event

if (!this.paymentPanelView) {
    this.paymentPanelView = new PaymentPanelView({model: new PaymentChargeModel()});
}
$('#content').html(this.paymentPanelView.el);   
this.paymentPanelView.delegateEvents();
this.selectMenuItem('payment-menu');

Answer 1

I think the problem has to do with your View's el and the event you are listening for.

You never explicitly define your View's el , which means it gets initialized to a detached <div> element. You then use your template to fill that <div> with the form element from the template. Even though your <div> is detached, you get to see the content, because you add the content of you el to #content using jquery.

I think the problem is that you are listening for a submit event on the <div> in your el , not the contained <form> . Try changing your events hash to this:

events: {
    'submit form#stripepaymentform': 'paymentcharge'
}

Basically, listen for events on the contained element like in jquery's .on . You can also go right to a button click, something like this:

'click #mysubmitbutton': 'paymentcharge'

Hope this helps!