CODEWITHSUNDEEP
javascriptruby-on-railsstripe-payments
user7811328
user7811328

Reputation: 29

Adding event listener to Stripe JS button

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

This is a stripe button that processes payments. The problem is the Eventlistener. Every time I refresh the page or go to a different page the ruby code gets executed and my cart is cleared. Anyone have any ideas? Even if I change the js to make it invalid the ruby gets executed can you also explain this as well?

Full page being loaded: 

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

Edit: What I ended up doing is just creating a new view page for the cart since Ruby is loaded server side and thus does not play well embedded in js.

Upvotes: 0

Views: 609

Answers (1)

charlietfl
charlietfl

Reputation: 171669

ruby runs on server .... not in browser...... javascript is the opposite

Your issue is that <%= @shopping_cart.clear %> will execute on server every time...not when event fires in browser.

i would suggest you use ajax to send something to server and then clear cart in that request as appropriate

Upvotes: 1

Related Questions