Rails Stripe 付款和表单使用 1 次提交答案

【问题标题】：Rails Stripe payment and form using 1 submitRails Stripe 付款和表单使用 1 次提交
【发布时间】：2017-11-17 00:07:27
【问题描述】：

我的问题与Looking to Submit Rails Form Only After Successful Stripe Checkout Payment 非常相似。我尝试了那里接受的解决方案，但它对我不起作用。

我使用的是 Rails 4.2，Stripe 集成已经实现，我在 Stripe 支付页面所在的页面添加了一个Survey 表单。如果我使用部分中的提交按钮，调查表单会正确显示并保存。但是，如果表单和信用卡付款有效，我会尝试使用 Stripe 付款页面上的 one 提交按钮提交表单（创建并保存）。

Stripe 支付表单好像是通过 js 提交的。

付款/部分/_ticket_payment_panel.html

<form action='/payments/pay_for/receive_payments' id="ticket-form" method="POST">
  // form fields 
</form>


<% content_for :scripts do %>

  <script type="text/javascript" charset="utf-8">
    $(function () {
        var $form = $('#ticket-form');
        //var $survey = $('#survey-form');
        $form.submit(function (event) {
            // Disable the submit button to prevent repeated clicks:
            $form.find('.submit').prop('disabled', true);
            // Request a token from Stripe:
            Stripe.card.createToken($form, stripeResponseHandler);
            // Prevent the form from being submitted:
            return false;
        });
    });

    function stripeResponseHandler(status, response) {
        var $form = $('#ticket-form');
        if (response.error) {
            // Show the errors on the form
            $('.submit').removeProp('disabled');
        } else {
            // response contains id and card, which contains additional card details
            var token = response.id;
            // Insert the token into the form so it gets submitted to the server
            //execute this block only if plan exists -> helpers/payments/application_helper.rb

            $form.get(0).submit();
        }
    }
  </script>

<% end %>

Stripe 提交工作，但它不提交调查表。我尝试添加var $survey = $('#survey-form'); 并在js 中提交。但它要么只提交表单而不提交 Stripe 付款，反之亦然，具体取决于哪个先出现。

我也尝试在控制器中添加存档。

pay_for_controller

def receive_payments
  @survey = Survey.new
  @survey.userprofile_id = current_user.userprofile.id
  skills = params[:skills]
  work_type = params[:work_type]
  @survey.save

  //credit card attempts, delayed jobs code 
end

这是我的调查表

<%= bootstrap_form_for(@survey, :html => { :id => "survey-form" } ) do |f| %>

  //form fields 
  <%= f.submit "Apply", class: 'action-btn btn-rounded btn-large' %>

<% end %>

目前，他们单独提交/保存正确，所以我认为模型和控制器之间的链接很好。但我似乎无法更改 js 代码或控制器来同时保存调查表和 Stripe 付款。

【问题讨论】：

这些表格是完全分开的，还是有一个表格在另一个表格里面？
这些表格是完全分开的。但是这两种形式都呈现在同一个页面部分。
您不能从一个请求中提交两个不同的表单。您可以通过两种方式解决这种情况。 1. 将两个表单合并为一个表单，2. 通过 AJAX 调用保存 survey 表单数据，并在您的 AJAX 调用响应时提交条带表单。
1.如果我将两个表单合并为一个表单，那么我将无法将某些字段保存到survey 表和信用卡信息到Ticket 表？ 2.我会试试这个建议，这是否意味着有2个按钮？一种通过 AJAX 提交survey 表单数据。然后在survey表单提交成功后显示条形表单并提交条形表单？
@tshckr 提供了单一表单提交的解决方案逻辑

标签： ruby-on-rails forms stripe-payments ruby-on-rails-4.2

【解决方案1】：

按照粗略的逻辑解释解决方案，单次提交

假设当两个表单（条带、调查）准备好时，将调用条带请求。然后你需要在成功从Stripe获取token后发起AJAX请求（发布调查数据），然后Stripe表单提交

function stripeResponseHandler(status, response) {
        var $form = $('#ticket-form');
        if (response.error) {
            $('.submit').removeProp('disabled');
        } else {
            var token = response.id;
            //here is the ajax call to submit survey
            $.ajax({
              type: "POST",
              url: "url/of/your/survey/form/post",
              data: "{empid: " + empid + "}",
              contentType: "application/json; charset=utf-8",
              dataType: "json",
              success: function(result){
                   //submit stripe form only if the survey data saved
                   $form.get(0).submit();
              },
              error: function(){
                   //handle error situation if post request failed
              }
            });
        }
    }

【讨论】：