Обновить количество данных Stripe

Question

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

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

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

Answer 1

Оказывается, что для получения динамической суммы данных для полосового платежа вы должны использовать Custom Checkout вместо 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>

Answer 2

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

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

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

Answer 3

Как сказал @awwester, вы можете использовать пользовательские проверки Stripe. Хотя я нашел более простой способ сделать это через 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>'
);