条纹付款的自定义说明

时间:2013-03-04 03:16:23

标签: ruby-on-rails customization stripe-payments

我在查找如何与Stripe交易一起发送信息以填写每次购买的“描述”字段时遇到一些麻烦。基本上,我希望这包括付款表单所在的购买页面中的信息。我在每个购买页面上都有一个值,用于显示用户所贡献的学校(<%= @ pin.school%>)。我希望能够将相同的值提取到每个付款说明中,以便我知道用户所贡献的哪所学校。我觉得我有自己和我的应用程序混淆了使用哪种方法在我的表单页面和我的收费控制器之间实现这一点,实际上处理表单提交并将它们发送到Stripe。

“收费”控制器:

class ChargesController < ApplicationController

  def new
  end

  def create
    Stripe.api_key = "sk_test_ESb8aYrhEOcrNXr3940KehVM"
    # Amount in cents
    @amount = 500
    @school = @pin.school

    charge = Stripe::Charge.create(
      :amount => @amount, 
      :currency => "usd",
      :card => params[:stripeToken],
      :description => @school
    )
  end
end

付款页面:

<head>
    <script type="text/javascript" src="https://js.stripe.com/v1/"></script>
    <script type="text/javascript">
    // this identifies your website in the createToken call below
    Stripe.setPublishableKey('pk_test_j8hulWlnmbug4H14Q0emQixf');

    function stripeResponseHandler(status, response) {
      if (response.error) {
        // Show the errors on the form
        $('.payment-errors').text(response.error.message);
        $('.submit-button').prop('disabled', false);
      } else {
        var $form = $('#payment-form');
        // token contains id, last4, and card type
        var token = response.id;
        var email = $("#email").val();
        // Insert the token into the form so it gets submitted to the server
        $form.append($('<input type="hidden" name="stripeToken" />').val(token));
        // and submit
        $form.get(0).submit();
      }
    }

    $(function() {
      $('#payment-form').submit(function(event) {
        // Disable the submit button to prevent repeated clicks
        $('.submit-button').prop('disabled', true);
        var email = $("#email").val();

        Stripe.createToken({
          name: $('.card-name').val(),
          number: $('.card-number').val(),
          cvc: $('.card-cvc').val(),
          exp_month: $('.card-expiry-month').val(),
          exp_year: $('.card-expiry-year').val()
        }, stripeResponseHandler);

        // Prevent the form from submitting with the default action
        return false;
      });
    });
  </script>
</head>
<div class="row">
    <div class="span10 offset1">
        <div class="well">
            Level 1
            <div class="row">
            <div class="span4">
                <p>
                Level 2
                </p>
                <p>
                <%= image_tag @pin.image %>
                </p>
                <p>
                <% if current_user == @pin.user %>
                <%= link_to 'Edit', edit_pin_path(@pin) %> |
                <% end %>
                <%= link_to 'Back', pins_path %>
                </p>
                </div>
            <div class="span4">Level 3
                <h1>
                    <%= @pin.user.name %>
                </h1>
                <p>
                    <b>School:</b>
                    <%= @pin.school %>
                </p>
                <p>
                    <b>My Story:</b>
                    <%= @pin.description %>
                </p>

                <p>
                    <b>Starting Balance:</b>
                    <%= @pin.loan_orig %>
                </p>
                <p>
                    <b>Current Balance:</b>
                    <%= @pin.loan_cur %>
                </p>
                <p>
                    <b>Progress:</b>
                </p>
                <div class="progress progress-success progress-striped">
                  <div class="bar" style="width: 40%"></div>
                </div>
                <p>
                    <b>Share this profile:</b>
                    <%= request.url %>
                </p>


        <!--Start Stripe Form -->
            </div>
            <div class="row">       
            <div class="span10 offset1">
                    <span class="payment-errors"></span>
                        <form action="/charges" method="POST" id="payment-form"class="form-stacked">

                            <p class="form-label">Email Address:</p>
                                     <input class="text" id="email" spellcheck="false"></input>


                        <div class="form-row" "pull-left">
                            <label>
                              <span>Name</span>
                              <input type="text" size="20" autocomplete="off" class="card-name"/>
                            </label>
                          </div>
                          <div class="form-row" "pull-left">
                            <label>
                              <span>Card Number</span>
                              <input type="text" size="20" autocomplete="off" class="card-number"/>
                            </label>
                          </div>

                          <div class="form-row" "pull-left">
                            <label>
                              <span>Security Code (CVC)</span>
                              <input type="text" size="4" autocomplete="off" class="card-cvc"/>
                            </label>
                          </div>
                        <div class="form-row" "pull-right">
                            <label>Expiry Date</label>
                              <select class="card-expiry-month">
                                <option selected="selected" value="01">01</option>
                                <option value="02">02</option>
                                <option value="03">03</option>
                                <option value="04">04</option>
                                <option value="05">05</option>
                                <option value="06">06</option>
                                <option value="07">07</option>
                                <option value="08">08</option>
                                <option value="09">09</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12">12</option>
                            </select>
                        </div>
                            <div class="form-row" "pull-right">
                            <select class="card-expiry-year">
                                <option selected="selected" value="2013">2013</option>
                                <option value="2014">2014</option>
                                <option value="2015">2015</option>
                                <option value="2016">2016</option>
                                <option value="2017">2017</option>
                                <option value="2018">2018</option>
                                <option value="2019">2019</option>
                                <option value="2020">2020</option>
                                <option value="2021">2021</option>
                                <option value="2022">2022</option>
                                <option value="2023">2023</option>
                                <option value="2024">2024</option>
                                <option value="2025">2025</option>
                                <option value="2026">2026</option>
                                <option value="2027">2027</option>
                                <option value="2028">2028</option>
                                <option value="2029">2029</option>
                                <option value="2030">2030</option>
                                <option value="2031">2031</option>
                                <option value="2032">2032</option>
                                <option value="2033">2033</option>
                                <option value="2034">2034</option>
                                <option value="2035">2035</option>
                                <option value="2036">2036</option>
                                <option value="2037">2037</option>
                                <option value="2038">2038</option>
                                </select>
                          </div> 
          <button type="submit" class="btn btn-success">Submit Payment</button>
                        </form>
                <!--End Stripe Form -->
                </div>
            </div>
        </div>
    </div>
 </div>

1 个答案:

答案 0 :(得分:1)

您需要更新到版本2

<script type="text/javascript" src="https://js.stripe.com/v2/"></script>