Rails 4 Stripe API 仅适用于 Refresh

Question

我以为我可以让条带 API 正常工作。但是，当我将它部署到 Heroku 时，我发现我必须“刷新”我的页面，否则在访问我的收费表单时我会在控制台中获得一个 javascript。错误是

ReferenceError: Stripe is not defined

现在，当我刷新同一页面时，此错误消失，我可以继续付款。我对 JS 不是很了解，所以这可能是我怀疑的问题。我尝试添加其他条带库但无济于事。我的表单代码如下：

<h4>Begin your $5.00 a month subscription</h4>
<form action="/users/charge" method="POST" id="payment-form">
  <span class="payment-errors"></span>
  <div class="row">
    <div class="col-md-6">
      <label>Card Number</label>
      <input class="form-control" type="text" name="Card Number" size="20" data-stripe="number" placeholder="4242424242424242"/>
    </div>
  </div>
  <br />
  <div class="row">
    <div class="col-xs-2">
      <label>CVC</label>
      <input type="text" data-stripe="cvc" class="form-control" name="CVC" placeholder="123">
    </div>
  </div>
  <br />
  <div class="row">
    <div class="col-xs-2">
      <label>Expiration</label>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-4">
      <label>MM</label>
      <input type="text" data-stripe="exp-month" class="form-control" name="MM" placeholder="01">
    </div>
    <div class="col-xs-4">
      <label>YYYY</label>
      <input type="text" data-stripe="exp-year" class="form-control" name="YYYY" placeholder="2020">
    </div>
  </div>

  <div class="row">
    <div class="col-xs-4">
      <br/><button class="btn btn-primary" type="submit">Create Subscription</button>
    </div>
    <div class="col-xs-4">
      <br/>
      <%= link_to image_tag("big.png"), "https://stripe.com/" %>
    </div>
    <div class="col-xs-4">
      <br/>
      <ul>
        <li>Reasons To Subscribe:</li>
        <li>More tutorials</li>
        <li>Personal Contact with A.J.</li>
        <li>Request Your own tutorials!</li>
        <li>Open Source Help</li>
      </ul>
    </div>
  </div>

  <%= token_tag nil %>
</form>

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

<script type="text/javascript">
  Stripe.setPublishableKey("<%= ENV['STRIPE_PUBLIC_KEY'] %>");

  function stripeResponseHandler(status, response) {
  // Grab the form:
  var $form = $('#payment-form');

  if (response.error) { // Problem!

    // Show the errors on the form:
    $form.find('.payment-errors').text(response.error.message);
    $form.find('.submit').prop('disabled', false); // Re-enable submission

  } else { // Token was created!
    // Get the token ID:
    var token = response.id;

    // Insert the token ID into the form so it gets submitted to the server:
    $form.append($('<input type="hidden" name="stripeToken">').val(token));

    // Submit the form:
    $form.get(0).submit();
  }
};

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

      // Request a token from Stripe:
      Stripe.card.createToken($form, stripeResponseHandler);

      // Prevent the form from being submitted:
      return false;
    });
});
</script>

Answer 1

这可能是由于 Turbolink 在 view/layouts 文件夹中的 application.html.haml 或 application.html.erb 文件中更改 'data-turbolinks-track' => false 后续行。

 %meta{:content => "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no", :name => "viewport"}/
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => 'reload'
= javascript_include_tag 'application', 'data-turbolinks-track' => 'reload'
= csrf_meta_tags

所以你的代码变成：

 %meta{:content => "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no", :name => "viewport"}/
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => false
= javascript_include_tag 'application', 'data-turbolinks-track' => false
= csrf_meta_tags

Answer 2

我在结帐页面之前就有这个：<a href='/my/checkout'>Purchase Subscription</a>

我必须在标签中添加data-no-turbolink='true'：

<a href='/my/checkout' data-no-turbolink='true'>Purchase Subscription</a>