Обновить данные о размере полосы

Я реализую Stripe на django-сайте, и все работает, за исключением одной части. В моей корзине пользователи могут обновлять элементы, которые изменяют общее количество. Все работает правильно, за исключением установки количества данных на Stripe Checkout js script.

Когда страница загружается, все работает отлично, однако, если клиент меняет свою корзину, сумма данных не обновляется. У меня есть еще одна коробка, которая показывает общее количество, и эта сумма прекрасно обновляется.

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

И тогда мой javascript, который пытается обновить, выглядит так:

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. */
  }

Ответ 1

Оказывается, для того, чтобы иметь динамическую сумму данных для оплаты полосы, вы должны использовать Пользовательскую проверку вместо Simple Checkout. Этот код сделал трюк.

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

Ответ 2

Как сказал @awwester, вы можете использовать Stripe Custom Checkouts. Хотя я нашел более простой способ сделать это через jQuery, просто перемонтируя скрипт с измененной переменной при каждом увеличении количества:

$("#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>'
);

Ответ 3

ИЛИ вы можете просто использовать следующий код, прежде чем нажимать кнопку полосы ;-)

StripeCheckout.__app.configurations.button0.amount = 1234;

$('#stripe-button').click();