在Rails中使用自定义集成的条带检验

I am trying to implement Stripe Checkout using the custom integration in a rails app - my checkout form shows a green checkmark saying it submitted but the payment is not being processed. The simple integration works well, as do subscription payments on other parts of my site.

我正在尝试使用rails应用程序中的自定义集成来实现条码签出——我的签出表单显示了一个绿色的复选标记，表示它已经提交了，但是付款没有被处理。简单的集成工作得很好，在我的站点的其他部分也一样。

Like the simple integration, I am trying to place the custom integration script inside of a form_tag - I followed the Rails Checkout guide, which unfortunately is only written for the simple integration. Like the guide, I have a charges controller, with new and create actions to show the form and create the charges.

就像简单的集成一样，我试图将自定义集成脚本放在form_tag的内部——我遵循了Rails检查指南，不幸的是，该指南只针对简单的集成编写。和指南一样，我有一个收费控制器，有新的和创建动作来显示表单和创建收费。

Charges Controller:

指控控制器:

class ChargesController < ApplicationController

def new
end

def create
  # Amount in cents
  @amount = 500

  customer = Stripe::Customer.create(
    :email => params[:stripeEmail],
    :card  => params[:stripeToken]
  )

  charge = Stripe::Charge.create(
    :customer    => customer.id,
    :amount      => @amount,
    :description => 'Rails Stripe customer',
    :currency    => 'usd'
  )

rescue Stripe::CardError => e
  flash[:error] = e.message
  redirect_to charges_path
end

end

And in my new view, the form is setup as follows:

在我的新观点中，表单设置如下:

<%= form_tag charges_path do %>
  <script src="https://checkout.stripe.com/checkout.js"></script>

    <button id="customButton" class="btn btn-large btn-primary">Buy Now</button>

    <script>
      var handler = StripeCheckout.configure({
        key: '<%= ENV["STRIPE_PUBLIC_KEY"] %>',
        image: '/assets/my_logo.png',
        token: function(token, args) {
          // Use the token to create the charge with a server-side script.
        }
      });

      document.getElementById('customButton').addEventListener('click', function(e) {
        // Open Checkout with further options
        handler.open({
          name: 'My Company',
          description: 'Product ($60.00)',
          amount: 60*100,
          shippingAddress: true
        });
        e.preventDefault();
      });
    </script>
<% end %>

I have tried just about everything I can think of, but the form will not be submitted to trigger the create action. I see the note to use a server side script, but can anyone point me in the right direction on what I may be missing?

我已经尝试了所有我能想到的东西，但是表单不会被提交来触发创建操作。我看到了使用服务器端脚本的说明，但是有人能指出我可能遗漏的东西的正确方向吗?

Any help is much appreciated!! Thanks!

非常感谢您的帮助!!谢谢!

4 个解决方案

#1

You need to finish the token callback function.

您需要完成令牌回调函数。

First pass in the response from the Stripe handler as an argument and then append the token id and email as inputs to the form before submitting it: (untested)

首先将来自Stripe处理程序的响应作为参数传入，然后将令牌id和电子邮件作为输入添加到表单中，然后再提交:(未经测试)

token: function(response) {
  var tokenInput = $("<input type=hidden name=stripeToken />").val(response.id);
  var emailInput = $("<input type=hidden name=stripeEmail />").val(response.email);
  $("form").append(tokenInput).append(emailInput).submit();
}

#2

Here is a working solution. Add an id to your form tag. Add a stripeToken and stripeEmail hidden field to your form tag. Then when we receive the token from Stripe we will use JavaScript to set the values of the hidden fields and submit the form by referencing their id's:

这是一个可行的解决方案。向表单标记添加id。向表单标记添加stripeToken和stripeEmail隐藏字段。当我们从Stripe接收到令牌时，我们将使用JavaScript设置隐藏字段的值，并通过引用它们的id提交表单:

<%= form_tag charges_path, id: 'chargeForm' do %>
  <script src="https://checkout.stripe.com/checkout.js"></script>
  <%= hidden_field_tag 'stripeToken' %>
  <%= hidden_field_tag 'stripeEmail' %>
  <button id="customButton" class="btn btn-large btn-primary">Buy Now</button>

  <script>
    var handler = StripeCheckout.configure({
      key: '<%= ENV["STRIPE_PUBLIC_KEY"] %>',
      image: '/assets/my_logo.png',
      token: function(token, args) { 
        document.getElementById("stripeToken").value = token.id;
        document.getElementById("stripeEmail").value = token.email;
        document.getElementById("chargeForm").submit();
      }
    });

    document.getElementById('customButton').addEventListener('click', function(e) { 
      // Open Checkout with further options
      handler.open({
        name: 'My Company',
        description: 'Product ($60.00)',
        amount: 60*100,
        shippingAddress: true
      });
      e.preventDefault();
    });
  </script>
<% end %>

This can be solved many ways but bare in mind this is a JavaScript problem nothing to do with Rails or Stripe really. Stripe are simply giving us the token we can do whatever we want with it with JavaScript.

这可以通过多种方式解决，但请记住，这是一个JavaScript问题，与Rails或Stripe没有任何关系。Stripe为我们提供了一个令牌，我们可以用JavaScript执行任何需要的操作。

#3

I think you don't want to preventDefault here, because that prevents your form from being submitted to the server. Does it submit the form to the create action when you take out e.preventDefault(); ?

我认为您不希望在这里出现preventDefault，因为这会阻止您的表单提交给服务器。当您取出e.preventDefault()时，它是否将表单提交给create操作;吗?

#4

With the "simple integration" you can still change the text in the default blue button with the data-label attribute(eg data-label='Buy now') using the configuration options. But yeh you have to use "custom integration" to fully style the button yourself

使用“简单集成”，您仍然可以使用配置选项在默认的蓝色按钮中使用数据标签属性(如data-label='Buy now')更改文本。但是，您必须使用“自定义集成”来完全设计按钮的样式

#1