Stripe JSボタンにイベントリスナーを追加

Question

<script 
src="https://checkout.stripe.com/checkout.js" class="stripe-button" 
data-key="pk_test_dNbyQ3qsyTe8IAikxSfnLhBl" 
data-amount= <%= number_to_currency(@shopping_cart.total) * 100 %> 
data-name="Abound" 
data-description="Checkout" 
data-image="https://stripe.com/img/documentation/checkout/marketplace.png" 
data-locale="auto"> 
document.querySelectorAll('.stripe-button').addEventListener('click',function(){ 
    <%= @shopping_cart.clear %> 
} 

これは支払いを処理するストライプボタンです。問題はEventListenerです。ページをリフレッシュするか、別のページに移動するたびにルビーコードが実行され、カートがクリアされます。誰にでもアイデアはありますか？ jsを無効にするように変更しても、ルビーが実行されますが、これについても説明できますか？

全ページがロードされている：

<h1>Shopping Cart Contents</h1> 
    <div style="font-size: 14px; "> <%= render :partial => 'shopping_cart_item', :collection => @shopping_cart.shopping_cart_it ems %> </div> 
    <div style="font-size: 18px;"><strong>Total:</strong><%= number_to_currency (@shopping_cart.total) %></div> 
    <form> 
    <script 
    src="https://checkout.stripe.com/checkout.js" class="stripe-button" 
    data-key="pk_test_dNbyQ3qsyTe8IAikxSfnLhBl" 
    data-amount= <%= number_to_currency(@shopping_cart.total) * 100 %> 
>> data-name="Abound" 
    data-description="Checkout" 
    data-image="https://stripe.com/img/documentation/checkout/marketplace.png" 
    data-locale="auto"> 
    document.querySelectorAll('.stripe-button').addEventListener('click',function(){ 
     <%= @shopping_cart.clear %> 
    } 
    </script> 
    </form> 

    </div> 

編集：私はRubyはうまくjsファイルに埋め込まれて再生されないため、サーバー側にロードされているので、ちょうどカート用の新しいビュー・ページを作成してやってしまった何を 。

Answer 1

はルビーJavaScriptが...反対

あなたの問題は<%= @shopping_cart.clear %>は、サーバー上のすべての時間を実行することである......いないブラウザで....サーバー上で実行されていないときに、ブラウザでイベントが発生します。

サーバーに何かを送信してから、その要求でカートをクリアすることをお勧めします