繁体   English   中英

一页上的多个条纹结帐按钮

[英]Multiple Stripe Checkout Buttons on One Page

我在for循环中的一页上有可变数量的 Stripe Checkout 按钮,它们可以是不同的数量/标题。 不幸的是,按钮在第一个之后不起作用。 这是渲染出来的样子。

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

然后我有脚本被调用:

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

有没有办法只调用一次脚本并通过按钮动态发送amount

以下是将 Stripe 侦听器分配给多个结帐按钮的正确过程。 此示例还使用计划,根据您的问题随产品更改。

首先,使用具有唯一 ID 的每个结帐按钮创建标记。

在示例中,使用 PHP 作为服务器端语言来生成标记。 如果对您的情况更有意义,请更改为 JavaScript,或者您使用的任何内容。

<?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 } ?>

然后,在客户端 foreach 计划条目将侦听器分配给相应的按钮:

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM