javascript - Stripe を使用した AJAX フォームの送信で完全にスタックする

Question

私はとてもイライラしています。Stripe と協力して、支払い用のフォーム送信システムを作成しています。基本的に、フォームは Stripe への AJAX 呼び出しを行います。これにより、成功したトークンが得られます。これを使用して、フォームを再送信します (これも AJAX を使用します)。フォームが成功した場合は、新しいページにリダイレクトされます。そうでない場合は、再度ナビゲートせずにフォームにエラー メッセージが入力されます。これが私のフォームです：

<%= form_for([@issue, @issue_order]) do |f| %>
  <% if @issue_order.errors.any? %>
    <div class="error_messages">
      <h2><%= pluralize(@issue_order.errors.count, "error") %> occurred. </h2>
      <ul>
        <% @issue_order.errors.full_messages.each do |msg| %>
          <li><%= msg %></li>
        <% end %>
      </ul>
    </div>
  <% end %>
  <% f.hidden_field :issue_id %>
  <%= f.hidden_field :stripe_card_token %>
  <div class="field">
    <%= f.label :email %>
    <%= f.text_field :email %>
  </div>
  <div class="field">
    <%= label_tag :card_number, "Credit Card Number " %>
    <%= text_field_tag :card_number, nil, name: nil %>
  </div>
  <div class="field">
    <%= label_tag :card_code, "Security Code on Card (CVV) " %>
    <%= text_field_tag :card_code, nil, name: nil %>
  </div>
  <div class="field">
    <%= label_tag :card_month, "Card Expiration " %>
    <%= select_month nil, {add_month_numbers_true: true}, {name: nil, id: "card_month"} %>
    <%= select_year nil, {start_year: Date.today.year, end_year: Date.today.year + 15}, {name: nil, id: "card_year"} %>
  </div>
  <div id="stripe_error"></div>
  <div class="actions"><%= f.submit "Purchase Issue", id: "submit_issue_order" %></div>
<% end %>
<div class="errors"></div>

フォームを処理し、ストライプ情報を設定する JavaScript は次のとおりです。

var issueOrder;

$(function() {
  Stripe.setPublishableKey($('meta[name="stripe-key"]').attr('content'));
  issueOrder.setupForm();
});

var issueOrder = {
  setupForm: function() {
    $('#new_issue_order').submit(function(e) {
      e.preventDefault();
      $('#submit_issue_order').attr('disabled', true);
      issueOrder.processCard();
      return false;
    });
  },
  processCard: function() {
    var card;
    card = {
      number: $('#card_number').val(),
      cvc: $('#card_code').val(),
      expMonth: $('#card_month').val(),
      expYear: $('#card_year').val()
    };
    Stripe.createToken(card, issueOrder.handleStripeResponse)
  },
  handleStripeResponse: function(status, response) {
    if (status == 200) {
      $('#issue_order_stripe_card_token').val(response.id);
      // $('#new_issue_order')[0].submit();
      $.ajax({
        type: "POST",
        url: $('#new_issue_order').attr('action'),
        data: { "issue_order": {
          "stripe_card_token": $('#issue_order_stripe_card_token').val(),
          "email": $('issue_order_email').val(),
          },
          "issue_id": $('#issue_order_issue_id').val()
        },
        dataType: "script"
      }, issueOrder.processOrder);
    }
    else {
      $('#stripe_error').text(response.error.message);
      $('input[type=submit]').attr('disabled', false)
    }
  }

そして、ここに私のコントローラーがあります：

  def create
    charge = Stripe::Charge.create(
      :amount => 400,
      :currency => "usd",
      :card => params['issue_order']['stripe_card_token']
    )
    if charge['paid'] == true
      @issue_order = IssueOrder.new(email: params['issue_order']['email'], issue_id: params['issue_id'])
      if @issue_order.save
        @pdf_token = @issue_order.pdf_token
        PdfMailer.pdf_email(params['issue_order']['email'], @issue_order).deliver
      else·
        flash[:error] = []
        flash[:error].push("Your card was charged, but sadly we were unable to create·
        a record in the database. Please contact us for your copy of the issue.")
        respond_to do |format|
          format.js
        end
      end
    else
      # run checks for errors and return error messages
      flash[:error] = []
      flash[:error].push("There was an error in processing your payment.")
      render :json => {success: false}
    end
  end

典型的なストライプセットアップのもの。ストライプ オーダーが正常に処理されると、正常に動作します。ええと、AJAX 呼び出しを手動でロールする前に実行されました。respond_to |format| をスローしても問題ないと思います。成功ページにリダイレクトされたコントローラーの成功ケース。ただし、エラーの場合、コントローラーは create.js.erb を次のようにレンダリングします。

console.log('yo');
$('.errors').empty();
errors = xhr.getResponseHeader('X-Flash-Error').split(',');
<% flash[:error].each do |error| %>
  $('.errors').append($('<p>' + <%= error %> + '</p>'));
<% end %>
setTimeout(function() {
  $('.errors').empty();
}, 3500);

ログによって証明されるように、コントローラーは明らかにファイルに到達し、それをレンダリングします。

Started POST "/issues/1/issue_orders" for 127.0.0.1 at 2013-11-12 23:33:17 -0500
Processing by IssueOrdersController#create as JS
  Parameters: {"issue_order"=>{"stripe_card_token"=>"tok_102vmu2pSkyWUgPAToj334Oa"}, "issue_id"=>"1"}
   (0.4ms)  BEGIN
   (0.4ms)  ROLLBACK
  Rendered issue_orders/create.js.erb (0.1ms)
["Your card was charged, but sadly we were unable to create \n        a record in the database. Please contact us for your copy of the issue."]
Completed 200 OK in 1363ms (Views: 3.9ms | ActiveRecord: 0.8ms)

しかし、コンソールログを含め、私のページでは何も起こりません! AJAX をハンドロールせずに remote: true を使用すると、さらに悪化します。submit() 呼び出しが HTML として認識され、フォーマットをどう処理すればよいかがわからず、不明なフォーマット エラーが表示されます。

ヘルプ！