Cập nhật Dữ liệu sọc số

Question

Tôi đang triển khai Stripe vào trang web django và mọi thứ đều hoạt động ngoại trừ một phần. Trong giỏ hàng của tôi, người dùng có thể cập nhật các mục thay đổi tổng số. Mọi thứ đang hoạt động chính xác trừ khi đặt số lượng dữ liệu trên tập lệnh js Stripe Checkout js.

Khi tải trang, mọi thứ hoạt động tốt, tuy nhiên nếu khách hàng thay đổi giỏ hàng thì số lượng dữ liệu không cập nhật. Tôi có một hộp khác cho thấy tổng số, và số tiền đó cập nhật tốt.

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

Và rồi javascript của tôi mà cố gắng để cập nhật là thế này:

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

Hóa ra rằng để có một dữ liệu số lượng động cho việc thanh toán sọc, bạn phải sử dụng Custom Checkout thay vì đơn giản Checkout. Mã này đã làm các 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>