价格变更时更新条带数据金额

时间:2018-01-03 09:56:10

标签: javascript

我在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传递到我的条带数据量位?

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

1 个答案:

答案 0 :(得分:1)

您需要创建自定义条带支付按钮。

您的按钮:

<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();
});