javascript - Stripe with Rails 捐款

Question

我有一个带有单选按钮的表单，用于选择捐赠金额的选项。

看起来像这样:

<tr>
  <td><input type="radio" name="amount" value="10"><span>$10</span></td>
  <td><input class="awk" type="radio" name="amount" value="25"><span>$25</span></td>
</tr>
<tr>
  <td><input type="radio" name="amount" value="50"><span>$50</span></td>
  <td><input type="radio" name="amount" value="100"><span>$100</span></td>
</tr>

有一个支付按钮，可打开 Stripes 支付网关。

我的表格是这样的:

<%= 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: 'foo',
      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: (100 * $('input[name=amount]:checked', '#stripe_donate').val()),
          shippingAddress: false
        });
        e.preventDefault();
      });
    </script>
<% end %>

这会正确加载 Stripe 模式，并在付款按钮上显示正确的金额，但我如何告诉 RAILS 向客户收取多少费用？无论如何，由于 Rails Controller 代码，Stripe 的收费为 5.00 美元:

class ChargesController < ApplicationController
  def new
  end

  def create
    # Amount in cents
    @amount = 500

    customer = Stripe::Customer.create(
      :email => 'example@stripe.com',
      :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

那么我如何告诉 Controller 中的rails @amount 需要设置为从页面接收的值？我是否可以完全跳过 Rails 路线并使用纯 JS 来完成此操作？

Answer 1

首先，我将捐赠金额移至常量中，并添加了对 :amount 属性的支持(假设使用 Rails 3.x 和名为 Charge 的模型)。这使您可以轻松添加或删除美元金额，并使用以下表格提交所选的美元金额:

# /app/models/charge.rb
DONATION_DOLLAR_AMOUNTS = [10, 25, 50, 100]
attr_accessor :amount

在 View 中，在表单内移动单选按钮并使用正确的标签。我们使用常量为每个美元金额生成一个按钮。 (我删除了表结构，因为表单不能跨表行)。

<%= form_tag charges_path, id: 'chargeForm' do %>

  <!-- generate four radio buttons with labels (TODO: move this into a helper) -->
  <% Charge::DONATION_DOLLAR_AMOUNTS.each do |amt| %>       
    <%= radio_button_tag "amount", amt %>
    <%= label_tag "amount_#{amt}", number_to_currency(amt, precision: 0) %>

  <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>
  <!-- ... -->

获取 Controller 中的值:

def create
  # Use dollar amount in param or 5 if none, then convert to cents
  @amount = (params[:amount] || 5) * 100
  # ...