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.
- Need help to integrate Advanced Checkout (PPCP) With WHMCS in PayPal Upgrade Community
- Shipping options are not appearing in my cart through link or button. in PayPal Payments Standard
- Need help to integrate PayPal Checkout Advanced (PPCP) with WooCommerce in PayPal Upgrade Community
- How to integrate paypal smart buttons on cart page? in REST APIs
- Seller "Buy now" button - unable to edit a button in PayPal Payments Standard