Multiple Smart Buttons code in one Page
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hello PayPal Community,
I'm writing to seek your expertise because I`m trying to integrate three Paypal Smart Payment buttons on one page. The code that the wizard generates is the one below, where XXX corresponds to my client ID.
I tried copying and pasting the code three times and changing the first line div id container (#paypal-button-container1, #paypal-button-container2 , ecc..) and also the render function target to match it.
The console is reporting Uncaught Error: zoid destroyed all components. I tried searching for similar issues but I'm still struggling.
Any tip or suggestion is appreciated, thank you 🙂
<div id="paypal-button-container"></div>
<script src="https://www.paypal.com/sdk/js?client-id=XXX¤cy=EUR" data-sdk-integration-source="button-factory"></script>
<script>
paypal.Buttons({
style: {
shape: 'pill',
color: 'gold',
layout: 'horizontal',
label: 'buynow',
},
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: '206.18'
}
}]
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
alert('Transaction completed by ' + details.payer.name.given_name + '!');
});
}
}).render('#paypal-button-container');
</script>
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Yes since the only thing happening is a render is being called with in the DOM 2 or 3 times depending on how many buttons you want. Also my script is from the PP site, just modified for my pages using JQuery. Also I am using REST API v2 Client Side, but server side should work that same since it's all in the DOM.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Did you @Marcored find a solution?
I am still struggling here, even if my containers have unique IDs, the script doesn't work or if it works I have only one set of smart buttons for 1 item.
Is it important where the script is in the body?
Thanks for some more help. @JackieDaytona
Cheers,
Kay
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Here it is, did not test but should work:
<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>
Hope that helps
D
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Don't know if you find a solution or not, but this works for me.
<div id="paypal-button-container-50"></div>
<div id="paypal-button-container-100"></div>
<div id="paypal-button-container-150"></div>
<script>
var url = "https://www.paypal.com/sdk/js?client-id=xyz¤cy=GBP";
var myScript = document.createElement('script');
myScript.setAttribute('data-sdk-integration-source', 'button-factory');
myScrip.src=url;
document.head.appendChild(myScript);
function FirstPriceButton(){
paypal.Buttons({
style: {
shape: 'rect',
color: 'black',
layout: 'vertical',
label: 'paypal',
},
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: '50'
}
}]
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
alert('Transaction completed by ' + details.payer.name.given_name + '!');
});
}
}).render('#paypal-button-container-50');
};
function SeconPriceButton(){
paypal.Buttons({
style: {
shape: 'rect',
color: 'black',
layout: 'vertical',
label: 'paypal',
},
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: '100'
}
}]
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
alert('Transaction completed by ' + details.payer.name.given_name + '!');
});
}
}).render('#paypal-button-container-100');
};
function thirdPriceButton(){
paypal.Buttons({
style: {
shape: 'rect',
color: 'black',
layout: 'vertical',
label: 'paypal',
},
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: '150'
}
}]
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
alert('Transaction completed by ' + details.payer.name.given_name + '!');
});
}
}).render('#paypal-button-container-150');
}
myScript.onload = function () {
firstPriceButton();
secondPriceButton()
thirdPriceButton()
};
</script>
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
The code that Novashock supplied does work when you fix the spelling errors of the functions and variables as well as put your actual PayPal credentials in it.
The function names must match the names used in the onload function.
<script>
var url = "https://www.paypal.com/sdk/js?client-id=sb&enable-funding=venmo¤cy=CAD";
var myScript = document.createElement('script');
myScript.setAttribute('data-sdk-integration-source', 'button-factory');
myScript.src=url;
document.head.appendChild(myScript);
function firstPriceButton(){
paypal.Buttons({
style: {
shape: 'rect',
color: 'black',
layout: 'vertical',
label: 'paypal',
},
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: '50'
}
}]
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
alert('Transaction completed by ' + details.payer.name.given_name + '!');
});
}
}).render('#paypal-button-container-50');
};
function secondPriceButton(){
paypal.Buttons({
style: {
shape: 'rect',
color: 'black',
layout: 'vertical',
label: 'paypal',
},
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: '100'
}
}]
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
alert('Transaction completed by ' + details.payer.name.given_name + '!');
});
}
}).render('#paypal-button-container-100');
};
function thirdPriceButton(){
paypal.Buttons({
style: {
shape: 'rect',
color: 'black',
layout: 'vertical',
label: 'paypal',
},
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: '150'
}
}]
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
alert('Transaction completed by ' + details.payer.name.given_name + '!');
});
}
}).render('#paypal-button-container-150');
}
myScript.onload = function () {
firstPriceButton();
secondPriceButton()
thirdPriceButton()
};
</script>
- « Previous page
-
- 1
- 2
- Next page »
Haven't Found your Answer?
It happens. Hit the "Login to Ask the community" button to create a question for the PayPal community.
- Seller "Buy now" button - unable to edit a button in PayPal Payments Standard
- What happened to PayPal Buttons?! in PayPal Payments Standard
- PayPal Buttons in PayPal Payments Standard
- Add to cart buttons create multiple cart tabs in PayPal Payments Standard
- PayPal buttons kenya in PayPal Payments Standard