Stripe with Rails上的捐赠

Donations on Stripe with Rails

本文关键字：with Rails Stripe      更新时间：2023-09-26

我有一个带有单选按钮的表格，可以选择捐赠金额的选项。

看起来是这样的：

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

有一个支付按钮，它打开条纹支付网关。

我的表格是这样的：

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

这加载了在支付按钮上正确显示正确金额的条纹模式，但我如何告诉RAILS向客户收取多少费用？由于轨道控制器代码：，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

那么，我如何告诉控制器中的rails需要将@amount设置为从页面接收的值呢？我是不是完全跳过铁轨路线，使用纯JS来完成这项工作？

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

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

在视图中，移动窗体内的单选按钮并使用适当的标签。我们使用常量为每个美元金额生成一个按钮。（我删除了表结构，因为表单不能跨表行）。

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

在控制器中拾取值：

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

向rails控制器提交ajax，将金额作为参数，并附上stripe令牌：

（jquery）

var data = {
  'amount': $('input[name="amount"]').val(),
  'stripeToken': stripeToken //what you got from checkout.js
}
$.post( "/charges", function( data ) {
  console.log('Sent charge to controller!')
});

（轨道）

  def create
    # Amount in cents
    @amount = params[:amount]

或者，将所有内容都放在一个表单中，并将其POST到/charges url，就像您可能已经在发送stripeToken一样。

您应该将单选按钮放在表单内部（应该只有一个表单），然后在控制器上获取该值（您可能希望将值设置为美分，或者在控制器中将其转换为美分）。

相关文章：