在 Rails 中使用自定义集成进行条带结帐

Question

我正在尝试使用 rails 应用程序中的自定义集成来实施Stripe Checkout - 我的结帐表单显示一个绿色复选标记，表示它已提交，但尚未处理付款。简单的集成效果很好，我网站其他部分的订阅付款也是如此。

与简单集成一样，我试图将自定义集成脚本放在 form_tag 中 - 我遵循了 Rails Checkout guide，不幸的是，它只是为简单集成而编写的。像指南一样，我有一个费用控制器，具有新的和创建操作来显示表单和创建费用。

收费控制器：

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

在我的新视图中，表单设置如下：

<%= 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 %>

我已经尝试了几乎所有我能想到的方法，但不会提交表单来触发创建操作。我看到了使用服务器端脚本的说明，但是任何人都可以指出我可能缺少的正确方向吗？

非常感谢任何帮助！谢谢！

Answer 1

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

首先将来自 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();
}

Answer 2

这是一个可行的解决方案。在表单标签中添加一个 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 %>

这可以通过多种方式解决，但请记住，这是一个 JavaScript 问题，与 Rails 或 Stripe 无关。 Stripe 只是给了我们一个令牌，我们可以用 JavaScript 做任何我们想做的事情。

Answer 3

我认为您不想在此处阻止Default，因为这会阻止您的表单被提交到服务器。当您取出e.preventDefault(); 时，它是否将表单提交给创建操作？

Answer 4

通过“简单集成”，您仍然可以使用configuration options 更改带有数据标签属性（例如数据标签='立即购买'）的默认蓝色按钮中的文本。但是你必须自己使用“自定义集成”来完全设置按钮的样式