Multiple Smart Buttons code in one Page

[Marcored]

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>

[MTS_Chiranjeevi]

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

[Temp20230526CS]

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

[Bart86]

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 

[JackieDaytona]

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

[Bart86]

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

[Cliffitt]

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

[JackieDaytona]

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>

[JackieDaytona]

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

[Bart86]

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?