加載多個條紋結賬按鈕很慢

Question

我有一個php頁面，我加載12個訂閱選項的條紋結帳按鈕。該頁面最多需要10秒才能加載。有沒有辦法加快速度？因爲它需要用戶先登錄按鈕之前將load.The加載按鈕的代碼是在for循環中，看起來像這樣我不能證明它：

<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

它需要一點點的javascript工作，但我建議使用Checkout的自定義集成來處理這種情況！

https://stripe.com/docs/checkout#integration-custom

你會加載結帳一次，創建按鈕，並添加點擊處理程序。要確定選擇的計劃，您可以添加一個隱藏的<input>，該隱藏的<input>根據您點擊的按鈕填入計劃名稱。

實例與多個按鈕

形式

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

完整的示例：http://jsfiddle.net/ns2fezag/