3

在设置 Rails 和 Stripe 的早期阶段遇到问题，我正在关注这个 Railscast：http ://railscasts.com/episodes/288-billing-with-stripe

试图让表单在提交时被 javascript (coffeescript) 检测到，但它只是提交给 create 操作并忽略 javascript。

这是我的咖啡脚本（从 Railcasts 借来的）：

jQuery ->
  Stripe.setPublishableKey($('meta[name="stripe-key"]').attr('content'))
  subscription.setupForm()

  subscription =
    setupForm: ->
      $('#new_subscription').submit ->
        $('input[type=submit]').attr('disabled', true)
        subscription.processCard()
        false

    processCard: ->
      card = 
        number: $('#card_number').val()
        cvc: $('#card_code').val()
        expMonth: $('#card_month').val()
        expYear: $('#card_year').val()
      Stripe.createToken(card, subscription.handleStripeResponse)

    handleStripeResponse: (status, response) ->
      if status == 200
        alert(response.id)
      else
        alert(response.error.message)

我已经生成了这样的表格，但对这部分不太确定......

<%= form_tag accounts_path, {:id => 'new_subscription'} do %>

这将创建：

<form accept-charset="UTF-8" action="/accounts" id="new_subscription" method="post">

请注意，它确实具有正确的 ID。我必须专门设置 ID，即使在 Ryan 的教程中他似乎不必这样做。

有什么想法我哪里出错了吗？

4

1 回答 1

1

我认为你应该注意你的 JavaScript 控制台是否有错误。我认为您在这里遇到了 JavaScript TypeError：

subscription.setupForm()

JavaScript 和 CoffeeScript 都会将变量声明提升到作用域的顶部，但都不会提升定义。例如，这个 CoffeeScript：

pancakes.m()
pancakes =
    m: -> console.log('pancakes')

变成这个 JavaScript：

var pancakes;

pancakes.m();

pancakes = {
  m: function() {
    return console.log('pancakes');
  }
};

所以pancakes当我说的时候存在，pancakes.m()但pancakes仍然undefined在这一点上，所以m直到稍后我们给它赋值时它才有方法。演示

将其应用于您的代码会告诉我们您subscription何时undefined尝试subscription.setupForm(). 试着把事情按正确的顺序排列：

jQuery ->
  Stripe.setPublishableKey($('meta[name="stripe-key"]').attr('content'))
  subscription = ...
  subscription.setupForm()

如果你看一下 Railscast 代码，你会看到结构是这样的：

jQuery ->
  Stripe.setPublishableKey($('meta[name="stripe-key"]').attr('content'))
  subscription.setupForm()

subscription = #...

注意subscription是在函数之外定义的jQuery ->吗？jQuery ->延迟执行，直到页面加载后，但到那时，subscription = ...代码的一部分将已经执行并且subscription将具有非undefined值。

于 2013-09-09T22:29:59.943 回答