Loading multiple Stripe Checkout Buttons Very Slow - php

Question

I have a php page where I load stripe checkout buttons for 12 subscription options. The page takes up to 10 seconds to load. Is there a way to speed it up?. I can't demonstrate it as it requires the user to be logged in before the buttons will load.The code that loads the buttons is in a for loop and looks like this:
<form action="https://www.example.com/plans/subscribe.php" method="post">
<input type="hidden" name="customer" value="<? echo $stripeID ?>">
<input type="hidden" name="plan" value="<? echo $thisPlan['id'] ?>">
<script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="<?php echo $stripe['publishable_key']; ?>"
data-name="www.breakoutwatch.com"
data-image="https://www.example.com/images/eyeLogo.png"
data-description="<? echo $thisPlan['name'] ?>"
data-amount="<? echo $thisPlan['amount'] ?>"
data-locale="auto"
data-panel-label="Subscribe Now"
data-label="Subscribe"
data-allow-remember-me="false">
</script>
</form>

Answer 1

It requires a little javascript work, but I'd recommend using Checkout's custom integration for a case like this!
https://stripe.com/docs/checkout#integration-custom
You'd load checkout once, create your buttons, and add on click handlers. To identify the plan being chosen you could add a hidden <input> which is populated with the plan name based upon the button you click.
Example with multiple buttons
form
<form id="myForm" action="/charge" method="post">
<input type="button" id="buySocks" value="Buy Socks for $10">
<input type="button" id="buyShirts" value="Buy Shirts for $30">
<input type="hidden" id="stripeToken" name="stripeToken" />
<input type="hidden" id="stripeEmail" name="stripeEmail" />
<input type="hidden" id="product" name="product" />
</form>
js
// configure checkout
var handler = StripeCheckout.configure({
key: 'pk_test_6pRNASCoBOKtIshFeQd4XMUh',
token: function(token) {
// append your token id and email, submit your form
$("#stripeToken").val(token.id);
$("#stripeEmail").val(token.email);
$("#myForm").submit();
}});
// click on a button
$('#buySocks').on('click', function(e) {
$("#product").val("socks");
openCheckout("Buy socks for $10", 1000);
e.preventDefault();
});
$('#buyShirts').on('click', function(e) {
$("#product").val("shirts");
openCheckout("Buy shirts for $30", 3000);
e.preventDefault();
});
// open checkout
function openCheckout(description, amount){
handler.open({
name: 'My Cool Shop',
description: description,
amount: amount
});
}
Full example: http://jsfiddle.net/ns2fezag/

Answer 2

While this answer isn't code, I ended up solving this by moving the Stripe checkout form over to a different page. Now my users click "Add to cart" and they're brought to a different page with a single button to invoke Stripe's checkout modal. It's not perfect but it's much faster and works.