如何在backbonejs中集成Stripe“用卡支付”答案

【问题标题】：How to integrate Stripe "Pay with Card" in backbonejs如何在backbonejs中集成Stripe“用卡支付”
【发布时间】：2013-04-29 11:03:00
【问题描述】：

我正在尝试将 Stripe“用卡支付”结账集成到骨干节点环境中。在服务器端，我使用的是 Stripe Node 代码——这部分效果很好。但是，在客户端，我无法捕获该事件。

我想从 Stripe 弹出窗口捕获提交事件，以在视图中调用“paymentcharge”方法。

这是我的代码：

<!-- 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>

主干视图类

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

主干模型类

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

从标题菜单事件设置/调用视图

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

【问题讨论】：

您可能想查看 backbone-stripe，这是一个 Backbone.Model 对 stripe.js 的包装器。

标签： node.js backbone.js stripe-payments

【解决方案1】：

我认为问题与您的 View 的 el 和您正在收听的事件有关。

您永远不会明确定义您的视图的el，这意味着它会被初始化为一个分离的<div> 元素。然后，使用模板中的表单元素填充 <div>。即使您的<div> 已分离，您也可以看到内容，因为您使用jquery 将el 的内容添加到#content。

我认为问题在于您在el 中的<div> 上侦听submit 事件，而不是包含的<form>。尝试将您的事件哈希更改为：

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

基本上，监听包含的元素上的事件，如 jquery 的.on。您也可以直接点击按钮，如下所示：

'click #mysubmitbutton': 'paymentcharge'

希望这会有所帮助！

【讨论】：