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

MTS_Chiranjeevi
Moderator
Moderator

Hi @Marcored,

 

Thank you for contacting PayPal community.

 

Our sincere apologies for the inconvenience caused.

 

I request to initialize the script code only once in your code, to resolve the issue.

 

<script src="https://www.paypal.com/sdk/js?client-id=sb&amp;currency=EUR&amp;locale=de_DE" data-sdk-integration-source="button-factory"></script>

 

Thank you for understanding and patience.

 

Sincerely,

Chiranjeevi

PayPal, Inc. 

 

If this post or any other was helpful, please enrich the community by giving kudos or accepting it as a solution

Login to Me Too

Temp20230526CS
Contributor
Contributor
The Buyer party will use this E-Mail Address to sign in to Escrow.com and view the transaction.
Login to Me Too

Bart86
Contributor
Contributor

Hi. Any solution to this? 
I am stuck with the same problem and it's super frustrating... 

setting up on button itself is hard enough as a non-programmer. Now, I just knew I can only render one button in one page properly. 

 

Having multiple button on one page poses issue. either it doesn't show or it appear out of place.

 

@Marcored @MTS_Chiranjeevi 

Login to Me Too

JackieDaytona
Contributor
Contributor

On your .render('#paypal-button-container');, just add a comma and call another DIV ID

 

So .render('#paypal-button-container, #otherdiv');

 

Hope that helps

 

D

Login to Me Too

Bart86
Contributor
Contributor

But how to differentiate the different buttons. Paypal doesn't mention it on the developer documentation. 
also the button code generator generates some "paypal-button-container" every time it generates

Thanks for the response though, but, how...

Login to Me Too

Cliffitt
Contributor
Contributor

Facts. It appears that the code only reads the last embedded smart button. Anyone from Paypal here to help us out? @MTS_Chiranjeevi  @JackieDaytona 

Login to Me Too

JackieDaytona
Contributor
Contributor

OK, sorry I did not elaborate for you all (PayPal rubbing off on me LoL)...

 

You need to give each element a unique id, then call render multiple times:

 

Here is the PROPER way to call multiple buttons, Mind you this is in JQuery:

 

      <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>

 

 

Login to Me Too

JackieDaytona
Contributor
Contributor

And if you do not like ID's then here is an example with classes

 

        <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>
Enjoy -D

 

Login to Me Too

Bart86
Contributor
Contributor

Thanks @JackieDaytona  but is this the "checkout.js" method of integration? 
I am using the Paypal SDK method, and the button code generator doesn't differentiate the buttons, would your script still work?

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.