Aktualizacja danych w pasku danych

Question

Wdrażam Stripe na stronie django i wszystko działa z wyjątkiem jednej części. W moim koszyku użytkownicy mogą aktualizować elementy, które zmieniają łączną wartość. Wszystko działa poprawnie, z wyjątkiem ustawiania kwoty danych w skrypcie js Stripe Checkout.

Po załadowaniu strony wszystko działa świetnie, jednak jeśli klient zmieni koszyk, kwota danych nie zostanie zaktualizowana. Mam inne pudełko, które pokazuje sumę, a ta kwota aktualizuje się dobrze.

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

I wtedy mój javascript, który próbuje zaktualizować to:

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

Okazuje się, że aby mieć dynamiczny data-kwotę do zapłaty paskiem, trzeba użyć Custom Checkout zamiast prostego Checkout. Ten kod załatwił sprawę.

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