Пожертвования на полосе с рельсами

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> 

Там есть кнопка оплаты, который открывает полосы платежный шлюз.

для формы у меня есть это:

<%= 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 не заряжается $ 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 

Так как я говорю рельсам в контроллере, при котором необходимо @amount быть установлено в значение, полученном от страницы? Могу ли я просто пропустить маршрут рельсов и сделать это с помощью чистого JS?

Answer 1

Во-первых, я переместил суммы пожертвований в постоянную и добавленную поддержку атрибута :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 
    # ... 

Answer 2

Делают АЯКС представления в контроллер рельсов с количеством в качестве параметра, наряду с маркером полосы:

(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 в url/charges, как будто вы, по-видимому, уже делаете, чтобы отправить stripeToken.

Answer 3

Вы должны поместить радиокнопки внутри формы (должна быть только одна форма), а затем получить это значение на контроллере (вы можете установить значения в центах или иным образом преобразовать их в центы в контроллере).