当商品数量变更时同步更新Stripe的data-amount参数值

Great job getting the total price calculation working! The tricky part here is that Stripe's Checkout button renders when the page loads based on the initial data attributes—so just updating the original <script> tag won't change the button's behavior. Here are two solid approaches to fix this:

Approach 1: Dynamically Update the Rendered Stripe Button #

Stripe converts your initial script tag into a button element with the class stripe-button-el. You can directly update this button's data-amount attribute after calculating your total price. Just remember: Stripe requires data-amount to be in cents (not dollars/euros), so you'll need to multiply your total by 100 and round to an integer.

Update your existing change handler like this:

$( "#cases" ).change(function() {
  // Ensure values are numbers (avoid string multiplication issues)
  var price = parseFloat(document.getElementById("ppc").value);
  var quantity = parseInt(document.getElementById("cases").value);
  
  // Calculate total price (in your currency's base unit, e.g. dollars)
  var Tprice = price * quantity ;
  document.getElementById("Totprice2").innerHTML = Tprice;

  // Convert total to cents for Stripe
  var stripeAmount = Math.round(Tprice * 100);

  // Find the rendered Stripe button and update its amount
  var stripeButton = document.querySelector('.stripe-button-el');
  if (stripeButton) {
    stripeButton.dataset.amount = stripeAmount;
  }
});

Approach 2: Re-Render the Stripe Button (More Reliable) #

If you run into issues with the first approach (like Stripe caching the initial amount), you can completely re-render the button whenever the quantity changes. This involves replacing the static script tag with a container, then dynamically creating a new script tag with the updated amount.

Step 1: Replace the Static Stripe Script with a Container #

Replace your existing Stripe script tag with an empty div:

<div id="stripe-button-container"></div>

Step 2: Create a Function to Render the Button #

Add this reusable function to render the Stripe button with a given amount:

// Render Stripe Checkout button with a specific amount (in cents)
function renderStripeButton(amount) {
  const container = document.getElementById('stripe-button-container');
  // Clear any existing button
  container.innerHTML = '';

  // Create new script tag with updated attributes
  const script = document.createElement('script');
  script.src = 'https://checkout.stripe.com/checkout.js';
  script.className = 'stripe-button';
  script.dataset.key = '<?= get_option('stripe_public') ?>';
  script.dataset.amount = amount;
  script.dataset.description = 'Auction BIN #<?= $listing->listingID ?>';
  script.dataset.image = 'https://stripe.com/img/documentation/checkout/marketplace.png';
  script.dataset.locale = 'auto';
  script.dataset.zipCode = 'true';
  script.dataset.currency = '<?= get_option('currency_code') ?>';

  container.appendChild(script);
}

// Initialize the button with your default amount on page load
document.addEventListener('DOMContentLoaded', function() {
  renderStripeButton(3999); // Match your original default amount
});

Step 3: Call the Render Function in Your Change Handler #

Update your quantity change handler to re-render the button with the new total:

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

  // Convert total to cents and re-render the button
  const stripeAmount = Math.round(Tprice * 100);
  renderStripeButton(stripeAmount);
});

Key Notes: #

• Always convert your total price to cents (or the smallest unit of your currency) for Stripe—this avoids decimal precision issues.
• Adding parseFloat() and parseInt() ensures you're working with numbers, not strings, which prevents unexpected results from multiplication.
• The second approach is more reliable if you notice the first method doesn't update the checkout modal's amount (Stripe sometimes caches initial configuration).

内容的提问来源于stack exchange，提问作者Jamie Warren