[英]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.