Update stripe data amount when price is changed

Question

I have built a website in the codeigniter framework.

I've got a form a user fills out when making a purchase, here they can select the quantity of how many items they want. At the moment my code updates a span label with the new amount. My code is

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


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

this updates perfectly, I am wondering how can I now pass the var Tprice into my stripe data-amount bit?

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

See my post [here](https://stackoverflow.com/a/50080786/7618391) for an easy quick fix to this. — Ryan Walker, Apr 28 '18 at 20:42

Ikhlak S. · Accepted Answer · 2018-01-03T17:22:47.763

You will need to create a custom Stripe Pay button.

Your button:

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

Have tried that :( but it doesnt seem to be updating the price for stripe at all. Not to sure why, the price seems to just stay the same — Jamie Warren, Jan 03 '18 at 14:42

Update stripe data amount when price is changed

1 Answers1