在Rails中使用自定义集成进行条带检查

Question

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

就像简单的集成一样，我试图将自定义集成脚本放在form_tag中 - 我遵循Rails Checkout指南 ，遗憾的是，它只是为简单的集成而编写的。 像指南一样，我有一个收费控制器，有新的和创建动作来显示表格并创建收费。

收费控制器：

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

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

Answer 3

我认为你不想在这里阻止默认，因为这会阻止你的表单被提交到服务器。 当您取出e.preventDefault();时，它是否将表单提交给create动作e.preventDefault(); ？

Answer 4

通过“简单集成”，您仍然可以使用配置选项使用data-label属性（例如data-label ='立即购买'）更改默认蓝色按钮中的文本。 但是你必须使用“自定义集成”来自己完成按钮的样式