Question

我有一个php页面，我为12个订阅选项加载条带结帐按钮。该页面最多需要10秒钟才能加载。有没有办法加快速度？我无法演示它，因为它需要用户在按钮加载之前登录。加载按钮的代码是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>，其中会根据您单击的按钮填充计划名称。

多个按钮的示例

<强>形式

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

Answer 2

虽然这个答案不是代码，但我最终通过将Stripe checkout表单移到另一个页面来解决了这个问题。现在，我的用户单击“添加到购物车”，并通过一个按钮将他们带到另一个页面，以调用Stripe的结帐模式。它不是完美的，但是速度更快并且可以工作。

加载多个条纹结帐按钮非常慢

2 个答案: