Multiple Smart Buttons code in one Page

Marcored
New Community Member

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&currency=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>

Login to Me Too
15 REPLIES 15

JackieDaytona
Contributor
Contributor

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.

Login to Me Too

vinyljunkie
Contributor
Contributor

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

Login to Me Too

JackieDaytona
Contributor
Contributor

let me write it for ya

 

Some of it will be in JQuery as well

 

Give me a day or two

Login to Me Too

JackieDaytona
Contributor
Contributor

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


Login to Me Too

Novashock
New Community Member

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&currency=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>

 

Login to Me Too

Temp20230526CT
New Community Member

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&currency=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>

Login to Me Too

Haven't Found your Answer?

It happens. Hit the "Login to Ask the community" button to create a question for the PayPal community.