[英]PayPal express checkout integration with multiple buttons on one page
我目前有一個項目列表,其中每個項目都有一個Paypal按鈕。 每個項目將通過單擊其關聯按鈕單獨購買。
<ul>
<li data-id="1">Item 1 <div class="paypal-button"></div></li>
<li data-id="2">Item 2 <div class="paypal-button"></div></li>
<li data-id="3">Item 3 <div class="paypal-button"></div></li>
</ul>
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
<script>
paypal.Button.render({
// options
}, '.paypal-button');
</script>
不幸的是,似乎paypal.Button.render()
只會呈現它找到的第一個元素。
是否可以對多個元素進行此調用?
如果您不喜歡跟蹤像我這樣的ID,您可以改用類。 並使用數據屬性來區分。
<div class="paypal-button" data-my-attribute="tree"></div>
<div class="paypal-button" data-my-attribute="dog"></div>
<div class="paypal-button" data-my-attribute="car"></div>
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
<script>
document.querySelectorAll('.paypal-button').forEach(function(selector) {
paypal.Button.render({
// options
console.log( selector.dataset.myAttribute );
}, selector);
});
</script>
您需要為每個元素賦予唯一的ID,然后多次調用render:
<ul>
<li data-id="1">Item 1 <div id="button-1"></div></li>
<li data-id="2">Item 2 <div id="button-2"></div></li>
<li data-id="3">Item 3 <div id="button-3"></div></li>
</ul>
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
<script>
[ '#button-1', '#button-2', '#button-3' ].forEach(function(selector) {
paypal.Button.render({
// options
}, selector);
});
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.