javascript - 价格变化时更新 strip 数据量

Question

我在 codeigniter 框架中建立了一个网站。

我有一个用户在购买时填写的表格，他们可以在这里选择他们想要的商品数量。目前我的代码用新的数量更新了一个跨度标签。我的代码是

  $( "#cases" ).change(function() {
    var price = document.getElementById("ppc").value;
    var quantity = document.getElementById("cases").value;
    var Tprice = price * quantity ;


    document.getElementById("Totprice2").innerHTML =  Tprice
    });

这更新完美，我想知道我现在如何将 var Tprice 传递到我的 strip 数据量位？

<script
  src="https://checkout.stripe.com/checkout.js" class="stripe-button"
  data-key="<?= get_option('stripe_public') ?>"
  data-amount="3999"
  data-description="Auction BIN #<?= $listing->listingID ?>"
  data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
  data-locale="auto"
  data-zip-code="true"
  data-currency="<?= get_option('currency_code') ?>">
</script>

Answer 1

您将需要创建一个自定义 Stripe Pay 按钮。

你的按钮:

<script src="https://checkout.stripe.com/checkout.js"></script>
<button id="strip-btn">Pay with Card</button>

JS:

// Your function
 $( "#cases" ).change(function() {
  var price = document.getElementById("ppc").value;
  var quantity = document.getElementById("cases").value;
  var Tprice = price * quantity ;

  document.getElementById("Totprice2").innerHTML =  Tprice
});

// Open handler
var handler = StripeCheckout.configure({
  key: "<?= get_option('stripe_public') ?>",
  image: "https://stripe.com/img/documentation/checkout/marketplace.png",
  token: function(token) {
    // You can access the token ID with `token.id`.
  }
});


// When button is clicked
document.getElementById('strip-btn').addEventListener('click', function(e) {
  // Open Checkout with further options:
  handler.open({
    // This is where you set all your settings
    description: "Auction BIN #<?= $listing->listingID ?>",
    zipCode: true,
    amount: Tprice
  });
  e.preventDefault();
});

// Important: Close handler once pop-up appears
window.addEventListener('popstate', function() {
  handler.close();
});