Multiple Stripe Checkout Buttons on One Page

Question

I have a variable amount of Stripe Checkout buttons on one page within a for loop, which can be different amounts/titles. Unfortunately, the buttons aren't working past the first one. This is what it looks like rendered.

<a class="btn btn-primary text-white mt-3 btn-sm" id="purchaseButton">Add (£20)</a>

<a class="btn btn-primary text-white mt-3 btn-sm" id="purchaseButton">Add (£35)</a>

<a class="btn btn-primary text-white mt-3 btn-sm" id="purchaseButton">Add (£42)</a>

Then I have the script being called:

<script src="https://checkout.stripe.com/checkout.js"></script>
<script>
var handler = StripeCheckout.configure({
  key: 'pk_test_TYooMQauvdEDq54NiTphI7jx',
  locale: 'auto',
  token: function(token) {
    // You can access the token ID with `token.id`.
    // Get the token ID to your server-side code for use.
  }
});

document.getElementById('purchaseButton').addEventListener('click', function(e) {
  // Open Checkout with further options:
  handler.open({
    name: 'Stripe.com',
    src: "https://checkout.stripe.com/checkout.js",
    class: "stripe-button",
    key: "pk_test_6pRNASCoBOKtIshFeQd4XMUh",
    name: "Demo Site",
    email: "{{ currentUser.email }}",
    currency: "gbp",
    description: "{{ entry.title }} - {{ entry.author.username }}",
    amount: "{{ entry.cost * 100 }}"
  });
  e.preventDefault();
});

// Close Checkout on page navigation:
window.addEventListener('popstate', function() {
  handler.close();
});
</script>

Is there a way to only call the script once and send the amount via the button dynamically?

Answer 1

Here is the correct procedure to assign the Stripe listener to multiple checkout buttons. Also this example uses plans, change with products as per your question.

First, create your markup with each checkout button having an unique ID.

In the example PHP is used, as a server side language to generate the markup. Change to JavaScript, or whatever you use if it makes more sense in your case.

<?php foreach ($planData as $plan) { ?>
    <form method="GET" onsubmit="return false;">
        <?php echo $plan['Title']; ?>
            <button id="checkout-button-<?php echo $plan['Id']; ?>">
                Subscribe
            </button>
    </form>
<?php } ?>

Then, on the client side foreach plan entry assign the listener to the corresponding button:

$(plans).each(function (index, plan) {
    var checkoutButton = document.querySelector('#checkout-button-' + plan.Id);
    checkoutButton.addEventListener('click', function () {
    stripe.redirectToCheckout({
        items: [{
             // Define the product and plan in the Dashboard first, and use the plan
             // ID in your client-side code.
             plan: plan.StripePlanId,
             quantity: 1
             }],
          successUrl: plan.UrlSubscribeSuccess,
          cancelUrl: plan.UrlSubscribeCancel,
          customerEmail: userEmail
     });
   });
 });