Rails 4條紋API只在刷新

Question

我以爲我有條紋API的工作。然而，當我將它部署到Heroku時，我發現我必須'刷新'我的頁面，否則當訪問我的收費表單時，我會在控制檯中獲得一個javascript。錯誤是

的ReferenceError：條紋是沒有定義

現在，當我刷新同一頁面這個錯誤自敗，我可以用我的支付繼續。我對JS沒有那麼瞭解，所以可能是我懷疑的問題。我曾嘗試添加其他條紋庫，但無濟於事。我的形式代碼如下：

<h4>Begin your $5.00 a month subscription</h4> 
<form action="https://stackoverflow.com/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 改變「數據turbolinks軌道」在application.html.haml或application.html.erb =>假infollowing線文件在視圖/佈局文件夾中。

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