PayPal Express Checking Integration with Multiple Buttons on One Page
I currently have a list of items with a Paypal button associated with each one. Each item will be purchased separately by clicking on the corresponding button.
<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>
Unfortunately, it seems like it paypal.Button.render()
will only display the first item it finds.
Is it possible to make this call for multiple items?
+3
source to share
2 answers
You need to give each element a unique ID and then call render multiple times:
<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>
+2
source to share
If you don't like keeping track of IDs like me, you can use classes instead. And use data attributes for differentiation.
<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>
+2
source to share