Update lane size data

Question

I implement Stripe on a django site and everything works, except for one part. In my cart, users can update items that change the total. Everything works correctly, except setting the amount of data on the Stripe Checkout js script.

When the page loads, everything works fine, however, if the client changes his basket, the amount of data is not updated. I have another box that shows the total quantity, and this amount is perfectly updated.

<!-- here is the script tag in HTML--> <script id="stripe-script" src="https://checkout.stripe.com/checkout.js" class="stripe-button" data-image="{% static 'img/marketplace.png' %}" data-key="{{ STRIPE_PUBLIC_KEY }}" data-name="Serendipity Artisan Blends" data-description="Purchase Items" data-amount="{{ cart_stripe_total }}"> </script> 

And then my javascript, which is trying to update, looks like this:

 function updateTotal(amount) { /* update the total in the cart in both the table cell and in the stripe button data-amount */ var totalStr = shoppingTotalCell.text().replace('$', ''), originalTotal = parseFloat(totalStr), newTotal = originalTotal + amount, newTotalStripe = newTotal * 100, newTotalStr = newTotal.toFixed(2), script = $('#stripe-script'); shoppingTotalCell.text('$' + newTotalStr); console.log(script.data("amount")); // this returns the correct original amount script.data("amount", newTotalStripe); console.log(script.data("amount")); /* this returns the updated amount, however the HTML data-amount attribute does not update. */ } 

Answer 1

It turns out that in order to have a dynamic amount of data to pay for the strip, you should use Custom Check instead of Simple Checkout. This code did the trick.

  <button class="btn btn-primary btn-lg" id="stripe-button"> Checkout <span class="glyphicon glyphicon-shopping-cart"></span> </button> <script> $('#stripe-button').click(function(){ var token = function(res){ var $id = $('<input type=hidden name=stripeToken />').val(res.id); var $email = $('<input type=hidden name=stripeEmail />').val(res.email); $('form').append($id).append($email).submit(); }; var amount = $("#stripeAmount").val(); StripeCheckout.open({ key: '{{ STRIPE_PUBLIC_KEY }}', amount: amount, name: 'Serendipity Artisan Blends', image: '{% static "img/marketplace.png" %}', description: 'Purchase Products', panelLabel: 'Checkout', token: token }); return false; }); </script> 

Answer 2

As @awwester said, you can use Stripe Custom Checkouts. Although I found an easier way to do this through jQuery, simply by remounting the script with the changed variable with each increase in the number:

 $("#stripe-form").html( '<input type="hidden" name="amount" value="' + totalCost.replace(".", "") + '" /><input type="hidden" name="currency" value="usd" /><script src="https://checkout.stripe.com/checkout.js" class="stripe-button" data-key="pk_test_123123123123" data-amount="' + totalCost.replace(".", "") + '" data-zip-code="true" data-currency="usd" data-billing-address="true" data-shipping-address="true" data-name="Company Name" data-description="Product Name" data-image="https://image" data-locale="auto"></script>' ); 

Answer 3

OR you can simply use the following code before clicking the strip button ;-)

 StripeCheckout.__app.configurations.button0.amount = 1234; $('#stripe-button').click();