Menu
I can't figure this out. I checked other questions regarding setting data attributes, seems to be a tricky enough thing.
The stripe button amount is purely for aesthetics, I'm trying to set it ('data-amount') each time a user updates the quantity select box.
Every time I change the quantity select an alert gives the correct amount and if I inspect the dom the 'data-amount' attribute appears to be set correctly but when I click the stripe button the modal shows the default data-amount, i.e nothing.
Anyone know how to do this?
view (form, select input not shown)
<div class="stripe-controls" align="center">
<script src="https://button.stripe.com/v1/button.js" class="stripe-button"
data-key="ENV['STRIPE_PUBLIC_KEY'] %>" data-amount="">
</script>
</div>
coffeescript
$ ->
$('#order_quantity').click(orderTotal)
orderTotal()
orderTotal = ->
quantity = $('#order_quantity').val()
price = $('#ticket-price').data('url')
total = quantity * price
$('.stripe-button').attr('data-amount', total)
alert total
525
A data-* attribute on a <button> tag attaches additional data to the button. To create a custom attribute, replace * with a lowercase string, such as data-id , data-status , or data-location .
To get a data attribute through the dataset object, get the property by the part of the attribute name after data- (note that dashes are converted to camelCase). Each property is a string and can be read and written. In the above case setting article.dataset.columns = 5 would change that attribute to "5" .
Adding a data attribute is easy. Any HTML element can have any number of data attributes added to its opening tag. We simply type data- followed by the name of our attribute into the element's opening tag alongside any other attributes we're already using.
Specify a custom amount using StripeCheckout.open().
Note: I work at Stripe.
151
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
