How to integrate the "Pay with card" strip in backbonejs

Question

I am trying to integrate Checkout "Pay with Card" into the Node framework. On the server side, I use the Stripe Node code - this part works well. However, on the client side, I cannot capture the event.

I would like to capture a dispatch event from the Stripe popup to invoke the "payment" 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> 

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

Base model

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

Setting / calling up a view from the title menu

 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 is with your el view and the event you are listening to.

You never explicitly define your type el , which means that it is initialized with a separate <div> element. Then you use your template to fill this <div> form element from the template. Even though your <div> disconnected, you can see the content because you add content from el to #content using jquery.

I think the problem is that you are listening to the submit event on the <div> in el and not in the <form> . Try changing the event hash:

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

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

 'click #mysubmitbutton': 'paymentcharge' 

Hope this helps!